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 来指定, 可以是 ArrayBuffer, Blob, Document, JSON, 或者是字符串。如果请求未完成或失败,则该值为 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,等等.

事件列表