javascript中Ajax跨域的方法

本篇內(nèi)容主要講解“javascript中Ajax跨域的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中Ajax跨域的方法”吧!

ajax技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁(yè)面，會(huì)帶來更好的用戶體驗(yàn)。

XMLHttpRequest 對(duì)象

Ajax 技術(shù)的核心是 XMLHttpRequest 對(duì)象（簡(jiǎn)稱 XHR ）

創(chuàng)建 XHR 對(duì)象

var xhr = new XMLHttpRequest（）;

XHR的用法 

要調(diào)用的第一個(gè)方法是 open（） ，它接受 3 個(gè)參數(shù)：要發(fā)送的請(qǐng)求的類型（"get" 、 "post" 等）、請(qǐng)求的 URL 和表示是否異步發(fā)送請(qǐng)求的布爾值。

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

xhr.send（null）;

這里的 send（） 方法接收一個(gè)參數(shù)，即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。如果不需要通過請(qǐng)求主體發(fā)送數(shù)據(jù)，則必須傳入 null ，因?yàn)檫@個(gè)參數(shù)對(duì)有些瀏覽器來說是必需的。調(diào)用 send（） 之后，請(qǐng)求就會(huì)被分派到服務(wù)器。

在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充 XHR 對(duì)象的屬性，相關(guān)的屬性簡(jiǎn)介如下。

responseText：作為響應(yīng)主體被返回的文本。

responseXML：如果響應(yīng)的內(nèi)容類型是"text/xml"或"application/xml"，這個(gè)屬性中將保存包含著響應(yīng)數(shù)據(jù)的 XML DOM 文檔。

status：響應(yīng)的 HTTP 狀態(tài)。

statusText：HTTP 狀態(tài)的說明。

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

}

像前面這樣發(fā)送同步請(qǐng)求當(dāng)然沒有問題，但多數(shù)情況下，我們還是要發(fā)送異步請(qǐng)求，才能讓 JavaScript 繼續(xù)執(zhí)行而不必等待響應(yīng)。此時(shí)，可以檢測(cè) XHR 對(duì)象的 readyState 屬性，該屬性表示請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段。這個(gè)屬性可取的值如下。

0：未初始化。尚未調(diào)用 open（）方法。

1：?jiǎn)?dòng)。已經(jīng)調(diào)用 open（）方法，但尚未調(diào)用 send（）方法。

2：發(fā)送。已經(jīng)調(diào)用 send（）方法，但尚未接收到響應(yīng)。

3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。

4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

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

 } 

}

到此，相信大家對(duì)“javascript中Ajax跨域的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！