JS XMLHttpRequest 学习总结

http链接使用XMLHttpRequest，html5之后对XHR重新规范了定义，具体可以参考MDN Web docs / XMLHttpRequest

js中可以通过new XMLHttpRequest()来声明，主要参数有：
onreadystatechange : 属性状态readyState改变后就会回调的函数，用户在这里处理各种状态。
readyState：链接状态
response：返回的正文，如果没有，默认是空字符串，其他类型可以定义，根据reponseType。
responseText: 返回一个DOMString，它包含对文本的请求的响应，如果请求不成功或尚未发送，则返回null。
responseType: 返回的正文类型，可以是 ArrayBuffer 、 Blob 、 Document 、 JavaScript Object 或 DOMString 。
responseUrl: 如果URL为空,只读的XMLHttpRequest.responseURL属性返回响应的序列化URL或空字符串。当URL被返回的时候，任何包含在URL # 后面的fragment都会被删除。 responseURL 的值将会是经过任意多次重定向后的最终 URL 。
responseXml: 是一个只读值，它返回一个包含请求检索的HTML或XML的Document，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。该响应被解析，就像它是一个 “text / xml” 流。当 responseType 设置为 “document” 并且请求已异步执行时，响应将解析为 “text / html” 流。responseXML 对于任何其他类型的数据以及 data: URLs 为 null。

如果服务器没有明确指出 Content-Type 头是 “text/xml” 还是 “application/xml”,
你可以使用XMLHttpRequest.overrideMimeType() 强制 XMLHttpRequest 解析为 XML.

status：返回网页状态，200～299都是正常状态，404 not found。
statusText: 返回状态对应的文本信息，如果 readyState 为 0 或者 1，那么这是个空字符串。
timeout: 超时的时间，超时并不应该用在一个 document environment 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。

在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置。

upload: 用来表示上传的进度。这个对象是不透明的，但是作为一个XMLHttpRequestEventTarget，可以通过对其绑定事件来追踪它的进度。

下面是实例代码：
一、creator js：

	// netTest.js
	net = {};
	module.exports = net;
	net.sendData = function(url, params) {
		var xhr = cc.loader.getXMLHttpRequest();
		// respones callback
		xhr.onreadystatechange = function() {
			cc.log("connect callback");
			if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
				cc.log("respones state success" + xhr.responseText);
			} else {
				cc.log("connect error  " + xhr.statusText);
			}
		};
		xhr.timeout = 5000; // 超时时间，单位毫秒
		xhr.open("POST", url);  // 打开链接，POST/GET
		// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  // 设置头信息，必须在open之后，send之前
		xhr.send(params); // 发送，参数可以为null，或者是字符串
	};

二、html+js：

	<script>
		var xhr = new XMLHttpRequest();
		// 其余部分和creator类似了，就不重写了
	</script>

最后

以上就是无辜小蚂蚁为你收集整理的JS XMLHttpRequest 学习总结的全部内容，希望文章能够帮你解决JS XMLHttpRequest 学习总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。