AJAX

AJAX的历史：
传统的表单设计采用提交<form>的方式向web服务器请求，web服务器根据请求，返回给浏览器一个新的页面。这种做法浪费了大量的带宽，因为前后两个页面大部分的内容都是相同的，区别仅在于用户所输入的数据。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

AJAX（Asynchronous Javascript And XML），即异步的JS与XML，它仅向服务器发送并取回必要的数据。其最大的特点是在不更新整个页面的情况下，对少量的数据进行了交互，并呈现在用户面前。2005年，google搜索中利用AJAX来引导用户进行搜索，使AJAX技术大放异彩。举几个AJAX的应用场景：
1.搜索

尽管用户只输入了两个字，但是它通过AJAX与后台交互，猜测出用户可能想要搜索的词条。

2.验证

能够在不刷新页面的情况下，指出注册时出现的问题。

AJAX通常的写法：

    if (window.XMLHttpRequest){
        var request = new XMLHttpRequest();
    }
    else{
        var request = new ActiveXObject("Microsoft,XMLHTTP");
    }
    request.onreadystatechange = fucntion(){
        if( request.readyState == 4 && request.status == 200){
            // TO DO
        }
        if ( request.readyState == 4 && request.status == 404){
            console.log("error...");
        }
        else{
            console.log("正在连接...")
        }
    }
    var data = "";
    //////////////////////////get/////////////////////////////
    request.open("GET",url,true);
    request.send();
    /////////////////////////post////////////////////////////
    request.open("POST",url,true);
    request.setRequestHeader("Content-type","application/x-ww-form-urlencoded");
    xmlhttp.send(data);

• 几乎所有的现代浏览器都使用XMLHttpReques()对象来建立AJAX，如果你需要兼容IE6及其以下的话，就需要 使用ActiveXObject("Microsoft,XMLHTTP");
• 每当readyState改变时，就会触发onreadyStatechange事件，我们可以利用参数的变化来指定具体的操作。

• GET/POST。一般来说，GET适用于通过请求少量数据来获取大量数据的情况，POST适用于传递大量数据的情况。GET的提交信息会显示在URL中，在提交时，我们不仅要输入服务器端的URL，还要加上请求的内容，显而易见，这并不安全；相反,POST只要输入服务器端的URL即可。在send()中，由于GET已经将信息添加在URL中，故无需通过send()传递，而POST需要将大量的文本通过send(text)传递。

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

前后端开发联调时候需要注意一下事情：

• 在开发之前规定好接口文档并指明由谁来撰写和维护；
• 接口信息如果改动需要合适的方法向前后端传递改动信息；
• 规定使用的接口类型，JSON或者JSONP;
• 定义数据管理和归属权，是属于前端管理还是后端管理；
• 规定数据的交流方式，是前端直接把数据请求发送给后端，还是说有前端和后端之间有一个middle（中间层），前后端的数据都需要经过它来得到符合自己需求的数据类型；

后端接口完成前如何mock数据：

• 自己制作模拟数据，但这种方式工作量比较大，而且需要收集分类要求的数据，如果接口变更，之前的所有数据也需要及时更新。但这样的好处是能够快速的完成前端任务；
• 使用模拟数据生成器，http://mockjs.com/；

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

可以设置一个锁，当锁存在时，点击按钮不执行AJAX；当加载完成解锁后，再次点击才能执行AJAX。

var onload = false;                                                 //设置锁变量；
 document.querySelector(".btn").addEventListener("click",function () {
            if(onload){                                                 //如果有锁存在，则不执行AJAX；
                return;
            }
            onload = true;                                         //上锁
            ajax({
                url:"2.php",
                type:"get",
                data:{},
                success:function(ret){
                    // TO DO
                    onload = false;                               //解锁
                },
                error:function () {
                  console.log("error.....")
                }
            });
        });