XMLHttpRequest对象属性和方法
时间：2011-04-30 来源：乱舞春秋
XMLHttpRequest 对象用于在后台与服务器交换数据。
小例子
小例子
1 //初始化XMLHttpRequest对象
2 var xhr=null;
3 var textName=null;
4 var infoTag=null;
5 //创建XmlHttpRequest对象并返回
6 function CreateXMLHttpRequest(){
7 var xmlHttp;
8 if(window.XMLHttpRequest){
9 xmlHttp=new XMLHttpRequest();
10 }
11 else if(window.ActiveXObject){
12 xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
13 }
14 return xmlHttp;
15 }
16 //异步检查用户名是否存在
17 function Check(){
18 textName=document.getElementById('user');
19 infoTag=document.getElementById('info');
20 var sendData='userName='+textName.value;
21 if(textName.value!=""){
22 xhr=CreateXMLHttpRequest();
23 xhr.onreadystatechange=CallBack_ShowData;
24 xhr.open('Post','Server_php/ServerCheck.php',true);
25 //post方式需要下面两句设置Header
26 xhr.setRequestHeader("content-length",sendData.length);
27 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
28 //要POST的数据
29 xhr.send(sendData);
30 }
31 else{
32 infoTag.innerHTML='请输入用户名';
33 }
34 }
35 function CallBack_ShowData(){
36 if(xhr.readyState == 4){
37 if(xhr.status==200){
38 var data=xhr.responseText;
39 //如果用户名存在则清空user，并使其获得焦点
40 if(data.split('|')[1]=='Error'){
41 textName.value='';
42 textName.focus();
43 }
44 //不存在则让下一输入框获得焦点
45 else{
46 infoTag.focus();
47 }
48 //显示异步传输过来的数据
49 infoTag.innerHTML=data.split('|')[0];
50 }
51 }
52 }
| 方法 | 属性 |
| open() | onreadystatechange |
| setRequestHeader() | status |
| send() | readyState |
| getResponseHeader() | statusText |
| getAllResponseHeaders() | responseText responseXML responseBody responseStream |
| 0 | 未初始化 | 还没有调用send()方法 |
| 1 | 载入 | 已调用send()方法，正在发送请求 |
| 2 | 载入完成 | send()方法执行完成，已经接收到全部响应内容 |
| 3 | 交互 | 正在解析响应内容 |
| 4 | 完成 | 响应内容解析完成，可以在客户端调用了 |
| responseText | 将响应信息作为字符串返回;XMLHTTP默认将响应数据的编码定为UTF-8; |
| responseXML | 将响应信息格式化为Xml Document对象并返回;如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息 |
| responseBody | 以unsigned array格式表示直接从服务器返回的未经解码的二进制数据 |
| responseStream | 以Ado Stream对象的形式返回响应信息 |
相关阅读 更多 +
