关于Ajax 异步通信的底层实现

不适用任何框架，纯粹适用xmlHttpRequest对象与服务器进行异步交互,其步骤都为：

1..获取页面端输入的数据（这个是在js中完成的，可以使用dom对象进行操

作 eg：document.getElementById("").value）

2.建立xmlHttpRequest对象，这是整个过程中最复杂的一步，由于浏览

器的版本不同，所有要有不同的实现，课参照如下：

if (window.XMLHttpRequest) {

// 针对FireFox，Mozillar，Opera，Safari，IE7，IE8

xmlhttp = new XMLHttpRequest();

// 针对某些特定版本的mozillar浏览器的BUG进行修正

if (xmlhttp.overrideMimeType) {

xmlhttp.overrideMimeType("text/xml");

}

} else if (window.ActiveXObject) {

// 针对IE6，IE5.5，IE5

// 两个可以用于创建XMLHTTPRequest对象的控件名称，保存在 一个js的数组中

// 排在前面的版本较新

var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];

for ( var i = 0; i < activexName.length; i++) {

try {

// 取出一个控件名进行创建，如果创建成功就终止循环

// 如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建

xmlhttp = new activexName[i];

break;

} catch (e) {

}

}

}

3.注册回调函数，注意在注册回调函数的时候回调函数的最好不要加括号。Eg：

xmlhttp.onreadystatechange = callback;

4.设置与服务器的连接信息，并发生数据可以使用open的方法，这里分为两种方式：

1.Get方式

Get方式在open函数要设置发送的方式，服务器的地址和要发送 的数据，以及交互的方式。在交互方式中有：true和false。True表示是异步的 方式，false表示是同步的方式。在发送时使用send方法，其参数为null；eg：

//3.注册回调函数

//在注册回调函数时，函数不要加括号

xmlhttp.onreadystatechange=callback;

//4.设置连接信息

//以get的方式-----第一个参数主要是发送的方式有GET和POST两种

//---------------第二个参数主要是写服务器的url地址以及要传送的数据

//---------------第三个参数主要是写采用异步还是同步的方式，true表示是异步

//-----主要服务器的路径

xmlhttp.open("GET","../AjaxServer?name="+userName,true);

//5.发送数据。开

始和服务器进行交互

xmlhttp.send(null);

2.Post方式

Post方式与get方式相同，首先要完成其连接信息，即open方法。在写 url时可以不选择在其后紧跟要发送的数据，因为可以在发送数据的send方法中选择发送数据；但是在发送数据前要自己手动设置连接头信息。（其实我们在使用form时其连接头的信息都已经为我们设置好了）。Eg：

//4.设置连接信息

//以post的方式-----第一个参数主要是发送的方式有GET和POST两种

//---------------第二个参数主要是写服务器的url地址以及要传送的数据

//---------------第三个参数主要是写采用异步还是同步的方式，true表示是异步

//-----主要服务器的路径

xmlhttp.open("POST","../AjaxServer","true");

//post方式需要自己设置请求头

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//5.发送数据。开始和服务器进行交互

xmlhttp.send("name="+userName);

5. 当数据回来后，将服务器端的数据显示在页面上。根据服务器端的返回的数据，可以分为两种情况来进行处理：

1.返回的是纯文本的信息

2.返回的是xml的数据

对于这两种情况，在进行操作的开始，都要xmlHttpRequest对象与 服务器端的交互情况，即：if(xmlhttp.readyState==4){

//判断http的交互是否完成

if(xmlhttp.status==200){

对于纯文本的信息可以直接使用xmlHttpRequest对象的responseText方法来直接得到其返回的文本信息 eg：var responseText=xmlhttp.responseText;，然后获得页面的节点，使用其innerHTML方法将数据显示在页面上。

对于xml数据，首先应该获得服务器端返回的数据，即对象。然后利用

getElementsByTagName("") 方法来获得所得对象中你想要的节点，它会返回一个数组（这些节点之间是可以进行嵌套的），对于节点中的内容也可以看做事节点的一个子节点，可以使用firstChild来获得其文本节点，然后使用nodeValue方法来获得文本内容；eg:



var domObj = xmlhttp.responseXML;

if (domObj) {

// dom中利用getElementByTagName来获得元素的节点，返回的是一个数组

var messageNodes = domObj.getElementsByTagName("message");

if (messageNodes.length > 0) {

// 获取message中的内容

// 在dom中message对于的内容，就是message节点对应得子节点，用firstChild可以获得第一个子节点

var textNode=messageNodes[0].firstChild;

//对于文本节点，

可以使用nodeValue来获得其内容

var responseText=textNode.nodeValue;

//将数据显示在页面上

var result=document.getElementById("result");

result.innerHTML=responseText;

}