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来模拟数据

封装过功能的代码：

 <!DOCTYPE>
 <html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .container>div{
                margin: 10px 10px;
                padding: 10px 10px;
                border: 1px solid #ccc;
            }
            .btn{
                display: block;
                text-decoration: none;
                color: #E27272;
                width: 100px;
                margin: 10px auto;
                text-align: center;
                border: 1px solid #E27272;
                padding: 15px 10px;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
        <a href="javascript:void(0)" class="btn" id="load-more">加载更多↓</a><!--javascript:void(0)点击链接不会跳转至顶部-->
    </body>

    <script>
        var btn = document.querySelector("#load-more");
        var container = document.querySelector(".container");
        var pageIndex = 4;//记录发送的下标
        var isDataArrive = true; //初始化状态锁，解决用户重复点击按钮

        btn.addEventListener("click",function(e){
            e.preventDefault(); //与javascript:void(0)作用相同，取消a链接的跳转
            if (isDataArrive) {
                return; //如果正在请求数据，那这次点击什么都不做
            }
            loadData(function(news){  //加载数据
                renderPage(news)   //把函数作为参数callback传递
                pageIndex = pageIndex + 4;
                isDataArrive = true;
            })
            isDataArrive = false;
        });

        function loadData(callback){  //封装请求数据功能
       //   ajax("get",url,data,isSuccess,isError)
            //或写成JSON格式
            ajax({
                type: "get",
                url: "/loadMore",
                data: {
                    index: pageIndex,
                    length: 4
                },
                isSuccess: callback,
                isError: function(){
                    console.log("error")
                }
            })  //要传递的参数
        }

        function renderPage(news){ //封装渲染功能
            var fragment = document.createDocumentFragment(); //创建DOM片段，添加数据
            for (var i = 0; i < news.length; i++) {
                var node = document.createElement("div");
                node.innerText = news[i];// 用innerHTML有安全隐患
                fragment.appendChild(node);
            }
            container.appendChild(fragment);
        }

        function ajax(options){   //封装ajax功能
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 &&(xhr.status ===200 || xhr.status ===304)) {
                    var result = JSON.parse(xhr.responseText);
                    options.isSuccess(result);
                }
            }
            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) //拼成"/loadMore?index="+pageIndex+"&length=5"
            xhr.send();
        }

    </script>
 </html>

后端代码：

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);
});

未封装过的代码：

<script>
    var btn = document.querySelector("#load-more");
    var container = document.querySelector(".container");
    var pageIndex = 4;
    btn.addEventListener("click",function(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 &&(xhr.status ===200 || xhr.status == 304)){
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                var fragment = document.createDocumentFragment(); //创建DOM片段，添加数据
                for (var i = 0; i < result.length; i++) {
                    var node = document.createElement("div");
                    node.innerText = result[i];//innerHTML有安全隐患
                    fragment.appendChild(node);
                }
                container.appendChild(fragment);
                pageIndex = pageIndex + 4;
            }
        }
        xhr.open("get","/loadMore?index="+pageIndex+"&length=4",true)
        xhr.send()
    })
</script>