XMLHttpRequest对象_详细介绍
原理:
通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。本质是js和服务器端交互。
创建:
相对于浏览器来说,分为俩种方式:
1.IE:
其中IE相对于不同的版本又分为3种方式:
(1).IE5.0: var xhr=new ActiveXObject("Microsoft.XMLHTTP");
(2).IE6.0: var xhr=new ActiveXObject("Msxml2.XMLHTTP");
(3).IE7.0以上: var xhr=new XMLHttpRequest(); //从7.0以上,向标准看齐
2.非IE:
var xhr=new XMLHttpRequest(); //IE7.0与此一样
eg:
function newXMLHttpRequest()
{
var xmlreq = false;
// Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttpRequest)
{
xmlreq = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
// Try to create XMLHttpRequest in later versions of Internet Explorer (ie6.0)
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e1)
{
// Failed to create required ActiveXObject
try
{
// Try version supported by older versions of Internet Explorer (ie5.0)
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
// Unable to create an XMLHttpRequest by any means
xmlreq = false;
}
}
}
return xmlreq;
}
【方法】:
XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求,下列将逐个展开详细讨论。
abort()
取消与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。
open()
初始化一个XMLHttpRequest对象.
open(String method,String url,boolean async,String username,String password)
method:是必须提供的,用于指定发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD).其中,POST:向服务器发送数据。GET:从服务器检索数据。
url:请求的url地址和传递的参数。
async:指定是否请求是异步的。true:异步,false:同步。默认值是true。
username,password:对于要求认证的服务器,你可以提供可选的用户名和口令参数。
在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。
send()
向服务器发送http请求。
send(content) content是可选的。可以显式地使用null参数,这与不用参数一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法先设置Content-Type头部。
setRequestHeader()
setRequestHeader(DOMString header,DOMString value)设置请求的头部信息。
这个方法只有当readyState为1时,才能调用,即调用open之后,send之前。
如果open使用POST,则必须调用setRequestHeader方法设置content-type,setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
去掉缓存:
xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
setRequestHeader('Cache-Control', 'no-cache');
getResponseHeader()
getResponseHeader(DOMString header)从响应信息中获取指定的http头信息。
getAllResponseHeaders()
以一个字符串形式返回所有的响应头信息。
【属性】:
readyState
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态,XMLHttpRequest对象有一个描述对象的当前状态的readyState属性。
0 描述一种"未初始化"状态;
1 描述一种"发送"状态;
2 描述一种""状态;
3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。
ReadyState取值 | 描述 | 备注 |
0 | 未初始化 | 此时,已经创建一个XMLHttpRequest对象,但是还没有初始化,尚未调用open方法。 |
1 | 初始化 | 此时,代码已经调用了open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器,尚未调用send方法。 |
2 | 发送 | 此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 |
3 | 正在接收 | 此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 |
4 | 完成加载 | 此时,响应已经被完全接收(数据接收完毕),此时可以通过通过responseXml和responseText获取完整的回应数据。 |
status
这个status属性描述了HTTP状态代码,而且其类型为short。比如常见的404(未找到)和200(已就绪)。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText
这个statusText属性描述了HTTP状态代码文本,是status的文本信息。
responseText
以字符串的形式返回服务器响应信息。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML
将响应信息格式化为XML Document对象返回;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
responseBody
将回应信息正文以unsigned byte 数组形式返回。
【事件】
onreadystatechange
无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。