ajax原理

实现Ajax只需要四个步骤：1、建立XML HttpRequest对象；2、发送HTTP请求；3、写回调函数；4、显示反馈信息。

最基础的就是“XML HttpRequest”对象，下面就来说一说XML HttpRequest。这个对象是Ajax最基础的对象之一，是内建到当前浏览器中的内部对象，它提供了客户端与服务器端数据传输的最基本的功能，它会对后台产生HTTP协议的请求，并且讲后台程序的返回结果以XML的方式返回给JavaScript脚本。

任何一个对象都要从它的属性和方法说起，下面简单介绍一下：

属性：

1、ReadyState：描述XML HttpRequest对象把一个HTTP请求发送到服务器时经历的各种状态

值：0 “未初始化” 已经创建XML HttpRequest对象但是还没有初始化；

1 “发送”已经调用了XML HttpRequest open()方法并且已经准备好把一个请求发送到服务器；

2 “发送”已经通过send()方法把一个请求发送到服务器端但是还没有受到一个响应；

3 “正在接收”已经接受HTTP响应的头部信息，但是消息体部分还没有完全接收结束；

4 “已加载” 此时响应已经完全被接收；

2、responseText属性

包含客户端接收到的HTTP响应的文本内容。当ReadyState属性值为0，1，2时，包含一个空字符串；当ReadyState为3时包含客户端还为完成的响应信息。为4 时包含完整的响应信息。

3、responseXML属性

此属性用于当接收到完整的HTTP响应时（ReadyState状态为4）描述XML的响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content- Type头部并不包含这些媒体类型之一，那么responseXML的值为null，而无论何时，只要readyState值不为4，那么 responseXML的值也为null。

4、 status属性描述HTTP代码状态，类型为short，仅当readyState的值为3或4时，这个属性才可用。当小于3时试图存取status的值将引发一个异常。

5、statusText属性

描述HTTP代码状态文本；仅当readyState的值为3或4时才可用。

方法：

abort()方法：

将XML HttpReequest对象恢复到初始化状态。

open() 方法：

打开一个连接以此准备发送请求，需要调用 open(DOMString method,DOMString url,boolean async,DOMString username,DOMString password)方法初始化一个XML HttpRequest对象。

其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法（GET,POST,PUT,DELETE,HEAD）。

url 参数用于指定XML HttpRequest对象把请求发送到的服务器的相应的URI。

async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数的值设置成false。对于要认证的服务器，可以提供可选的用户名和口令参数。如果调用open()方法并且此时readyState属性值为4，那么 XMLHttpRequest对象讲复位相应的属性值。

send() 方法：

在通过调用open()方法准备好一个请求之后，需要把该请求发送到服务器。仅当readyState属性值为1时，才可以调用send()方法；否则的话，XML HttpRequest对象将引发一个异常。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用 send(0方法之后，XML HttpRequest对象将readyStatus值设置成2（发送）。

当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XML HttpRequest对象将把readyState设置为3（正在接收）

当请求完成加载时，它把readyState属性设置成4（已加载）。对于一个HEAD类型的请求，它将在把readyState值设置成3后再设置成4。

setRequestHeader() 方法：

setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息当readyState值为1时，你可以调用open()方法后调用这个方法，否则你将得到一个异常。

getRequestHeader方法：

getRequestHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值为3或4时，才可以调用这个方法；否则该方法返回一个空字符串。

getAllResponseHeader()方法：

该方法以一个字符串形式返回所有的响应头部（每个头部占单独的一行）。如果readyState值不是3或4，则该方法返回null。

上面是理论性的内容，下面以简单的代码展示这一具体过程：

function InitAjax()//定义函数，初始化Ajax对象
{

var ajax=false;//声明变量用于建立ajax对象

try

{

ajax=new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

ajax=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器用ActiveXObject对象创建

}

catch(e)

{

ajax=false;

}

}

if(!ajax && typeof XML HttpRequest!='undefined')

{

ajax=new XMLHttpRequest();//非IE浏览器用XMLHttpRequest对象创建

}

return ajax;

}

//建立请求连接

var req=InitAjax();

req,open("GET",url,true);//url 可以为绝对或者是相对地址

req.onreadystatechange=sentback; //指定回调函数

req.send(null);//发送请求

//写回调函数

function sentback()//回调函数，对服务器的响应处理，监视response状态

{

if(req.readystate==4)//请求状态为4表示成功

{

if(req.status==200)//HTTP状态为200表示OK

{

DisplayInfo();//所有状态成功，执行此函数，显示数据

}

else

{

alert("服务器返回状态"+req.statusText);

}

}

else//请求状态没有成功页面等待

{

document.getElementById("myDiv").innerHTML="数据加载中";

}

}

function DiplayInfo()//接收服务器返回的数据对其进行显示

{

document.getElementById("myDiv").innerHTML=req.responseText;

}