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

1.什么是AJAX？

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

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

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

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

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

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

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

對(duì)于XMLHttpRequest對(duì)象有很多種方法，

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

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

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

1xx信息提示：

這些狀態(tài)代碼表示臨時(shí)的響應(yīng)?？蛻舳嗽谑盏匠Ｒ?guī)響應(yīng)之前，應(yīng)準(zhǔn)備接收一個(gè)或多個(gè) 1xx 響應(yīng)。

2XX表示成功，

3XX重定向

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

4xx客戶端錯(cuò)誤

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

5XX服務(wù)器錯(cuò)誤

服務(wù)器由于遇到錯(cuò)誤而不能完成該請(qǐng)求。

（3）用原生JS，實(shí)現(xiàn)AJAX中的get請(qǐng)求：

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

（4） 用原生JS實(shí)現(xiàn)post請(qǐng)求：

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

為什么要設(shè)置請(qǐng)求頭信息：

默認(rèn)情況下，Ajax以content-type:text/plain,方式來提交數(shù)據(jù)，此時(shí)服務(wù)器將忽略post實(shí)體部分的數(shù)據(jù)，所以服務(wù)器無法獲得post請(qǐng)求中的數(shù)據(jù)。

解決方法：

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

3.AJAX中的跨域技術(shù)

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

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

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

（2）.只能用于GET方法的jsonp方法，進(jìn)行跨域比如我們有

datatype:jsonp
    jsonp:callback

然后加上后臺(tái)處理即可！~

(3).利用XHR2方法，在后臺(tái)進(jìn)行操作從而實(shí)現(xiàn)跨域支持IE9以上比如 header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-methods:POST,GET");即可實(shí)現(xiàn)跨域，并且我們會(huì)有在*里面的是允許跨域的地址來源！~

(4).document.domain來跨域

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

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

（1）首先對(duì)于JSONP跨域：因?yàn)锳JAX本身是不能跨域的，有同源保護(hù)策略，但是帶有src的標(biāo)簽可以跨域

比如<script>和<img>等標(biāo)簽，可以實(shí)現(xiàn)跨域請(qǐng)求，這里主要介紹jQuery中JSONP方法的跨域?qū)崿F(xiàn)：

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

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

2.后臺(tái)返回一個(gè)js變量jsonp，這個(gè)jsonp就是請(qǐng)求后的JSON數(shù)據(jù)

3.回調(diào)完成后刪除script標(biāo)記（還有一些清理工作如避免部分瀏覽器內(nèi)存泄露等）

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

（2）CORS跨域方法

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

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論