进阶12 ajax实践
1. ajax 是什么？有什么作用？
Ajax（['eidʒæks]）是Asynchronous JavaScript and XML的缩写，从标题里就能看出，是异步的JS和XML，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。因为传统的HTTP 请求流程大概如下：
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
这个过程是同步的，顺序执行。如果网络传输速率过慢或者其他情况导致，用户长时间等待请求结果，而浏览器是卡死状态，那么体验就很糟糕。
另外如果当前页面DOM结构特别复杂，内容繁多，而需要请求的仅仅是一小段数据，却要大费周章，数据到来后总是要重新渲染页面。
而使用AJAX技术，通过JavaScript操作浏览器提供的XMLHttpRequest 对象，去发送一个Ajax请求，并接收服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
-
前后端联调时需要沟通定义接口：
- 约定好请求方法
- 请求路径(URL)
- 前端需要传递什么样的参数（入参）
- 数据格式（回参，包括可能的状态码）
-
mock数据：
在后端接口完成之前，前端通过mock数据，能够在不依赖后端环境的情况下进行开发，只要约定好接口。
常用的手段就是搭建本地mock server，如果装了nodejs，就可以用npm 下载安装了，然后只需要在本地的mock server中实现请求路由映射即可，如果使用js语言，也就是 router.js，可以按照约定在里面模拟假数据，以相应前端浏览器的请求。
除此之外，还可以使用线上的模拟数据生成服务，比如Easy Mock：
http://www.easy-mock.com 注册 打开任意一个项目 创建接口 使用接口（AJAX、JSONP都行，具体看文档）
xhr.open('get', 'http://www.easy-mock.com/mock/59b95cf3e0dc663341a8fa20/example/loadMore', true)
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
首先这样做的目的，是因为在真实的网络环境中，传输速率必然是没有用户鼠标双击按钮更快，在当前请求未到来之前，用户的习惯总爱再次点击按钮，这会导致浏览器重复发送请求，结果对于用户来说，占用更多带宽资源还好说，如果是网购付款按钮呢，另外对于服务器端来说，也会带来更大的运行压力。
一个典型的例子就是上大学的时候，到了选修课端口开放的时候，大家齐刷刷早起守着电脑，不停的刷新，结果平时很流畅的教务网站，到了选（抢）课的时候，变得异常卡顿，F5都磨烂了，也刷新不出来。其实这个时候服务器内心是崩溃的。
回到正题，阻止用户重复点击，一个简单的做法是，令用户的点击变得无效， 使用状态锁，请求未处理完成之前，拒绝再次请求，而请求到了并处理完之后，恢复到可请求状态。
具体的代码演示，在下文中，将会提到。
4. 实现加载更多的功能，后端在本地使用server-mock来模拟数据
本地模拟成功：
代码地址，注意！想要看到效果，需要把 index.html 和 router.js 分别保存在同一个文件夹下，然后终端里使用server mock 开启mock。
5. 对AJAX进行封装，这是必须的(以get为例)
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex = 0
var isDataArrive = true //设计个状态锁
btn.addEventListener('click', function(e){
e.preventDefault() //防止点击 a 链接页面跳到顶部 或者href里 javascript:void(0)
if(!isDataArrive){ // 1. 点击按钮后，一开始先判断，如果状态是false，数据还没到来，就直接忽略
return;
}
loadData(function(news){ //loadData(renderPage) // 执行loadData时，数据到了，执行callback，也就是传入的函数 renderPage
renderPage(news)
pageIndex += 5
isDataArrive = true
})
isDataArrive = false
})
function loadData(callback){
ajax({
type: 'get',
url: 'loadMore',
data: {
index: pageIndex,
length: 5
},
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) //相当于callback(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()
}
