AJAX
2017-08-01 本文已影响27人
DCbryant
题目1： ajax 是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
- 这个过程是同步的，顺序执行
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。
ajax的优点：
- 最大的一点是页面无刷新，用户的体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。。
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
- ajax可使因特网应用程序更小、更快，更友好。
ajax的缺点：
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
Ajax和XMLHttpRequest的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。
题目2：前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端在进行开发前，需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）。
- 前后端开发联调注意事项
- URL：接口名称
- 发送请求的参数和格式（get/post）
- 数据响应的数据格式（数组/对象）
- 根据前后端约定，整理接口文档
- 如何 mock 数据
- 搭建 web 服务器
- 根据接口文档仿造假数据
- 关联前后端文件，开启 web 服务器
- 验证前端页面功能及显示是否正确
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
初始的时候上锁，请求开始的时候解锁，请求结束的时候继续上锁
//添加一个状态锁 初始为true，上锁为true，解锁为false
var lock=true
btn.addEventListener("click",function(){
//状态为false时，直接返回不继续执行函数
if(!lock){
return
}
let xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if(xhr.readyState===4）
// readystate为4时 ,此次请求结束，上锁，因为这一步是异步的，先执行lock=false，待到readystate为4时，数据已经到来，此时就可以设置lock=true，继续请求数据了
lock=true
}
}
xhr.open("GET",url)
xhr.send()
//解锁，这时候请求开始
lock=false
}
)
题目4：实现加载更多的功能，效果范例352，后端在本地使用server-mock来模拟数据
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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;
}
.btn:hover{
background-color: red;;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a class="btn" id="load-more" href="#">加载更多</a>
<script>
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex= 0//当前要加载的数据的序号
var len = 5// 每次加载多少个数据
var isDataArrive = true//状态锁，用于判断是否在加载数据
btn.addEventListener('click',function(e){
e.preventDefault()
// 防止点击多次
if(!isDataArrive){return;}
loadData(function(news){
renderPage(news)
pageIndex = pageIndex + 5
isDataArrive = true
})
isDataArrive =false
})
function loadData(callback){
ajax({
type: 'get',
url: '/loadMore',
// md，果然是这里错了...
data: {
index: pageIndex,
length: len
},
onSuccess: callback,
onError: function(){
console.log('error')
}
})
}
function renderPage(news){
var fragment = document.createDocumentFragment()
for(var i=0;i<news.length;i++){
var node = document.createElement('li')
node.innerText = news[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
}
function ajax(options){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status == 304){
var results = JSON.parse(xhr.responseText)
options.onSuccess(results)//这里把数据传给了renderPage
}else{
options.onError()
}
}
}
var query = '?'
for(key in options.data){
query += key + '=' +options.data[key] + '&'
// ? = ? + index=0
// ? = ? + index=0 + &length=5
}
query = query.substr(0,query.length-1)
xhr.open(options.type,options.url+query,true)
xhr.send()
}
/*
1. GET
2. /loadMore
3. {
index: 3,
length: 5
}
4. ['news1', 'news2'... 'news5']
{
status: '1',
data: [],
errorMsg: 'x'
}
*/
// var btn = document.querySelector('#load-more')
// var ct = document.querySelector('#ct')
// var pageIndex = 0;
// var lock = true;
// btn.addEventListener('click',function(e){
// e.preventDefault()
// if(!lock){//当lock为true即是xhr发送完的时候才可以继续发送请求，没发送完就不能继续发送请求
// return;
// }
// var xhr = new XMLHttpRequest()
// xhr.onreadystatechange = function(){
// if(xhr.readyState === 4){
// if(xhr.status ===200 || xhr.status === 304){
// var results = JSON.parse(xhr.responseText)
// var fragment = document.createDocumentFragment()
// for(var i=0;i<results.length;i++){
// var node = document.createElement('li')
// node.innerText = results[i]
// fragment.appendChild(node)
// }
// ct.appendChild(fragment)
// pageIndex = pageIndex + 5
// }else{
// console.log('出错了')
// }
// lock = true
// }
// }
// xhr.open('get','/loadMore?index=' + pageIndex + '&length=5',true)
// xhr.send()
// lock = false
// })
</script>
</body>
</html>
服务端：
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i))
}
res.send(data);
});
