ajax的技术核心,ajax技术的核心内容：XMLHttpRequest对象详解

XMLHttpRequest对象是Ajax技术最核心内容，所有现代浏览器均支持XMLHttpRequest对象，XMLHttpRequest用于在后台与服务器交换数据，这意味着可以再不重新加载整个网页的情况下，对网页的某部分进行更新。下面分析XMLHttpRequest对象的基本知识。

1、创建XMLHttpRequest对象

在不同的浏览器中创建XMLHttpRequest对象的方法不同，其中，IE创建XMLHttpRequest对象的方法如下所示：

//使用较新版本的IE创建IE兼容的对象(Msxml2.XMLHTTP) var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); //使用较老版本的IE创建IE兼容的对象(Microsoft.XMLHTTP) var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

而在Mozilla、Opera、Safari和大部分非IE浏览器中，都使用如下方法创建XMLHttpRequest对象。

var xmlhttp = new XMLHttpRequest();

创建XMLHttpRequest对象时，如果在不同的浏览器中使用了不正确的创建方法，则浏览器将会报错，并且无法使用该对象，由此可见，很需要一种可以兼容不同浏览器的创建XMLHttpRequest对象的方法。例如，下面就是一个通用的解决方法：

var xmlhttp = false;//使用false作为判断条件，表示还没有创建XMLHttpRequest对象。 function createXMLHttp(){ try{ //尝试创建XMLHttpRequest对象，除IE外的浏览器都支持这个方法 xmlhttp = new XMLHttpRequest(); } catch(e){ try{ //使用较新版本的IE创建IE兼容的对象(Msxml2.XMLHTTP) xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ //使用较老版本的IE创建IE兼容的对象(Microsoft.XMLHttp) xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(failed){ //如果失败则保证request的值仍然为false xmlhttp = false; } } } return xmlhttp; }

此时可以使用如下代码判断创建XMLHttpRequest对象是否成功。

if(!xmlhttp){ //创建XMLHttpRequest对象失败 }else{ //创建成功 }

创建XMLHttpRequest对象完毕后，开始详细分析此对象的方法、属性以及最重要的onreadystatechange事件句柄。

2、XMLHttpRequest对象的方法

XMLHttpRequest对象中的方法如下所示：

1)、open(method,url,async)：规定请求的类型、URL以及是否异步处理请求，参数的具体说明如下：

method ： 请求的类型，有get或post两种。

url  ：  文件在服务器上的位置。

async ：true(异步)或  false (同步)。

方法open() 中的参数url是服务器上文件的地址，例如下面代码：

xmlhttp.open("GET","ajax_test.jsp,true");

该文件可以使任何类型的文件，例如.xml和 .txt ，或者服务器脚本文件，例如 .asp和.jsp。

其实Ajax提及的异步是指javaScript和XML。XMLHttpRequest对象如果要用于Ajax，其方法open() 的async参数必须设置为true。

通过Ajax技术，JavaScript无需等待服务器响应，而是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

当使用参数async设置true时，Ajax规定在响应处于onreadystatechange事件中的就绪状态时执行的函数，例如下面的代码：

xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDIv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","text1.txt",true); xmlhttp.send();

当将参数async设置为false时，请不要编写函数onreadystatechange()，把代码放到函数send()语句的后面即可。

xmlhttp.open("GET","text1.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2)、取消当前响应，关闭连接并且结束任何未决的网络活动，其语法为：

abort()

3)、getAllResponseHeaders();把HTTP响应头部作为未解析的字符串返回，用于以字符串形式返回完整的HTTP头信息，其中，包括Server、Date、Content-Type和Content-Length。语法格式：

getAllResponseHeaders()

4)、setRequestHeader(header,value)：返回指定的HTTP、响应头部的值。

header：规定头的名称

value：规定头的值

5)、send(String)：发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体。此方法用于向服务器发送请求，如果请求声明为异步，该方法立即返回，否则将等到接收到响应为止。

参数String用于指定发送的数据，可以是DOM对象的实例，输入流或字符串，如果没有参数传递可以设置为null。

6)、setRequestHeader()：向一个打开但未发送的请求设置或添加一个HTTP请求，语法格式如下：

setRequestHeader("header"，“value”)

header：用于指定HTTP头

value：用于指定的HTTP头设置值

注意：setRequestHeader()方法必须在调用open()方法之后才能调用

7)、getRequestHeader()：用于字符串形式返回指定的HTTP头信息，语法格式如下：

getRequestHeader(“headerLabel”)

headerLabel用于指定HTTP头，包括Server、Content-Type和Date等。

3、XMLHttpRequest属性

XMLHttpRequest对象中的属性如下所示：

1)、readyState：HTTP请求的状态，属性值从0-4,具体说明如下：

0：请求为初始化

1：服务器连接以建立

2：请求以接收

3：请求处理中

4：请求以完成，且响应以就绪

2)、responseText：到目前为止服务器的接收到的响应体(不包括头部)

，如果还没有接收到数据，就是控制字符串。如果来自服务器的响应并非XML，建议使用responseText属性，因为responseText属性返回字符串形式的响应，所以可以用如下代码使用responseText属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText

3)、responseXML：对请求的响应，解析为XML并作为Document对象返回。如果来自服务器的响应是XML，而且需要作为XML对象进行解析，此时，需要使用responseXML属性。

4)、status：有服务器返回的HTTP状态代码。

5)、statusText：这个属性用名称而不是数字指定了请求的HTTP的状态代码。

4、XMLHttpRequest对象的时间句柄函数

当请求被发送到服务器时，需要执行一些基于响应的任务。事件onreadystatechange是每次readyState属性改变时调用的事件句柄函数。在属性readyState中保存了XMLHttpRequest的状态信息。

在onreadystatechange事件中规定，当服务器响应以做好被处理的准备时，所执行的任务。当readyState等于4或者200时，标示 响应已经就绪，代码如下：

xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

如果在网站上存在多个Ajax任务，那么应该为创建的XMLHttpRequest对象编写一个标准的函数，并为每个Ajax任务调用函数callback()，函数callback()应该调用包含URL以及发生onreadystatechange事件时执行的任务，例如代码如下：

function myFunction(){ loadXMlDoc("ajax_info.txt",function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200a){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } })； }

在指定所触发的事件处理器时，所调用的javaScript函数不能添加小括号及指定参数名，不过这里可以使用匿名函数，例如，要调用带参数的函数getResult()，可以使用下面的代码。

http_request.onreadystatechange=function(){ getResult("添加的参数"); //调用带参数的函数 } //通过匿名函数指定要带参数的函数

简单的学习笔记，希望博友提成宝贵的意见和建议，非常感谢！