XMLHttpRequest简易使用课程

2012-10-27

XMLHttpRequest简易使用教程????? XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可

XMLHttpRequest简易使用教程

????? XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。

XMLHttpRequest对象的常用属性：

????? onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；

??????readyState：返回当前请求的状态(只读)；

????? responseText：将相应信息作为字符串返回(只读)；

XMLHttpRequest对象的常用方法：

????? open()：创建一个新的HTTP请求，并制定此请求的方法，URL以及验证信息(用户名/密码)；

????? send()：发送请求到HTTP服务器并接受回应。

XMLHttpRequest对象的使用需要四个步骤：

(1) 初始化XMLHttpRequest对象

(2) 指定响应处理函数

(3) 发送HTTP请求

(4) 处理服务器返回的信息

一、初始化XMLHttpRequest对象

????? 在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对这个实例化过程的实现不同，所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

????? 针对微软IE浏览器：

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

????? 针对其他的浏览器：

var xmlHttp = new XMLHttpRequest();

????? 所以，综合了这两种实例化XMLHttpRequest的形式，就可以提取出一个实例化的公共方法，代码如下：

//实例化XMLHttpRequest对象function createXMLHttpRequest(){if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}

二、指定响应处理函数

????? 接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可，比如：

xmlHtt即可。
?
????? 3.2 send()方法详解?
//XMLHttpRequest对象的send()方法原型void send(content);
????? send()方法具体向服务器发送请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，知道接收到响应为止。参数content是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。
?
四、处理服务器返回的信息?
????? 在第二部中我们为XMLHttpRequest指定了响应处理函数，响应处理函数检查XMLHttpRequest对象的readyState属性值的变化，如果readyState值为4时，代表服务器已经传回所有信息，可以开始处理信息并更新页面内容了。
function callBack(){        if(xmlHttp.readyState==4){if(xmlHttp.status==200){        //do something with xmlHttp.responseText;        xmlHttp.responseText;}        }}
?
????? 4.1 readyState属性详解?
????? readyState属性用来表示请求的状态，有5个可取值，分别是：
????? “0”：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；
????? “1”：表示正在加载，此时对象已建立，尚未调用send()方法；
????? “2”：表示请求已发送，即send()方法已调用；
????? “3”：表示请求处理中；
??????“4”：表示请求已完成，即数据接收完毕。
?
????? 4.2 status、statusText属性详解????? 
??????status：返回当前请求的HTTP状态码(只读)；
????? statusText：返回当前请求的响应行状态(只读)。
?
????? 4.3 responseText、responseXML属性详解?
????? responseText属性表示服务器的文本响应，其处理结果以字符串形式返回。
????? responseXML属性表示服务器响应，其结果将格式化为XML Document对象。
?
????? 上述四个步骤，就是XMLHttpRequest对象在Ajax程序中的运行周期，即初始化、指定响应函数、发送请求、处理响应。
?
????? 下面是本示例的完整代码：
?
var xmlHttp;function AjaxFunction(){        createXMLHttpRequest();        if(xmlHttp!=null){xmlHttp.onreadystatechange = callBack;xmlHttp.open("get/Post","URL",true/false);xmlHttp.send(null);        }}//实例化XMLHttpRequest对象function createXMLHttpRequest(){        if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();        }else if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }}//指定响应函数function callBack(){        if(xmlHttp.readyState==4){                if(xmlHttp.status==200){        //do something with xmlHttp.responseText;        xmlHttp.responseText;                }        }}
????? （完） xusweeter @ 2010年08月25日 17：45

热点排行

XML SOAP

XMLHttpRequest简易使用课程