ajax实践

1. ajax 是什么？有什么作用？

AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS、HTML、Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

readyState的五种状态

UNSENT
XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
OPENED
open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader()方法来设置请求的头部，可以调用send()方法来发起请求。
HEADERS_RECEIVED
send() 方法已经被调用，响应头也已经被接收。
LOADING
响应体部分正在被接收。如果responseType
属性是“text”或空字符串，responseText
将会在载入的过程中拥有部分响应数据。
DONE
请求操作已经完成。这意味着数据传输已经彻底完成或失败。

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

1.约定数据：约定好页面需要的数据和数据类型
2.约定接口：约定接口的名称、请求的参数、相应的格式（成功或失败分别返回什么）
3.将约定好的内容整理成接口文档和规范
如何 mock 数据：
1.使用假数据来验证我们制作的页面响应和接口是否正常。
2.可以使用server-mock搭建模拟服务器，进行模拟测试。

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

var isDataArrive = true; //初始化状态锁，解决用户重复点击按钮
btn.addEventListener("click",function(e){ //给链接点击绑定事件
    if (isDataArrive) {
        return; //第二次点击时，如果第一次点击获取的数据未到，isDataArrive为true，点击无效。
    }
    isDataArrive = true;
    ajax({
         ....
         isDataArrive = false; //获取数据之后isDataArrive为false，解锁
    })
});

4. 封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 &&(xhr.status === 200 || xhr.status === 304)) {
            var result = JSON.parse(xhr.responseText);
            opts.success(result);
        }else{
            opts.error();
        }
    };
    var dataString = "?";
    for (key in opts.data) {
        dataString += key + "=" + opts.data[key] + "&";
    }
    dataString = dataString.substr(0,dataString.length-1); //去掉末尾
    xhr.open(opts.type,opts.url + dataString,true);
    xhr.send();
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});

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

封装过功能的代码：

后端代码：

app.get("/loadMore", function(req,res){
    var currentIndex = req.query.index;
    var length = req.query.length;
    var data = [];
    for (var i = 0; i < length; i++) {
        data.push("内容" + (parseInt(currentIndex) + i))
    }
    res.send(data);
});

未封装过的代码：