XMLHttpRequest 是一个 JavaScript 对象,通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。我们所熟知的AJAX就是使用XMLHTTPRequest的一种技术,使得无需重新加载整个网页的情况下,能够更新网页的一部分。
XMLHttpRequest最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化。虽然名字叫XMLHTTPRequest,但是并不局限于XML,而且除了HTTP ,它还支持file 和 ftp 协议。
var xhr = new XMLHttpRequest();
在老版本的 Internet Explorer (IE5 和 IE6)中并没有XMLHTTPRequest对象,要实现相同的功能需要使用 ActiveX 对象:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
初始化一个请求。
xhr.open('post','/wms/inbound/r/update',true);
给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url.
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
重写由服务器返回的MIME type。这个可用于, 例如,强制把一个响应流当作“text/xml”来处理和解析,即使服务器没有指明数据是这个类型。
注意,这个方法必须在send()
之前被调用。
xhr.overrideMimeType('text/xml');
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则进程会被阻塞直到请求的响应完成。
注意: 所有相关的事件绑定必须在调用send()方法之前进行.
该方法将终止请求,如果该请求已被发出。当一个请求被终止,它的 readyState 属性将被置为0( UNSENT ),但是并不触发 readystatechange 事件。
var xhr = new XMLHttpRequest();
xhr.open('GET',"/path/to/get/list",true);
xhr.send();
xhr.abort();
返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null. 获取指定响应头的信息,如果多个响应头有同一个名字,则返回他们的值的合并之后的内容。
xhr.getResponseHeader("Content-Type") // 对大小写不敏感
返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回null.
请求的几种状态,只读属性
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT (未打开) | open()方法还未被调用 |
1 | OPENED (未发送) | send()方法还未被调用. |
2 | HEADERS_RECEIVED (已获取响应头) | send()方法已经被调用, 响应头和响应状态已经返回. |
3 | LOADING (正在下载响应体) | 响应体下载中; responseText中已经获取了部分数据. |
4 | DONE (请求完成) | 整个请求过程已经完毕. |
设置超时时间,代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0,意味着没有超时。
当readyState属性改变时会调用该函数,一般会把异步的回调放到这里面
响应实体的类型由 responseType
来指定, 可以是 ArrayBuffer
, Blob
, Document
, JSON
, 或者是字符串。如果请求未完成或失败,则该值为 null
。只读属性
此次请求的响应为文本,或是当请求未成功或还未发送时为 null。是一个只读的属性。只读属性。
设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。
值 | 请求响应值的类型 |
---|---|
"" | 默认的字符串类型 |
"arraybuffer" | ArrayBuffer |
"blob" | Blob(文件) |
"document" | Document |
"json" | JSON |
"text" | 字符串 |
该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读属性。
该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读属性。
可以在 upload 上添加一个事件监听来跟踪上传过程。
xhr.upload.onloaderstart/onprogress/onloadend等方法
是否使用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是一个描述事件处理程序的接口,你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。
含有如下方法,包括
onprogress: 间歇调用该方法用来获取请求过程中的信息。
XMLHttpRequest.onprogress = function (event) {
event.loaded; //已经接受的内容
event.size; // 总的请求内容大小
};
ontimeout: 当时间超时时调用;只有通过设置XMLHttpRequest对象的timeout属性来发生超时时,这种情况才会发生。
onloadend: 当内容加载完成,不管失败与否,都会调用该方法
EventTarget是一个可以接受DOM事件且能绑定事件监听器的对象.最常见的EventTarget就是DOM元素对象,另外,还有一些不是DOM元素的对象也能成为EventTarget,比如document, window, XMLHttpRequest,等等.