天天看點

JS XMLHttpRequest 學習總結

http連結使用XMLHttpRequest,html5之後對XHR重新規範了定義,具體可以參考MDN Web docs / XMLHttpRequest

js中可以通過new XMLHttpRequest()來聲明,主要參數有:

onreadystatechange : 屬性狀态readyState改變後就會回調的函數,使用者在這裡處理各種狀态。

readyState:連結狀态

JS XMLHttpRequest 學習總結

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,可以通過對其綁定事件來追蹤它的進度。

JS XMLHttpRequest 學習總結

下面是執行個體代碼:

一、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>