【AJAX】XMLHTTPRequest对象
程序员文章站
2022-07-12 18:54:08
...
在上一篇博客中,我们了解到了AJAX方式下的Web应用程序与传统方式下的Web应用程序有着一个最大的不同之处是:数据传输中不用刷新整个网页,给带来了一种不一样的用户体验。这种技术的核心就是利用的XMLHTTPRequest对象。
四.XMLHTTPRequest对象五步使用法
那么,这篇博客就一起来学习XMLHTTPRequest对象。
三.XMLHTTPRequest对象的方法
一.什么是XMLHTTPRequest。
中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:在不重新加载页面的情况下更新网页;在页面已加载后从服务器请求数据;在页面已加载后从服务器接收数据;在后台向服务器发送数据。
所有现代的浏览器都支持 XMLHttpRequest 对象。
二.XMLHTTPRequest对象的属性。
属性 | 描述 | 详细说明 |
readyState | HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。 |
0-Uninitialized-初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1-Open-open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2-Send-Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3-Receiving-所有响应头部都已经接收到。响应体开始接收但未完成。
4-Loaded-HTTP 响应已经完全接收。
|
responseText |
目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。 |
如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。 |
responseXML |
对请求的响应,解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null。 |
|
status |
由服务器返回的 HTTP 状态代码 |
如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。 |
statusText |
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。 |
当状态为 200 的时候它是 "OK",当状态为 404 的时候它是 "Not Found"。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。 |
方法 | 描述 | 详细说明 |
open(string method,string url,boolean asynch,
String username,string password)
|
初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。 |
Method:表示http请求方法,一般使用"GET","POST".
url:表示请求的服务器的地址;
asynch:表示是否采用异步方法,true为异步,false为同步;
后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。
|
send(content) |
发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。 |
content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。 |
setRequestHeader(String header,String Value) | 向一个打开但未发送的请求设置或添加一个 HTTP 请求。 |
此方法需在open方法以后调用,一般在post方式中使用。 |
getResponseHeader(String header)
|
返回指定的 HTTP 响应头部的值。
其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,不区分大小写。
该方法的返回值是指定的 HTTP 响应头部的值
|
如果没有接收到头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。 |
Abort() |
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。 |
把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。 |
getAllResponseHeaders()
|
把 HTTP 响应头部作为未解析的字符串返回。 |
如果 readyState 小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回,一行一个头部。每行用换行符 "" 隔开。 |
对于XMLHTTPRequest对象已有了一个理论认识,下面就介绍如何使用它的经典五步法。
第一步:创建XMLHTTPRequest对象
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(xmlhttprequest==undefined || xmlhttprequest==null){
alert("XMLHttpRequest对象创建失败!!");
}else{
this.xmlhttp=xmlhttprequest;
}
第二步:注册回调方法
//2.注册回调方法
xmlhttp.onreadystatechange=callback;
//错误的写法callback();
第三步:设置和服务器交互的相应参数
/*
//GET方式交互
//设置和服务器端交互的相应参数
xmlhttp.open("GET","AjaxServer?name="+userName,true);
*/
/*
//POST方式交互
//设置和服务器端交互的相应参数
xmlhttp.open("POST","AjaxServer",true);
//POST方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
*/
第四步: 设置向服务器端发送的数据,启动和服务器端的交互
//4.设置向服务器端发送的数据,启动和服务器端的交互
//GET方式
xmlhttp.send(null);
//POST方式
//4.设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.send("name="+userName);
第五步:判断和服务器端的交互是否完成,还要判断服务器端是否返回正确的数据
//根基实际条件写callback的功能代码
function callback(){
if(xmlhttp.readState==4){
//表示服务器的相应代码是200;正确返回了数据
if(xmlhttp.status==200){
//纯文本数据的接受方法
var message=xmlhttp.responseText;
//使用的前提是,服务器端需要设置content-type为text/xml
//var domXml=xmlhttp.responseXML;
//其它代码
}
}
}
五.学习总结
以上是对XMLHTTPRequest对象基础的总结,初次接触,没有什么很深刻的体会,而对于后面了解到的内容,使用它会有一些扩展性的问题,如:“缓存问题”、“中文问题”以及“跨域问题”,也觉得应该是后面在项目实践中都要考虑的方面。并且,在以后的开发中,为了更好的用户体验,也是一定会用到AJAX这一技术,而上面的五步法也就是用到它时必不可少的一块代码,期待以后见证它的使用时刻~
上一篇: ajax请求