ajax的实现原理--记最近一直被问的知识点

ajax底层的实现原理：
简单的流程是发送异步请求-监听服务器的响应-接收响应的数据-客户端处理响应的数据

1.实现ajax的核心是XMLHttpRequest对象，是浏览器用于后台与服务器交换数据的对象，实现部分页面刷新

首先了解这个对象：
XMLHttpRequest:


属性：

readyState:请求状态（0-4）：

                           0表示请求未初始化，尚未调用open()方法

                           1服务器连接已建立，已经调用open()方法，尚未调用send()方法

                           2请求已接收，已经调用send()方法，尚未接收到响应

   3请求处理中，已经接收到部分响应数据

                           4请求已完成，且响应已就绪，已经接收到全部的响应数据

                每次readyState的值改变，都会触发readyStateChange事件，因此调用该事件来监听响应是否就绪。

responseText:目前位置接收到的响应体，readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体
responseXML:服务器端响应，解析为xml并作为Document对象返回
status：服务器端返回的状态码，=200成功，=404表示NOT Found
status Text:用名称表示服务器端返回的状态，ok为200，not found为400

方法：
setRequestHeader():向一个打开但是未发生的请求设置头信息
open（）：初始化请求参数但是不发送
send（）：发送http请求
abort():取消当前响应
getAllResponseHeaders():把http相应头作为未解析的字符串返回
getResponseHeader():返回http响应头

事件句柄：
onreadystatechange:每次readyState改变时调用该事件句柄，但是当readyState=3可能调用多次


创建一个xhr对象


var xhr = new XMLHttpRequest();

在发送之前，需要初始化请求的参数，使用open()方法
open(method,url,async):规定请求类型、url以及是否异步处理请求
method：请求类型，get或post
url:文件在服务器上的位置
asyns：true(异步)或false（同步）

发送请求，使用send()方法：
send(string):将请求发送到服务器，string仅用于post请求

xhr.open('GET','test1.txt',true);
xhr.send();


这里涉及到get和post，是一个大知识点，需要进一步的区分和挖掘，这里简单说一下区别：

与post相比，get更简单更快，大部分情况都可以使用，在以下特殊情况需用post：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（post发送数据更大）
发送包含未知字符的用户输入时，post比get更稳定和可靠

以上已经建立起了一个异步请求，接下来的就是服务器接收请求并响应。
查看请求的状态根据readyState属性，每当它的状态值改变时，就会触发onreadystatechange事件，一共会被触发5（0-4）次
当状态值为4时，请求已经完成，并且响应就绪
其次需要监听服务器的状态status，200表示ok，404表示未找到页面，服务器的这个状态监听在readyState为1的时候就可以监听到
当readyState为4且status为200时，进入了处理响应返回的数据的环节
responseText:获得字符串形式的响应数据
responseXML:获得xml形式的响应数据

一下为完整的一个ajax请求的过程


创建对象阶段
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
//code for ie5 ie6
xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}

向服务器发送请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();


如果时post请求，则需要添加http头，然后在send里规定发送的数据
xmlhttp.open("post","demo_post.asp",true);
xmlhttp.setRequestHeader("Content-tyoe","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

处理响应
xmlhttp.onreadystatechange = function(){
//判断响应是否成功
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var result = null;
//获取响应头Content-type
var grc = xmlhttp.getResponseHeader("Content-type");
//根据content-type类型来判断如何进行解析
if(grc.indexOf('json')!=-1){
//转为js对象
result = JSON.parse(xm;http.responseText);
}else if(grc.indexOf("xml")!=-1){
result = xmlhttp.responseXML;
}else{
result = xmlhttp.responseText;
}
//拿到数据后，调用客户端传过来的回调函数
success(result);
}
}

在jquery框架中，封装了ajax的请求
$.ajax({
url:'',
type:'',
data:{},
success:function(data){
//code...
}