javascript和jQuery中的AJAX技術詳解【包含AJAX各種跨域技術】_javascript技巧

本文執行個體講述了javascript和 jQuery中的AJAX技術。分享給大家供大家參考，具體如下：

1.什麼是AJAX？

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。

2.AJAX在原生JS中的實現

儘管隨著JS架構的盛行，在jQuery中，實現AJAX過程相當簡單，但是對於一些不需要載入jQuery這種龐大外掛程式的項目中，還是要採用AJAX的原生實現！

要實現原生JS的AJAX過程，對於高版本瀏覽器，支援JS中的XMLHttpRequest對象，而低版本的瀏覽器IE6，IE7不相容，因此要使用ActiveXObject()對象來實現，相容各種版本的XMLHttpRequest對象的構建如下：

var xml;if(window.XMLHttpRequest){  xml=new XMLHttpRequest();}else{  xml=new ActiveXObject("Microsoft.XMLHTTP");}

對於XMLHttpRequest對象有很多種方法，

（1）xml.readyState：表示請求的狀態其中xml.readyState=0表示請求的準備階段，xml.readyState=1,表示開始發送請求，xml.readyState=2表示伺服器已經接收到請求，xml.readyState=3表示伺服器正在處理請求，xml.readyState=4表示伺服器處理完請求，並將請求返回到用戶端。

0 － （未初始化）還沒有調用send()方法
1 － （載入）已調用send()方法，正在發送請求
2 － （載入完成）send()方法執行完成，已經接收到全部響應內容
3 － （互動）正在解析響應內容
4 － （完成）響應內容解析完成，可以在用戶端調用了

（2）xml.status：表示請求過程中的狀態說明，

1xx資訊提示：

這些狀態碼表示臨時的響應。用戶端在收到常規響應之前，應準備接收一個或多個 1xx 響應。

2XX表示成功，

3XX重新導向

用戶端瀏覽器必須採取更多操作來實現請求。例如，瀏覽器可能不得不請求伺服器上的不同的頁面，或通過Proxy 伺服器重複該請求。

4xx用戶端錯誤

發生錯誤，用戶端似乎有問題。例如，用戶端請求不存在的頁面，用戶端未提供有效身分識別驗證資訊。

5XX伺服器錯誤

伺服器由於遇到錯誤而不能完成該請求。

（3）用原生JS，實現AJAX中的get請求：

var xml=new XMLhttpRequest();xml.onreadystatechange=function(){ if(xml.readyState==4&&xml.status==200) {   var data=JSON.parse(xml.responseText);  }  else{   alert("請求失敗");  }}xml.open("get","url","true");//url裡面為請求的地址，true表示非同步請求xml.send(null)

（4） 用原生JS實現post請求：

var xml=new XMLhttpRequest();xml.onreadystatechange=function(){ if(xml.readyState==4&&xml.status==200) {   var data=JSON.parse(xml.responseText); } else{   alert("請求失敗"); }}xml.open("post","url","true");//url裡面為請求的地址，true表示非同步請求xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //設定post請求的要求標頭xml.send(null)

為什麼要佈建要求頭資訊：

預設情況下，Ajax以content-type:text/plain,方式來提交資料，此時伺服器將忽略post實體部分的資料，所以伺服器無法獲得post請求中的資料。

解決方案：

Content-Type: application/x-www-form-urlencoded

3.AJAX中的跨域技術

（1）.跨域的方式有首先是代理訪問。<script></script>這個方法可以跨域訪問JS等檔案，比如說

<script src="www.abc.com/de.php?callback=dosomething"</script>

就像引入JS一樣，但是不同的是，JSONP方法跨域需要伺服器端語言的配合。

（2）.只能用於GET方法的jsonp方法，進行跨域比如我們有

datatype:jsonp
    jsonp:callback

然後加上幕後處理即可！~

(3).利用XHR2方法，在後台進行操作從而實現跨域支援IE9以上比如 header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-methods:POST,GET");即可實現跨域，並且我們會有在*裡面的是允許跨域的地址來源！~

(4).document.domain來跨域

document.domain在需要進行跨域的iframe中，加上相同的document.domain,xxx.com

4.下面主要介紹JSONP和CORS跨域訪問解決辦法

（1）首先對於JSONP跨域：因為AJAX本身是不能跨域的，有同源保護原則，但是帶有src的標籤可以跨域

比如<script>和<img>等標籤，可以實現跨域請求，這裡主要介紹jQuery中JSONP方法的跨域實現：

JSONP的實現思路：

1.前端建立script標記，設定src，添加到head中（你可以往body中添加）

2.後台返回一個js變數jsonp，這個jsonp就是請求後的JSON資料

3.回調完成後刪除script標記（還有一些清理工作如避免部分瀏覽器記憶體泄露等）

$.ajax({ type : "get", async:false, url : "ajax.ashx", dataType : "jsonp", jsonp: "callbackparam",//傳遞給請求處理常式或頁面的 jsonpCallback:"success_jsonpCallback",//自訂的jsonp回呼函數名稱 success : function(json){ alert(json); alert(json[0].name); },})

（2）CORS跨域方法

CORS定義一種跨域訪問的機制，可以讓AJAX實現跨域訪問，CORS允許一個域上的網路應用向另一個域提交跨域訪問請求，實現此功能非常簡單，只需要由伺服器發送一個相應請求即可！比如在PHP中可以寫成：

header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-methods:POST,GET")

在XHR2方法中實現，並且對於IE，只支援IE9以上瀏覽器

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。