AJAX基础入门教程分享【千锋】

一、 XMLHttpRequest概述

XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XMLHttpRequest最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

现在的绝对多数浏览器都增加了对XMLHttpRequest的支持，IE中使用ActiveXObject方式创建XMLHttpRequest对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建XMLHttpRequest对象。

二、 XMLHttpRequest类

1、XMLHttpRequest成员属性

onreadystatechange	指定当readyState属性改变时的事件处理句柄,只写
readyState	返回当前请求的状态，只读.
responseText	将响应信息作为字符串返回.只读
responseXML	将响应信息格式化为XmlDocument对象并返回，只读
status	返回当前请求的http状态码.只读
statusText	返回当前请求的响应行状态，只读

2、XMLHttpRequest成员函数

abort	取消当前请求
getAllResponseHeaders	获取响应的所有http头
getResponseHeader	从响应信息中获取指定的http头
open	创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send	发送请求到http服务器并接收回应
setRequestHeader	单独指定请求的某个http头

3、XMLHttpRequest的readystate的状态

0(未初始化)	对象已建立，但是尚未初始化（尚未调用open方法）
1(初始化)	对象已建立，尚未调用send方法
2(发送数据)	send方法已调用，但是当前的状态及http头未知
3(数据传送中)	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4(完成)	数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

4、XMLHttpRequest接口声明

interfaceXMLHttpRequest{

//eventhandlerattributeEventListeneronreadystatechange;

//state

constunsignedshortUNSENT=0;

constunsignedshortOPENED=1;

constunsignedshortHEADERS_RECEIVED=2;

constunsignedshortLOADING=3;

constunsignedshortDONE=4;

readonlyattributeunsignedshortreadyState;

​

//request

voidopen(inDOMStringmethod,inDOMStringurl);

voidopen(inDOMStringmethod,inDOMStringurl,inbooleanasync);

voidopen(inDOMStringmethod,inDOMStringurl,inbooleanasync,inDOMStringuser);

voidopen(inDOMStringmethod,inDOMStringurl,inbooleanasync,inDOMStringuser,inDOMStringpassword);

voidsetRequestHeader(inDOMStringheader,inDOMStringvalue);

voidsend();

voidsend(inDOMStringdata);

voidsend(inDocumentdata);

voidabort();

​

//response

DOMStringgetAllResponseHeaders();

DOMStringgetResponseHeader(inDOMStringheader);

readonlyattributeDOMStringresponseText;

readonlyattributeDocumentresponseXML;

readonlyattributeunsignedshortstatus;

readonlyattributeDOMStringstatusText;

};

5、XMLHTTPRequest接口常用方法与属性说明

a)readyState属性

A.0(未初始化)

B.1(初始化)

C.2(发送数据)

D.3(数据传送中)

E.4(完成)

b)responseText属性

XMLHttpRequest尝试将响应信息解码为Unicode字符串，XMLHttpRequest默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-ordermark)，XMLHttpRequest可以解码任何UCS-2(bigorlittleendian)或者UCS-4数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。需要使用responseXML来处理。

c)responseXML属性

将响应信息格式化为XmlDocument对象并返回。如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。

d)open函数

A.语法

XMLHttpRequest.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);

B.参数

1.bstrMethod：http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

2.bstrUrl：请求的URL地址，可以为绝对地址也可以为相对地址。

3.varAsync[可选]：布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

4.bstrUser[可选]：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

5.bstrPassword[可选]：验证信息中的密码部分，如果用户名为空，则此值将被忽略。

​

e)send函数

A.语法

XMLHttpRequest.send(varBody);

B.参数

1.varBody：欲通过此请求发送的数据。

C.注意：

此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync==False，此方法将会等待请求完成或者超时时才会返回，如果bAsync==True，此方法将立即返回。

 

三、 XMLHTTPRequest使用例子

构造XMLHttpRequest对象

XMLHttpRequest对象的生成需要根据不同浏览器来决定。由于历史原因MS对JavaScript的支持停留在1.1的版本上。所以在IE中生成XMLHttpRequest对象采用的是ActiveX组件的方式。

JavaScript标准方式：

varoxmlhttp=newXMLHttpRequest();

MS的ActiveX方式：

varoxmlhttp=newActiveXObject(“MSXML2.XMLHTTP”);

其中ActiveX组件名称还有：Microsoft.XMLHTTP，MSXML2.XMLHTTP.3.0

打开连接

xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax");

xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax",false,"louis","young");

xmlhttp.open("post","http://127.0.0.1:9999/ajaxdemo/simple.ajax",false,"louis","young");

绑定事件

xmlhttp.onreadystatechange=ajaxevent;

xmlhttp.onreadystatechange=function(){};//绑定匿名方法

发送数据与服务器数据接受

xmlhttp.send(null);

xmlhttp.send("啊里粑粑!");

XMLHttpRequest对象的请求状态与相应得处理.

0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法）

1(初始化)对象已建立，尚未调用send方法

2(发送数据)send方法已调用，但是当前的状态及http头未知

3(数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4(完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

服务器的相应状态：

1××　保留

2××　　表示请求成功地接收

3××　　为完成请求客户需进一步细化请求

4××　　客户错误

5××　　服务器错误

客户数据接收
a)接受正常数据

//打开连接

xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax?key1=value1&key2=value2",false,"louis","young");

//绑定事件

xmlhttp.onreadystatechange=function(){

switch(xmlhttp.readyState)

{

case0:

data.innerHTML="对象已经建立!";

break;

case1:

data.innerHTML="准备send...";

break;

case2:

data.innerHTML="数据发送中...";

break;

case3:

data.innerHTML="数据传送中...";

break;

case4:

data.innerHTML="请求完毕!";

if(xmlhttp.status==200){

data.innerHTML=xmlhttp.responseText;

}

break;

default:

data.innerHTML="意外";

}

​

};

​

//发送请求与数据

xmlhttp.send("啊里粑粑!");

b)接受状态和利用header接收

case4:

​

data.innerHTML="请求完毕!";

​

if(xmlhttp.status==200){

vartxt=xmlhttp.responseText;

txt+=xmlhttp.getResponseHeader("mycode");

data.innerHTML=txt;

}

if(xmlhttp.status==501){

data.innerHTML="501错误";

}

break;

​

c)客户数据发送与服务器数据接收

publicStringreadDataFromAJAX(HttpServletRequestreq){

StringBufferdata=newStringBuffer();

Stringline=null;

try{

BufferedReaderbr=req.getReader();

while((line=br.readLine())!=null){

data.append(line);

}

}catch(Exceptione){

e.printStackTrace();

}

returndata.toString();

}

d)用户与口令接收

客户接受数据与服务器数据发送

客户接收数据有个麻烦：服务器过来的数据到底是文本还是XML？

case4:

data.innerHTML="请求完毕!";

if(xmlhttp.status==200){

vartxt=xmlhttp.responseXML;

data.innerHTML=txt;

}

if(xmlhttp.status==501){

data.innerHTML="501错误";

}

break;

default:

data.innerHTML="意外";

}