AJAX实践

2017-03-12 本文已影响0人 clark124

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

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
作用：

更新数据而不需要刷新页面：它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
异步通信：它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
前后端负载平衡：可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
数据与呈现分离：利于分工，降低前后耦合。
缺点
浏览器历史记录的遗失：在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击

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

注意事项：
约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
如何mock数据：
1.自己模拟数据来进行MOCK；
2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
3.使用XAMPP等工具，编写PHP文件来进行测试。

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

1.初始化数据是已经响应成功 var isDataArrive = true
2.当刚刚发送请求时，立即将再次发送封锁，防止用户多次点击

            xhr.open(type,url ,true);
            xhr.send();
            isDataArrive = false

   btn.addEventListener("click",function(){
            if(!isDataArrive){
                return;
            }
            ...
   }

3.当服务器响应完成，返回数据后，立即设置 isDataArrive = true，这样用户再次点击就可以重新发送请求了

        var isDataArrive = true;//1
        btn.addEventListener("click",function(){
            if(!isDataArrive){
                return;
            } //3
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status ===200 || xhr.status ===304){
                        //do something
                    }else{
                        //do something
                    }
                    isDataArrive = true //4
                }
            };
            xhr.open(type,url ,true);
            xhr.send();
            isDataArrive = false; //2
        })

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

    function ajax(opts){
        opts.success = opts.success || function(){};
        opts.error = opts.error || function(){};
        opts.type = opts.type || 'get';
        opts.dataType = opts.dataType || 'json';
        opts.data = opts.data || {};
        var dataStr = '';
        for(var key in opts.data){
            dataStr += key+ '='+opts.data[key] + '&';
        }
        dataStr = dataStr.substr(0,dataStr.length-1);
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if(xhr.status === 200 || xhr.status ===304){
                    if(opts.dataType === 'text'){
                        opts.success(xhr.responseText)
                    }
                    if(opts.dataType === 'json'){
                        var json =JSON.parse(xhr.responseText);
                        opts.success(json)
                    }
                }else{
                    opts.error()
                }
            }
        };
        if(opts.type.toLowerCase() === 'get'){
            xhr.open(opts.type,opts.url+'?'+dataStr,true);
            xhr.send();
        }
        if(opts.type.toLowerCase() === 'post'){
            xhr.open(opts.type,opts.url,true);
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send(dataStr)
        }
    }

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>加载更多</title>
    <style>
        .container {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .container li {
            border: 1px solid #cccccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .container li:hover{
            background: green;
            color: #ffffff;
        }
        #btn{
            text-align: center;
            text-decoration: none;
            color: #e27272;
            border: 1px solid #e27272;
            border-radius: 3px;
            display: block;
            margin: 0 auto;
            width: 80px;
            height: 40px;
            line-height: 40px;
        }
        #btn img{
            width: 40px;
            height: 40px;
        }

    </style>
</head>
<body>
        <ul class="container">
            <li>内容1</li>
            <li>内容2</li>
        </ul>
    <a href="#" id="btn">加载更多</a>

    <script>
        var btn = document.getElementById("btn");
        var ct = document.querySelector(".container");
        var idx = 3;
        var isDataArr = true;
        btn.addEventListener("click",function(e){
            e.preventDefault();
            if(isDataArr===false){
                return;
            }
            btn.innerHTML = "![](loading.jpg)";
            ajax({
                url: "/loadMore",
                type: "get",
                data: {
                    index: idx,
                    length: 5
                },
                success: function(data){
                    var fragment  = document.createDocumentFragment();
                    for(var i = 0; i < data.length; i++){
                        var node = document.createElement("li");
                        node.innerText = data[i];
                        fragment.appendChild(node);
                    }
                    ct.appendChild(fragment);
                    btn.innerHTML = "加载更多";
                    idx += 5;
                },
                error: function(){
                    console.log("加载失败")
                }
            });
        });


        function ajax(opts){
            opts.success = opts.success || function(){};
            opts.error = opts.error || function(){};
            opts.type = opts.type || 'get';
            opts.dataType = opts.dataType || 'json';
            opts.data = opts.data || {};
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 ){
                    if(xhr.status === 200 || xhr.status ===304){
                        if(opts.dataType === 'text'){
                            opts.success(xhr.responseText)
                        }
                        if(opts.dataType === 'json'){
                            var json =JSON.parse(xhr.responseText);
                            opts.success(json)
                        }
                    }else{
                        opts.error()
                    }
                }
                isDataArr = true;
            };

            var dataStr = '';
            for(var key in opts.data){
                dataStr += key+ '='+opts.data[key] + '&';
            }
            dataStr = dataStr.substr(0,dataStr.length-1);
            if(opts.type.toLowerCase() === 'get'){
                xhr.open(opts.type,opts.url+'?'+dataStr,true);
                xhr.send();
            }
            if(opts.type.toLowerCase() === 'post'){
                xhr.open(opts.type,opts.url,true);
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(dataStr)
            }
            isDataArr = 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))
    }
    setTimeout(function(){
        res.send(data)
    },1000)
});