ajax实践

一、 ajax 是什么？有什么作用？
AJAX全称是“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是一种创建快速动态网页的开发技术。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，即在不重新加载整个页面的时候，可以对网页的某部分进行更新。传统的网页（不使用AJAX）如需要更新内容，必须重载整个页面。
AJAX可以提高系统性能，优化用户界面。
优点;
1、页面无刷新，用户的体验较好；
2、使用异步方式与服务器通信，具有迅速的响应能力；
3、ajax的原则是按需取数据，可以最大限度的减少冗余请求和响应对服务器造成的负担；
4、基于xml标准化的并被广泛支持的技术，不需要下载插件或者小程序；
5、ajax可使应用程序更小、更快、更友好。
缺点;
1、ajax只是局部刷新，不支持浏览器back按钮；
2、安全问题 AJAX 暴露了与服务器交互的细节；
3、对搜索引擎的支持比较弱；
4、破坏了程序的异常机制。

** 二、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？**
前后端开发联通需要注意的事项：
接口:确定接口名称
接口的参数：服务器、端口、请求和响应的格式
接口传递内容：需要传输的数据，及数据类型、长度等的限制
根据这些约定整理成文档
mock数据
在node.js下安装sever-mock
打开终端执行npm install -g sever-mock
打开文件所在的文件夹 执行 cd 文件夹名
在当前文件夹下创建router.js文件
mock init 可创建范例文件
在当前文件夹下，在终端执行mock start ， 启动服务器

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

 var isDataArrive=true;//设置状态锁，初始为true
   var btn=document.querySelector('#load-more')
    btn.addEventListener('click',function  () {
     if(!isDataArrive){
        return;//当数据未返回时，直接跳出循环，不管用户点击多少次
    }
    //当数据返回时，执行以下内容
        var xhr=new XMLHttpResquest();
        xhr.onreadystatechange=function(){
        if (xhr.readyState===4) {
            //dosomething
            isDataArrive=true;
        };
        }
        xhr.open()
        xhr.send()
        isDataArrive=false//当用户获得数据后，在设置成false防止重复点击
    })

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

    function ajax(opts){
     var xmlhttp= new XMLHttpRequest();
     var dataStr='';
     for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&';
     }
     xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState===4) {
            if (opts.dataType==='tetx') {
                opts.success(xmlhttp.responseText);
            }
            if (opts.dataType==='json') {
                var json=Json.parse(xmlhttp.responseText);
                opts.success(json);
            }
        }else{
            opts.error();
        }
     }
    
     dataStr=dataStr.substr(0,dataStr.length-1);
     if (opts.type.toLowerCase()==='post') {
        xmlhttp.open(opts.type,opts.url,true);
        xmlhttp,setRequestHeader('content-type','application/x-ww-form-urlenconder')
        xmlhttp.send(dataStr);
     };
     if (opts.type.toLowerCase()==='get') {
        xmlhttp.open(opts.type,opts.url+'?'+dataStr,true)
        xmlhttp.send();
     };
      }
      var btn=document.querySelector('#btn');

     document.querySelector('#btn').addEventListener('click', function(){
      ajax({ url: '/login', 
             type: 'get', 
             data: { 
                   username: 'xiaoming',
                   password: 'abcd1234' }, 
     success: function(ret){ 
                            console.log(ret); 
                            }, 
     error: function(){ 
        console.log('出错了') 
     } 
    })
    });

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

    
    
    



    

        
内容1
        
内容2
    
    加载更多

后端代码

app.get('/loadMore', function(req, res) {
    var curIdx=req.query.index;
    var len =req.query.length;
    var data=[];
    for(var i=0;i

Paste_Image.png