ajax

2017-10-09

ajax 是什么？有什么作用？

传统的HTTP请求

浏览器向服务器发送请求
服务器根据浏览器传来数据生成response
服务器把response返回给浏览器
浏览器刷新整个页面显示最新数据

这个过程是同步的，顺序执行。需要刷新整个网页，效率低，用户体验差

AJAX请求

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据。这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
约定数据：有哪些需要传输的数据，数据类型是什么；
根据这些数据整理成接口文档。

什么是mock数据

作为前端经常需要模拟后台数据，我们称之为mock。通常的方式为自己搭建一个服务器，返回我们想要的数据。

####如何mock数据
前端人员可以自己使用服务器框架搭建一个模拟服务器环境(如：express&nodejs，xampp或者server-mock)，在本地的平台上mock数据，事先进行调试。

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

设置一个状态锁,在触发ajax前是锁定的,之后若重复点击都不会触发ajax,直到代码执行完再解除锁定。


var isDataArrive = true; //设置状态锁初始值为true，表示数据到达。
btn.addEventListener('click', function(e) {
    e.preventDefault();
    if (!isDataArrive) {
        return;          //如果数据没有到达表示正在请求数据，则本次点击无效。
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == '4') {
            if (xhr.status === 200 || xhr.status === 304) {
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                var fragment = document.createDocumentFragment();
                for (var i = 0; i < result.length; i++) {
                    var node = document.createElement('li');
                    node.innerText = result[i];
                    fragment.appendChild(node);
                }
                ct.appendChild(fragment);
                pageIndex += 5;
            } else {
                console.log('出错了');
            }
            isDataArrive = true;   //若获取到数据，表示数据已经送达，将状态锁设置为true。
        }
    };
    xhr.open('get', '/loadMore?index=' + pageIndex + '&length=5', true);
    xhr.send();
    isDataArrive = false;   //发送数据之后，将状态锁设置为false

实现加载更多的功能，效果范例340，后端在本地使用server-mock来模拟数据

代码

效果图