XMLHttpRequest(上)

XMLHttpRequest 是一个 JavaScript 对象,通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。我们所熟知的AJAX就是使用XMLHTTPRequest的一种技术,使得无需重新加载整个网页的情况下,能够更新网页的一部分。
XMLHttpRequest最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化。虽然名字叫XMLHTTPRequest,但是并不局限于XML,而且除了HTTP ,它还支持file 和 ftp 协议。

创建XHR对象

var xhr = new XMLHttpRequest();

在老版本的 Internet Explorer (IE5 和 IE6)中并没有XMLHTTPRequest对象,要实现相同的功能需要使用 ActiveX 对象:

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

XHR对象的方法

open

初始化一个请求。

参数

xhr.open('post','/wms/inbound/r/update',true);

setRequestHeader

给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url.

参数

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

overrideMimeType

重写由服务器返回的MIME type。这个可用于, 例如,强制把一个响应流当作“text/xml”来处理和解析,即使服务器没有指明数据是这个类型。
注意,这个方法必须在send()之前被调用。

xhr.overrideMimeType('text/xml');

send

发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则进程会被阻塞直到请求的响应完成。

注意: 所有相关的事件绑定必须在调用send()方法之前进行.

abort

该方法将终止请求,如果该请求已被发出。当一个请求被终止,它的 readyState 属性将被置为0( UNSENT ),但是并不触发 readystatechange 事件。

var xhr = new XMLHttpRequest();
xhr.open('GET',"/path/to/get/list",true);

xhr.send();

xhr.abort();

getResponseHeader

返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null. 获取指定响应头的信息,如果多个响应头有同一个名字,则返回他们的值的合并之后的内容。

xhr.getResponseHeader("Content-Type") // 对大小写不敏感

getAllResponseHeaders

返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回null.

XHR对象的属性

readyState

请求的几种状态,只读属性

状态 描述
0 UNSENT (未打开) open()方法还未被调用
1 OPENED (未发送) send()方法还未被调用.
2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回.
3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据.
4 DONE (请求完成) 整个请求过程已经完毕.

timeout

设置超时时间,代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0,意味着没有超时。

onreadystatechange

当readyState属性改变时会调用该函数,一般会把异步的回调放到这里面

response

响应实体的类型由 responseType 来指定, 可以是 ArrayBufferBlobDocumentJSON, 或者是字符串。如果请求未完成或失败,则该值为 null。只读属性

responseText

此次请求的响应为文本,或是当请求未成功或还未发送时为 null。是一个只读的属性。只读属性。

responseType

设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。

请求响应值的类型
"" 默认的字符串类型
"arraybuffer" ArrayBuffer
"blob" Blob(文件)
"document" Document
"json" JSON
"text" 字符串

status

该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读属性。

statusText

该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读属性。

upload

可以在 upload 上添加一个事件监听来跟踪上传过程。

xhr.upload.onloaderstart/onprogress/onloadend等方法

withCredentials

是否使用cookie等认证信息进行跨域请求。一个布尔值。设置该值不影响同站点的请求。也可以表明是否忽略请求回复的cookie,默认是false,从不同的域回来的xhr不能设置当前域的cookie除非在发送请求之前把该值设置为true,

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null); // 在send函数之前设置withCredentials值

继承属性和方法

XMLHttpRequestEventTarget

XMLHttpRequestEventTarget是一个描述事件处理程序的接口,你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。

含有如下方法,包括

EventTarget

EventTarget是一个可以接受DOM事件且能绑定事件监听器的对象.最常见的EventTarget就是DOM元素对象,另外,还有一些不是DOM元素的对象也能成为EventTarget,比如document, window, XMLHttpRequest,等等.

事件列表