javascript中Ajax跨域的方法

本篇內容主要講解“javascript中Ajax跨域的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript中Ajax跨域的方法”吧!

ajax技術能夠向服務器請求額外的數據而無須卸載頁面，會帶來更好的用戶體驗。

XMLHttpRequest 對象

Ajax 技術的核心是 XMLHttpRequest 對象（簡稱 XHR ）

創建 XHR 對象

var xhr = new XMLHttpRequest（）;

XHR的用法 

要調用的第一個方法是 open（） ，它接受 3 個參數：要發送的請求的類型（"get" 、 "post" 等）、請求的 URL 和表示是否異步發送請求的布爾值。

xhr.open（"get", "example.php", false）;

xhr.send（null）;

這里的 send（） 方法接收一個參數，即要作為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入 null ，因為這個參數對有些瀏覽器來說是必需的。調用 send（） 之后，請求就會被分派到服務器。

在收到響應后，響應的數據會自動填充 XHR 對象的屬性，相關的屬性簡介如下。

responseText：作為響應主體被返回的文本。

responseXML：如果響應的內容類型是"text/xml"或"application/xml"，這個屬性中將保存包含著響應數據的 XML DOM 文檔。

status：響應的 HTTP 狀態。

statusText：HTTP 狀態的說明。

xhr.open（"get", "example.txt", false）; 

xhr.send（null）; 

if （（xhr.status >= 200 && xhr.status < 300） || xhr.status == 304）{ 

 alert（xhr.responseText）; 

} else { 

 alert（"Request was unsuccessful: " + xhr.status）; 

}

像前面這樣發送同步請求當然沒有問題，但多數情況下，我們還是要發送異步請求，才能讓 JavaScript 繼續執行而不必等待響應。此時，可以檢測 XHR 對象的 readyState 屬性，該屬性表示請求/響應過程的當前活動階段。這個屬性可取的值如下。

0：未初始化。尚未調用 open（）方法。

1：啟動。已經調用 open（）方法，但尚未調用 send（）方法。

2：發送。已經調用 send（）方法，但尚未接收到響應。

3：接收。已經接收到部分響應數據。

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.status）; 

 } 

 } 

}; 

xhr.open（"get", "example.txt", true）; 

xhr.send（null）;

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; 

 } catch （ex）{ 

 //跳過

 } 

 } 

 } 

 return new ActiveXObject（arguments.callee.activeXString）; 

 } else { 

 throw new Error（"No XHR object available."）; 

 } 

}

到此，相信大家對“javascript中Ajax跨域的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！