以前看过ajax的实现原理，果然没过多久就忘了，都忘了自己看过。今天重新学习一遍，并且记录下来，希望给自己留下更深刻的印象。而且不往底层说的话，其实实现原理也蛮简单的，记下一些重要的部分，大概知道原理就够了，毕竟平时更多的也只是应用。
简介
Ajax：Asynchronous javascript and xml，主要是为了客户端与服务器的异步数据交互，当然也是可以同步的。其原理或者说过程就是利用XMLHttpRequest对象发送请求，通过JavaScript将返回的结果显示到页面上。
XMLHttpRequest
所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
创建XMLHttpRequest的代码如下：
var xmlHttp;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("MIcrosoft.XMLHTTP");
}
}
XMLHttpRequest对象属性
- readyState ：对象状态值（0：未初始化；1：初始化；2：发送数据；3：接受数据；4：完成）
- onreadystatechange ：状态改变触发事件
- status ：从服务器返回的http状态码，如404，200
- statusText ：http状态码文本，如OK，Not Found
- responseText ：服务器返回的字符串
- responseXML ：服务器返回的DOM兼容文档数据对象
异步通信
XMLHttpRequest对象通过open()和send()两个方法发送请求。open()包括method、url和async三个参数：method表示请求方式，如POST和GET；url表示请求地址；async表示同步（false）或异步（true）。send()接受一个String入参，仅用于POST，其它方式传入null。
//get
xmlHttp.open("get", url, true);
xmlHttp.send();
//post
xmlHttp.open("post", url, true);
xmlHttp.send("param=date");
发送请求之后，readyState发生改变就会触发onreadystatechange事件。根据相应的状态，JavaScript可以对页面的DOM元素进行相应的操作。
//回调函数
function callback(){
//状态判断及相应操作
}
xmlHttp.open("post", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send();
个人总结
ajax的基本原理就是利用浏览器支持XMLHttpRequest对象去发送请求，然后根据状态和返回结果使用JavaScript去改变DOM元素。知道open、send方法，同时记住readyState的状态就基本理解了ajax的基本实现原理。