XMLHttpRequest

XMLHttpRequest

使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。

onreadystatechange 事件

只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

• 属性

XMLHttpRequest.onreadystatechange
当readyState属性发生变化时调用的EventHandler。

XMLHttpRequest.readyState 只读
返回 一个unsigned short 即无符号短整型，请求的状态码。

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

XMLHttpRequest.response 只读
返回ArrayBuffer、Blob、Document、DOMString，具体是哪种类型取决于XMLHttpRequest.responseType的值。其中包含响应体body。

XMLHttpRequest.responseText 只读
返回一个DOMString，该DOMString包含对请求的响应，如果请求未成功或尚未发送，则返回null。

XMLHttpRequest.responseType
定义响应类型的枚举值。

值	描述
“”	将 responseType 设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。
“arraybuffer”	response 是一个包含二进制数据的 JavaScript ArrayBuffer 。
“blob”	response 是一个包含二进制数据的 Blob 对象 。
“document”	response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。请参阅 HTML in XMLHttpRequest 以了解使用 XHR 获取 HTML 内容的更多信息。
“json”	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
“text”	response 是包含在 DOMString 对象中的文本。
“moz-chunked-arraybuffer”	与"arraybuffer"相似，但是数据会被接收到一个流中。使用此响应类型时，响应中的值仅在 progress 事件的处理程序中可用，并且只包含上一次响应 progress 事件以后收到的数据，而不是自请求发送以来收到的所有数据。在 progress 事件处理时访问 response 将返回到目前为止收到的数据。在 progress 事件处理程序之外访问， response 的值会始终为 null 。
“ms-stream”	response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受Internet Explorer支持。

XMLHttpRequest.responseURL 只读
返回响应的序列化URL，如果URL为空，则返回空字符串。

XMLHttpRequest.responseXML 只读
返回一个Document，其中包含该请求的响应，如果请求未成功、尚未发送或不能解析为XML或HTML，则返回null。

XMLHttpRequest.status 只读
返回 unsigned short 即无符号短整型请求响应状态。

XMLHttpRequest.statusText 只读
返回一个DOMString}，其中包含HTTP服务器返回的响应状态。与 XMLHTTPRequest.status不同的是，它包括响应状态的整个文本(例如，“200 OK”)。

XMLHttpRequest.timeout
unsigned long 即无符号长整型，表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。

XMLHttpRequestEventTarget.ontimeout
当请求超时调用的EventHandler。

XMLHttpRequest.upload 只读
XMLHttpRequestUpload，表示上传过程。
可以被绑定在upload对象上的事件监听器如下：

事件	相应属性的信息类型
onloadstart	获取开始
onprogress	数据传输进行中
onabort	获取操作终止
onerror	获取失败
onload	获取成功
ontimeout	获取操作在用户规定的时间内未完成
onloadend	获取完成（不论成功与否）

XMLHttpRequest.withCredentials
Boolean，用来指定跨域的请求是否应该使用证书（如cookie或授权header头）。

XMLHttpRequest.channel 只读
nsIChannel，对象在执行请求时使用的通道。

XMLHttpRequest.mozAnon 只读
一个布尔值，如果为真，请求将在没有cookie和身份验证header头的情况下发送。

XMLHttpRequest.mozSystem 只读
一个布尔值，如果为真，则在请求时不会强制执行同源策略。

XMLHttpRequest.mozBackgroundRequest
一个布尔值，它指示对象是否是后台服务器端的请求

• 方法

XMLHttpRequest.abort()
如果请求已经被发送,则立刻中止请求.

XMLHttpRequest.getAllResponseHeaders()
以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到响应，则返回null。

XMLHttpRequest.getResponseHeader(header)
返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。

XMLHttpRequest.open(method, url, async, user, password)
初始化一个请求。该方法只能JavaScript代码中使用，若要在native code中初始化请求，请使用openRequest()。
参数:

参数	描述
method	要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
url	一个DOMString表示要向其发送请求的URL。
async 可选	一个可选的布尔参数，默认为true，表示要不要异步执行操作。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。注意：从Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)开始，由于对用户体验的负面影响，主线程上的同步请求已不赞成。
user 可选	可选的用户名用于认证用途；默认为null。
password 可选	可选的密码用于认证用途，默认为null。

XMLHttpRequest.overrideMimeType('text/plain; charset=x-user-defined')
重写由服务器返回的MIME type。

XMLHttpRequest.send()
发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

XMLHttpRequest.setRequestHeader(header, value)
设置HTTP请求头的值。您必须在open()之后、send()之前调用setRequestHeader()这个方法。

XMLHttpRequest.sendAsBinary()
send()方法的变体，用来发送二进制数据。

• 示列

var url = "";
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.setRequestHeader("client_type", "DESKTOP_WEB");
xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);
xhr.onreadystatechange = function() {
	if (this.status == 200) {
		var blob = this.response;
		var img = document.createElement("img");
		img.onload = function(e) {
			window.URL.revokeObjectURL(img.src); 
		}
		img.src = window.URL.createObjectURL(blob);
		$("#imgcontainer").html(img);    
	}
}
xhr.send();