XHR:

// XHR(XMLHttpRequest):為向服務器發送請求和解析服務器響應提供了流暢的接口 // 能夠以異步方式從服務器取得更多信息,意味著用戶點擊后,可以不必刷新頁面也能取得新數據 // 換句話說,可以使用XHR對象獲取新數據,然后再通過DOM將新數據插入到頁面中.

XMLHttpRequest對象:

// IE5是第一款引入XHR對象的瀏覽器.再IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現的. // 因此,在IE中可能會遇到三種不同版本的XHR對象: // IE7之前的生成xhr對象 function createXHR() {if(typeof arguments.callee.activeXString != "string") {var version = ["XSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","XSXML2.XMLHttp"],i, len;for (i=0, len = versions.length; i < len; i++) {try {new activeXObject(versions[i]);arguments.callee.activeXString = versions[i];} catch (ex) {// jump this}}return new ActiveXObject( arguments.callee.activeXString);} }// 支持IE7及更高的版本,生成xhr對象 function createXHR() {if (typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();} else if (typeof ActiveXObject != "undefined") {if (typeof arguments.callee.activeXString != "string") {var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i, len;for( i =0, len =versions.length; i< len; i++) {try {new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;} catct(ex) {// 跳過}}return new ActiveXObject(arguments.callee.activeXString);} else {throw new Error("No XHR object avilable.");} }

XHR.open()創建一個待發送的請求:

// open():它接受3個參數:要發送的請求的類型("get","post"等)、請求的URL和是否異步發送請求的布爾值 // 利用上面定義的方法 var xhr = createXHR(); xhr.open("get", "example.php", false);// 以上代碼會啟動一個針對example.php的GET請求. // 注1:以上的URL是相對于執行代碼的當前頁面 // 注2:open方法并不會真正發送請求,而只是啟動一個請求以備發送 // 注3:只能像同一個域中使用相同端口和協議的URL發送請求.

XHR.send()發送待發送請求:

// send():接收一個參數,即要作為請求主體發送的數據.如果不需要通過請求主體發送數據,則必須傳入null. // 利用上面創建的待發送請求 xhr.send(null);

服務器響應的幾個XHR屬性:

// responseText: 作為響應主體被返回的文本 // responseXML: 如果響應的內容類型是"text/xml" 或”application/xml",這個屬性中將保存包含著響應數據的XML DOM文檔 // status: 響應的HTTP狀態 // statusText: HTTP狀態的說明// 可以像下面這樣檢測返回的status xhr.open("get", url, false); // 同步方式 xhr.send(null);if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304) {alert(xhr.responseText); // 響應主體 } else {alert("Request was unsuccessful: " + xhr.status); } // 注1:狀態碼304,代表請求資源未修改

XHR異步發送請求的readyState屬性:

// 該屬性表示請求 / 響應過程的當前活動階段 // xhr.readyState == 0：未初始化,尚未調用open方法 // xhr.readyState == 1: 啟動,調用了open方法,但未調用send方法 // xhr.readyState == 2: 發送,已經調用了send方法,但并未收到響應 // xhr.readyState == 3: 接收,已經接收到部分響應數據 // xhr.readyState == 4: 完成,已經接收到全部響應數據,而且已經可以在客戶端使用了// 看下面一個例子: var xhr = createXHR(); xhr.onreadystatechange = function () {if ( xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.stauts);}} }; xhr.open("get", url, true); // 異步發送請求 xhr.send(null);// 注1:每次readyState改變時,都會觸發一次onreadystatuschange事件 // 注2:以上onreadystatuschange事件是通過DOM0級方法添加的(原因,DOM2級添加方法僅支持部分瀏覽器)// xhr.abort():用于在接收到響應前,取消異步請求 xhr.abort();

HTTP頭部信息:

// Accept: 瀏覽器能夠處理的內容類型 // Accept-Charset: 瀏覽器能夠顯示的字符集 // Accept-Encoding: 瀏覽器能夠處理的壓縮編碼 // Accept-Language: 瀏覽器當前設置的語言 // Connection: 瀏覽器域服務器之間連接的類型 // Cookie: 當前頁面設置的任何Cookie // Host: 發出請求的頁面所在的域 // Referer: 發出請求的頁面的URI // User-Agent: 瀏覽器的用戶代理// 使用xhr.setRequestHeader發送請求頭部信息.必須位于xhr.open和xhr.send之間 var xhr = createXHR(); xhr.onreadystatechange = function () {if ( xhr.readyState ==4 ){if(( xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert( xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}} } xhr.open("get", url, true); xhr.setRequestHeader("MyHeader", "MyValue"); xhr.send(null);// xhr.getResponseHeader():可以取得響應的響應頭部信息 // xhr.getAllResponseHeaders():可以取得一個包含所有頭部信息的長字符串 var myHeader = xhr.getResponseHeader("MyHeader"); var allHeaders = xhr.getAllResponseHeaders();

GET請求:

// 用于向服務器查詢某些信息,可以將查詢字符串參數追加到URL的末尾 // 查詢字符串中的每個參數的名稱和值都必須使用encodeURIComponent()進行編碼,然后才能放到URL的末尾// addURLParam function addURLParam(url, name, value) {url += (url.indexOf("?") == -1 ? "?" : "&");url += encodeURIComponent(name) + "=" + encodeURIComponent(value);return url; }// use var url = "example.php"; url = addURLParam(url, "name", "Nicholas"); // example.php?name=Nicholas url = addURLParam(url, "book", "Professional JavaScript"); // example.php?name=Nicholas&book=Professional%JavaScriptxhr.open("get", url, false);

POST請求:

// 通常用于向服務器發送應該被保存的數據// 使用XHR來模仿表單提交 function submitData() {var xhr = createXHR();xhr.onreadystatechange = function () {if ( xhr.readyState == 4) {if (( xhr.status >=200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}}};xhr.open("post", "postexample.php", ture);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form)); // serialize是標準化表單元素的函數 }// 附:serialize() function serialize (form) {var parts = [],i,len,j,optLen,option,optValue;for( i =0, len = form.elments.length; i< len; i ++) {filed = form.ekenebts[i];switch(field.type) {case "select-one":case "select-multiple":if(field.name.length) {for(j = 0, optLen = field.options.length; j < optLen; j++) {option = field.options[j];if(option.selected) {optValue = "";if ( option.hasAttribute) {optValue = (option.hasAttribute("value") ?option.value : option.text);} else {optValue = (option.attribute["value"].specified ?option.value : option.text);}parts.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));}}}break;case undefined:case "file":case "submit":case "reset":case "button":break;case "radio":case "checkbox":if(!field.checked) {break;}default:if(field.name.length) {parts.push(encodeURIComponent (field.name) + "=" +encodeURIComponent (field.value));}}}return parts.join("&"); }// 注:在發送相同大小數據的時候,GET請求的速度最多可達POST請求速度的2倍

參考《JavaScript高級程序設計》(第3版)P436~P437 、P571~P578

總結

以上是生活随笔為你收集整理的javascript --- XHR(XMLHttpRequet)对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。