XMLHttpRequest API语法、函数简介

XMLHttpRequest是Ajax的核心对象，通过此对象，Javascript可以以异步或同步的方式与服务器端通信。
一，IE和其他浏览器创建该对象的方法

[javascript] view plaincopyprint?

1. var xmlhttp = false;      
2. //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化，该对象都会调用onreadystatechange所指定的函数  
3. if (window.XMLHttpRequest) {    //Mozilla、Safari等浏览器  
4.     xmlhttp = new XMLHttpRequest();  
5. }   
6. else if (window.ActiveXObject) {    //IE浏览器  
7.     try {  
8.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
9.     } catch (e) {  
10.         try {  
11.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
12.        } catch (e) {}  
13.     }  
14. }  

二，open()
open()是用来初始化XHLHttpRequest连接的函数。

1，参数

参数说明methodGET或者是POST，代表所要使用的HTTP的方法url要访问的URLasyncFlagtrue代表异步操作，false代表同步通信，可以省略此参数user账号名称，可以省略此参数password密码，可以省略此参数

2，实例

[javascript] view plaincopyprint?

1. xmlhttp.open('get','chkname.php?name='+name,true);  

三，send()
send()是传送数据到服务器端的函数

1，参数

参数说明content所要传送的内容

2，示例

[javascript] view plaincopyprint?

1. xmlhttp.send('var1=value1&var2=value2');   
2. xmlhttp.send('');   

四，onreadystatechange
当指定XMLHttpRequest为异步传输时，发生任何状态的变化，该对象都会调用onreadystatechange所指定的Javascript函数。

[javascript] view plaincopyprint?

1. xmlhttp.onreadystatechange = function(){    
2. //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化，该对象都会调用onreadystatechange所指定的函数    
3.     if(xmlhttp.readyState == 4){  //XMLHttpRequest处理状态，4表示处理完毕    
4.         if(xmlhttp.status == 200){ //服务器响应的HTTP代码，200表示正常    
5.             var msg = xmlhttp.responseText;     //获取响应页的内容    
6.             if(msg == '1'){     //chkname.php页面查找数据库，数据库没有该用户返回1    
7.                 $('namediv').innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";    
8.                  cname2 = 'yes';    
9.             }else if(msg == '2'){   //数据库存在该用户返回0    
10.                 $('namediv').innerHTML="<font color=red>用户名被占用！</font>";    
11.                 cname2 = '';    
12.             }else{    
13.                 $('namediv').innerHTML="<font color=red>"+msg+"</font>";    
14.                 cname2 = '';    
15.             }    
16.         }    
17.     }    
18. }  

五，responseText
responseText所记录的是服务器所返回的所有文字内容
实例：

[javascript] view plaincopyprint?

1. var msg = xmlhttp.responseText;  

六，readyState
readyState是XMLHttpRequest处理的状态，通常会在onreadystatechange所指定的函数中去检查当前的处理状态，所有可能的值如下：

值说明0尚未开始1读取中2已下载完毕3信息交换中4处理完毕

实例：

[javascript] view plaincopyprint?

1. if(xmlhttp.readyState == 4){  //XMLHttpRequest处理状态，4表示处理完毕  
2.     ......  
3. }  

七，status

status是服务器所响应的HTTP代码。通常会在onreadystatechange所指定的函数中去检查服务器的返回代码，以便在处理数据前先确认服务器有正确的响应。几个重要的代码如下：

代码消息内容注释200OK正常400Bad Request错误的HTTP请求401Unauthorized未经过认证403Forbidden未经过允许的访问404Not Found未找到所请求的文件500Internal Server Error服务器错误

实例：

[javascript] view plaincopyprint?

1. if(xmlhttp.readyState == 4){  //XMLHttpRequest处理状态，4表示处理完毕    
2.     if(xmlhttp.status == 200){ //服务器响应的HTTP代码，200表示正常    
3.         var msg = xmlhttp.responseText;     //获取响应页的内容  
4.         ......  
5.     }  
6. }  

八，statusText
在statue里所记录的是HTTP的返回代码，但是在statusText中所记录的则是代码相对应的文字消息，代码如下：
代码消息内容200OK400Bad Request401Unauthorized403Forbidden404Not Found500Internal Server Error例如，若取得的status为404，statueText中就会是“Not Found”

九，abort()
abort()这个函数可以用来终止目前的连接。可以设置一个定时器，在向服务器发出请求后的一段时间终止连接，避免因为服务器处理过久而造成的问题。

[javascript] view plaincopyprint?

1. function onRcvData() {  
2. }  
3. function checkStatus() {  
4.     if(xmlhttp.readyState!=4){  
5.         xmlhttp.abort();  
6.         alert('连接超时被中断');  
7.     }  
8. }  
9. xmlhttp.onreadystatechange = onRcvData;  
10. xmlhttp.open('GET',url,true);  
11. setTimeout('checkStatus()',5000);  
12. xmlhttp.send('');  

十，getAllResponseHeaders()
getAllResponseHeaders()这个函数可以取得所有的服务器响应的HTTP头

[javascript] view plaincopyprint?

1. <span style="font-family:Microsoft YaHei;font-size:12px;">function onRecData() {  
2.     if(xmlhttp.readyState == 4) {  
3.         alert(xmlhttp.getAllResponseHeaders());  
4.     }  
5. }</span>  

十一，getResponseHeader()
getResponseHeader()取得指定栏位的名称。
参数
field 指定的HTTP头栏位名称，如“Content-Type”、“Server”或“Content-Length”等
实例

[javascript] view plaincopyprint?

1. function onRecData() {  
2.     if(xmlhttp.readyState ==4){  
3.         alert(xmlhttp.getResponseHeader('Content-Type'));  
4.     }  
5. }  

十二，setRequestHeader()
在某些情况下也需要自定义HTTP请求的栏位，可以用SetRequsetHeader()这个函数来实现。
参数
field 栏位名称
value 栏位内容
实例

[javascript] view plaincopyprint?

1. xmlhttp.open("GET",url,true);  
2. xmlhttp.setRequestHeader('If-Modified-Since','0');  

实际送出的HTTP请求如下：

[javascript] view plaincopyprint?

1. GET index.html HTTP/1.1  
2. Accept:*/*  
3. Accept-Language:zh-cn  
4. If-Modified-Since:0  
5. Accept-Engoding:gzip,deflate  
6. User-Agent:Mozilla/4.0(compatible;MSIE6.0;windows NT 5.1;SV1)  
7. Connection:Keep-Alive  

在实现Ajax时，有时候会发现，XMLHttpRequest的动作都已经完成，而且没有任何错误，但是所取得的总是旧的数据，这通常都是浏览器或者服务器缓存所造成的结果。有两个方法可以解决这个问题。
(1)修改CGI或Server Side Script，让返回的HTTP Header中带有“Cache-Control:no-cache”或“Pragma:no-cache”

[javascript] view plaincopyprint?

1. HTTP/1.0 200 OK  
2. Cache-control:no-cache  
3. Pragma:no-cache  
4. Content-Type:text/xml  

使用这两个HTTP Header会使浏览器不对这个网页保存任何缓存。
(2)使用XMLHttpRequest的setRequestHeader()函数
xmlhttp.setRequsetHeader('If-Modified-Since','0');
通常在“If-Modified-Since”栏位的后面是时间描述，如“Thu，16 Feb 2006,14:30:00 GMT”,如果服务器发现这个页面的更新时间是在此之前，服务器会返回“304 Not Modified”的响应。不过CGI或Server Side Script的文件变更时间有时候会较早，在这种情况下，前端的Ajax就无法得到正确的结果，解决方法就是将这个栏位设置为0，让服务器不要去做时间的判断。

十三，onload
onload与onreadystatechange类似，但不同的是，onload只有在整个网页被完整下载后才会被调用，也就是在状态是4的时候才会被调用。需要注意的是，IE并不支持onload这个属性。

[javascript] view plaincopyprint?

1. xmlhttp.open('GET',url,true);  
2. xmlhttp.onload = function() {  
3.     alert(xmlhttp.readyState + ':' + xmlhttp.responseText);  
4. };  
5. xmlhttp.send('');