1.ajax 是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。
- 传统的HTTP请求流程大概是这样的
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
- 这个过程是同步的，顺序执行
- AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
- 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。可以用xampp进行模拟也可使用server-mock
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var lock = true,
btn = document.qureySelector('#btn');
btn.addEventListener("click",function(){
if(!lock){
return // 如果没有收到数据 就不往下执行
}
loadData(function(news){
renderPage(news)
lock = true // 数据已发送
})
lock = false
})
https://www.zhihu.com/question/19805411
4.实现加载更多的功能，效果范例367，后端在本地使用server-mock来模拟数据
- get和post请求区别，使用get请求时一定要使用get方法进行监听，并且获取传递过来的参数是要使用query，使用post请求时一定要使用post方法进行监听，同时获取数据是要使用body
- post
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>
加载更多
</title>
<style>
ul,li{
margin: 0;
padding: 0
}
#ct li{
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
#load-more img{
width: 40px;
height: 40px;
}
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
#ct>li:hover{
background-color: green;
}
.btn:hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
<a id="load-more" class="btn" href="#">
加载更多
</a>
</body>
<script>
var btn = document.querySelector('#load-more') // 声明
var ct = document.querySelector('#ct') // 声明
var pageIndex = 2 // 实现每次点击自动加5项
var isDateArrive = true // 阻止用户重复点击 声明个变量
btn.addEventListener('click', function(e){ // 事件的触发
e.preventDefault() // 实现点击后页面不再返回顶部 取消默认事件
if(!isDateArrive){
return
} // 如果没有收到数据 就不往下执行
loadData(function(news){
renderPage(news)
pageIndex += 5 // 实现每次点击自动加5项
isDateArrive = true // 数据已发送
})
isDateArrive = false
})
function loadData(callback){
ajax({
type: 'POST',
url: '/load-more',
dtaType: 'json',
data: {
index: pageIndex,
length: 5
},
onSuccess: callback,
onError: function(){
alert("出错了")
}
})
}
function renderPage(news){
var fragment = document.createDocumentFragment() // 建立空白文档片段
for(var i = 0;i < news.length;i++){
var node = document.createElement('li') // 生成html节点
node.innerText = news[i] // 赋值
fragment.appendChild(node) // 在空白文档末尾添加节点
}
ct.appendChild(fragment) // ct 末尾加 li 节点
}
function ajax(options){
options.success = options.success || function() {}
options.error = options.error || function() {}
options.type = options.type || 'get'
options.dateType = options.dateType || 'json'
options.date = options.date || {}
var xhr = new XMLHttpRequest() // 声明 （ajax第一）
xhr.onreadystatechange = function(){ // （ajax第二）
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){ //（ajax第三）
if (options.dateType === 'text'){
options.success(xmlhttp.responseText)
}
if (options.dateType == 'json') {
var results = JSON.parse(xhr.responseText)
options.onSuccess(results)
}
} else {
options.onError()
}
}
}
var query = ''
for (key in options.data){
query += key + '=' + options.data[key] + '&'
}
query = query.substr(0,query.length-1)
/*
xhr.open(options.type, options.url + query,true) // 配置参数
xhr.send() //发送
*/
if (options.type.toLowerCase() === 'post') {
xhr.open(options.type,options.url,true)
xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded")
xhr.send(query)
}
if(options.type.toLowerCase() === 'get'){
xhr.open(options.type,options.url + '?' +query,true)
xhr.send()
}
}
</script>
</html>
// router.js
app.post('/load-more', function(req, res) {
var curIdx = req.body.index
var len = req.body.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i))
}
setTimeout(function(){
res.send(data);
},5000) // 模仿网速慢
});
网友评论