XMLHttpRequest是XMLHttp组件的对象,通过这个对象,Ajax可以像桌面应用程序一样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又回忆了响应速度,缩短了用户的等待时间。
XMLHttpRequest对象与Ajax
在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据。
需要注意的是JavaScript本身并不具有向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面,要么使用XMLHttpRequest对象发送请求,不同的是,前者是普通的即同步交互模式,而后者是异步交互模式。
XMLHttpRequest对象的属性和方法。
IE5.0开始,开发人员就可以在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能,而Mozilla1.0及NetScape7则是创建继承XML的代理类XMLHttpRequest;对于大多情况XMLHttpRequest和XMLHttp组件很相似,方法和属性类似,只是部份属性不同。以下代码演示了如果在IE以及NetScape等浏览器中创建XMLHttpRequest对象。
<
script
language
="javascript"
>
//定义一个变量
var http_request = false;
//IE浏览器中创建
http_request = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");//旧版本IE
//Netscope浏览器
http_request = new XMLHttpRequest();
</
script
>
需要注意的是 在微软最新的 IE7.0版本浏览器中也已经支持了XMLHttpRequest,也就是说在IE7.0中同时支持以及上二种创建方式。在我们开发AJAX应用程序时一定要注意要兼容浏览器类型。
创建方式可以如下:
var
http_request
=
false
;
function
createXMLHttpRequest()
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
http_request = false;
//开始初始化XMLHTTPRequest对象
if(window.XMLHttpRequest)//如果是window.XMLHttpRequest对象
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
//Mozilla,netscape 浏览器
http_request = new XMLHttpRequest();
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (http_request.overrideMimeType)
{//设置MiME类别
//有些版本的浏览器在处理服务器返回的未包含XML mime-type头部信息的内容时会报错,因此,要确保返回的内容包含text/xml信息。
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)//如果是window.ActiveXObject
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
//IE浏览器
try
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本
}
catch (e)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
try
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
http_request = new ActiveXObiect("Microsoft.XMLHTTP"); //ie旧版本
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
catch (e)
{}
}
}
if(!http_request)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
//异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例。");
return false;
}
}
这样就是一个简单的跨浏览器的创建方法。
另外XMLHttpRequest对象提供了一系列属性和方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。下面是对其的说明:
XMLHttpRequest 对象属性
onreadystatechange:指定当readyState属性改变时的事件处理句柄,属性只写。
XMLHttpRequest对象属性onreadystatechange是readyState状态改变的事件触发器,用来指定当readyState属性发生改变时的处理事件。在使用过程中,通常通过将事件处理函数名称赋予onreadystatechange的方式,来为XMLHttpRequest指定事件触发器,而在事件处理函数中判断readyState状态值并做相应的处理。
如上:http_request.onreadystatechange = processRequest;processRequest作为事件处理函数,并在processRequest函数体内在readyState状态为 4 时开始执行。
readyState:返回当前请求的状态,属性只读。
这些状态用长度为4的整形数据表示,其属性的状态含义如下:
0:未初始化(对象已经建立,但是未初始化,即尚未调用open方法创建http请求)
1:初始化(对象已经建立,但是未调用send方法发送http请求)
2:发送数据(send方法已经被调用,但是当前的状态以及http头未知)
3:数据传送中(已经接收部分数据,因为响应及http头不全,这时通过response系统方法获取部分数据会出现错误)
4:传送完成(数据完毕,此时可以通过response系统方法获取完整的回应数据)
responseBody:将回应信息正文以unsigned byte 数组形式返回,属性只读。
responseText:以字符串的形式返回服务器响应信息,属性只读。
responseXML:将响应信息格式化为XML Document对象返回,属性只读。
XMLHttpRequest对象的方法以及含义如下:
abort:取消当前请求;
语法:http_request.abort();调用此方法,当前请求返回uninitialized状态。
getAllResourceHeaders:获取相应的全部http头信息;像JSP中的HttpServletRequest对象一样,获取http请求的 请求头信息,语法:headers = http_request.getAllResourceHeaders();
getResourceHeader:从响应信息中获取指定的http头信息。
语法:head = http_request.getResourceHeader("header-name");
open:创建一个新的http请求,并指定此请求的方法,URL,以及验证信息(用户名/密码)。
语法:http_request.open(method,url,async,user,password);
async为布尔值,指定请求是否异步方式,默认为true;如果为真,当state状态改变时会调用 onreadystatechange属性指向的回调函数。如果服务器需要验证,则应该指定用户名和密码 。
send:发送请求到http服务器并接收回应。创建http请求后,就可以向服务器发送http请求,send方法被调用
语法:http_request.send(varBody);
参数varBody为要发送给服务器的内容。如果没有内容要发送,varBody参数可以省略,但最好写为null,因为如果省略不写在Firfox中会报错,所以就为http_request.send(null);。此方法的同步或异步方式取决于open方法中的async参数。
setRequestHeader:单独设定请求的某个头。
status:返回当前HTTP请求的状态码,属性只读。如:404=“文件未找到”,200=“成功”
statusText:返回当前HTTP请求的状态行,属性只读。
XMLHttpRequest对象与Ajax
在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据。
需要注意的是JavaScript本身并不具有向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面,要么使用XMLHttpRequest对象发送请求,不同的是,前者是普通的即同步交互模式,而后者是异步交互模式。
XMLHttpRequest对象的属性和方法。
IE5.0开始,开发人员就可以在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能,而Mozilla1.0及NetScape7则是创建继承XML的代理类XMLHttpRequest;对于大多情况XMLHttpRequest和XMLHttp组件很相似,方法和属性类似,只是部份属性不同。以下代码演示了如果在IE以及NetScape等浏览器中创建XMLHttpRequest对象。
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
创建方式可以如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
这样就是一个简单的跨浏览器的创建方法。
另外XMLHttpRequest对象提供了一系列属性和方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。下面是对其的说明:
XMLHttpRequest 对象属性
onreadystatechange:指定当readyState属性改变时的事件处理句柄,属性只写。
XMLHttpRequest对象属性onreadystatechange是readyState状态改变的事件触发器,用来指定当readyState属性发生改变时的处理事件。在使用过程中,通常通过将事件处理函数名称赋予onreadystatechange的方式,来为XMLHttpRequest指定事件触发器,而在事件处理函数中判断readyState状态值并做相应的处理。
如上:http_request.onreadystatechange = processRequest;processRequest作为事件处理函数,并在processRequest函数体内在readyState状态为 4 时开始执行。
readyState:返回当前请求的状态,属性只读。
这些状态用长度为4的整形数据表示,其属性的状态含义如下:
0:未初始化(对象已经建立,但是未初始化,即尚未调用open方法创建http请求)
1:初始化(对象已经建立,但是未调用send方法发送http请求)
2:发送数据(send方法已经被调用,但是当前的状态以及http头未知)
3:数据传送中(已经接收部分数据,因为响应及http头不全,这时通过response系统方法获取部分数据会出现错误)
4:传送完成(数据完毕,此时可以通过response系统方法获取完整的回应数据)
responseBody:将回应信息正文以unsigned byte 数组形式返回,属性只读。
responseText:以字符串的形式返回服务器响应信息,属性只读。
responseXML:将响应信息格式化为XML Document对象返回,属性只读。
XMLHttpRequest对象的方法以及含义如下:
abort:取消当前请求;
语法:http_request.abort();调用此方法,当前请求返回uninitialized状态。
getAllResourceHeaders:获取相应的全部http头信息;像JSP中的HttpServletRequest对象一样,获取http请求的 请求头信息,语法:headers = http_request.getAllResourceHeaders();
getResourceHeader:从响应信息中获取指定的http头信息。
语法:head = http_request.getResourceHeader("header-name");
open:创建一个新的http请求,并指定此请求的方法,URL,以及验证信息(用户名/密码)。
语法:http_request.open(method,url,async,user,password);
async为布尔值,指定请求是否异步方式,默认为true;如果为真,当state状态改变时会调用 onreadystatechange属性指向的回调函数。如果服务器需要验证,则应该指定用户名和密码 。
send:发送请求到http服务器并接收回应。创建http请求后,就可以向服务器发送http请求,send方法被调用
语法:http_request.send(varBody);
参数varBody为要发送给服务器的内容。如果没有内容要发送,varBody参数可以省略,但最好写为null,因为如果省略不写在Firfox中会报错,所以就为http_request.send(null);。此方法的同步或异步方式取决于open方法中的async参数。
setRequestHeader:单独设定请求的某个头。
status:返回当前HTTP请求的状态码,属性只读。如:404=“文件未找到”,200=“成功”
statusText:返回当前HTTP请求的状态行,属性只读。