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

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。

通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

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

2.AJAX在原生JS中的實現(xiàn)

盡管隨著JS框架的盛行，在jQuery中，實現(xiàn)AJAX過程相當簡單，但是對于一些不需要加載jQuery這種龐大插件的項目中，還是要采用AJAX的原生實現(xiàn)！

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

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

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

（1）xml.readyState：表示請求的狀態(tài)其中xml.readyState=0表示請求的準備階段，xml.readyState=1,表示開始發(fā)送請求，xml.readyState=2表示服務器已經(jīng)接收到請求，xml.readyState=3表示服務器正在處理請求，xml.readyState=4表示服務器處理完請求，并將請求返回到客戶端。

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

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

1xx信息提示：

這些狀態(tài)代碼表示臨時的響應。客戶端在收到常規(guī)響應之前，應準備接收一個或多個 1xx 響應。

2XX表示成功，

3XX重定向

客戶端瀏覽器必須采取更多操作來實現(xiàn)請求。例如，瀏覽器可能不得不請求服務器上的不同的頁面，或通過代理服務器重復該請求。

4xx客戶端錯誤

發(fā)生錯誤，客戶端似乎有問題。例如，客戶端請求不存在的頁面，客戶端未提供有效的身份驗證信息。

5XX服務器錯誤

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

（3）用原生JS，實現(xiàn)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實現(xiàn)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,方式來提交數(shù)據(jù)，此時服務器將忽略post實體部分的數(shù)據(jù)，所以服務器無法獲得post請求中的數(shù)據(jù)。

解決方法：

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方法，在后臺進行操作從而實現(xiàn)跨域支持IE9以上比如 header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-methods:POST,GET");即可實現(xiàn)跨域，并且我們會有在*里面的是允許跨域的地址來源！~

(4).document.domain來跨域

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

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

（1）首先對于JSONP跨域：因為AJAX本身是不能跨域的，有同源保護策略，但是帶有src的標簽可以跨域

比如<script>和<img>等標簽，可以實現(xiàn)跨域請求，這里主要介紹jQuery中JSONP方法的跨域實現(xiàn)：

JSONP的實現(xiàn)思路：

1.前端創(chuàng)建script標記，設置src，添加到head中（你可以往body中添加）

2.后臺返回一個js變量jsonp，這個jsonp就是請求后的JSON數(shù)據(jù)

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

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

（2）CORS跨域方法

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

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

在XHR2方法中實現(xiàn)，并且對于IE，只支持IE9以上瀏覽器

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

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

最新評論