JS使用XMLHttpRequest对象与服务器进行数据交互

 2015年05月11日    1858     声明


JavaScirpt中的XMLHttpRequest对象用于与服务器进行数据交互,可用来发送或者接受服务器数据。所有现代的浏览器都支持XMLHttpRequest 对象。XMLHttpRequest对象用途广泛,其用途包括:在不重新加载页面的情况下更新网页、在页面已加载后从服务器请求数据、在页面已加载后从服务器接收数据、向后台服务器发送数据等。


创建XMLHttpRequest对象

目前主流浏览器支持XMLHttpRequest对象,唯一的浏览器依赖性涉及XMLHttpRequest对象的创建。所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)都内建了XMLHttpRequest对象,在IE 5和IE 6 中可以使用IEActiveXObject()的构造函数。因此,创建XMLHttpRequest对象可以采用如下方法:

var xhr = null;
if (window.XMLHttpRequest)
{
        //主流浏览器创建对象
	xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    //IE5、6创建对象
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}


XMLHttpRequest对象属性

readyState

HTTP 请求的状态。当用XMLHttpRequest对象发起HTTP请求时,readyState会从0(初始化)递增到4(接收完成)。 readyState只会递增,不会减少,除非当一个请求在处理过程中的时候调用了abort()或open()方法。每次这个属性的值增加的时候,都会触发 onreadystatechange事件监听。5种状态说明如下:

状态 名称 说明
0 Uninitialized 初始化。XMLHttpRequest对象已创建或已被abort()方法重置
1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送
2 Sent send()方法已调用,HTTP请求已发送到Web服务器。但还未接收到响应
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成
4 Loaded HTTP响应已经完全接收


responseText

接收到的服务器的响应结果(不包括HTTP头信息)。当readyState小于3时,此属性是一个空字符串。当readyState为3时,这个属性为已经接收的部分响应内容。当readyState为4时,这个属性为完整的响应结果。


responseXML

与responseText类似,接收到的服务器的响应结果,但解析为XML并作为Document对象返回,可以使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。


status

服务器返回的 HTTP状态代码,例如:200响应正常、404表示页面未找到。当 readyState 小于 3时,此属不存在,读取这一属性会抛出一个异常。


statusText

服务器返回的 HTTP状态名,即:状态码对应的名称。例如:当状态为200 的时候其值为"OK",当状态为404的时候其值是"Not Found"。和 status属性一样,当 readyState 小于 3时,此属不存在,读取这一属性会抛出一个异常。


XMLHttpRequest对象事件监听

onreadystatechange

每次readyState属性改变的时,调用的监听事件。当 readyState 为3(所有响应头部都已经接收到。响应体开始接收但未完成)时,此监听可能会被调用多次。


XMLHttpRequest对象方法

abort()

重置当前请求的响应,关闭连接并且结束任何未完成的网络活动。
说明:此方法会把把 XMLHttpRequest 对象readyState属性值,重置为 0(初始化状态),并且取消所有完成的网络活动。如果请求用的时间较长,而且响应不再必要的时候,可以调用这个方法。


getAllResponseHeaders()

把 HTTP 响应头作为未解析的字符串返回。
说明:如果 readyState 小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应头。响应头部作为单个的字符串返回,一行一个头部。每行用换行符 "\r\n" 隔开。


getResponseHeader()

返回指定的 HTTP 响应头的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的。
说明:如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。


open(method, url, async, username, password)

初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
参数说明
method:参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
url:参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
async:参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
username和password:这两个参数是可选的,为 url 所需的授权提供认证资格。

调用说明
open()方法用于初始化请求参数,初始化的参数将在其后调用的send()方法中使用。
此方法会把readyState设置为1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。
当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后)以及当 readyState 为 4 时(已经接收响应时),调用这个方法是安全的。
除了为send()方法准备请求参数和重置XMLHttpRequest对象以便复用,open()法没有其他行为。
需要特别注意的是,当这个方法调用的时候,是不会打开一个到 Web 服务器的网络连接的。


send(body)

发送HTTP请求。使用传递给 open() 方法的参数,向web服务器发送HTTP请求。
说明:
如果通过open()指定的 HTTP 方法是 POST或 PUT,body 参数指定了请求体,请求体为一个字符串或者 Document 对象。如果没有请求体的,这个参数就为 null。
这个方法会发送一个HTTP 请求。如果之前没有调用 open(),即:readyState不是 1,send() 抛出一个异常。
HTTP请求由以下几部分组成:
调用open()方法指定的HTTP 方法、URL 以及认证资格(如果有的话)。
调用setRequestHeader()方法时设定的HTTP请求头信息如果有的话)。
传递给这个方法的 body 参数。

HTTP请求过程
HTTP请求发送后,send()会把readyState 设置为2,并触发 onreadystatechange 事件临听。
如果通过open()方法设置async参数为false,这个方法会阻塞并不会返回,直到readyState为 4 并且服务器的响应被完全接收才会相应。如果为 true或者省略此参数时,send() 立即返回,服务器响应会在一个后台线程中处理。
如果服务器响应带有HTTP重定向,send()方法或后台线程自动进行重定向。
当所有的 HTTP 响应头部已经接收,send()或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件监听。如果响应较长,send() 或后台线程可能会多次在状态 3 中触发 onreadystatechange 事件监听(此特性可以作为一个下载进度指示器)。
最后,当响应完成,send() 或后台线程把 readyState 设置为 4,并最后一次触发事件监听。


setRequestHeader(name, value)

向一个打开但未发送的请求设置或添加一个 HTTP 请求。
参数说明
name:要设置的HTTP请求头的名称(此参数不能为空白、冒号或换行)。
value:要设置HTTP请求头的值(此参数不能为换行)。

说明
setRequestHeader()方法用于设置HTTP请求的头信息,此方法的设置会被添加到send()方法创建的请求中。
这个方法只有当 readyState 为 1 的时候才能调用。即:在调用了 open() 之后,且在调用 send() 之前调用。
如果指定HTTP头信息已经指定了,这个头信息对应的新值就是:之前指定的值,加上逗号、空白以及这个新指定的值。
setRequestHeader()方法可以用来设置HTTP请求头包括:Authorization、cookie、User-Agent等。
有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置,以符合 HTTP 协议。XMLHttpRequest自动设置的请求头有:Host、Connection、Keep-Alive、Accept-charset、Accept-Encoding、If-Modified-Since、If-None-Match、If-Range、Range


使用示例

使用XMLHttpRequest对象访问IT笔录网站的首页:http://itbilu.com,将请求结果显示到id为resp的div标签中。JS代码如下

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://itbilu.com", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
  	//显示请求结果
    document.getElementById("resp").innerHTML = xhr.responseText;
    console.log(xhr.responseXML);
  }
}
xhr.send();


特别说明: XmlHttpRequest不支持跨域访问,这是由网景公司(netscape)在开发浏览器时定义的同源策略导致的。