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