本文實例講述了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重定向
客戶端浏覽器必須采取更多操作來實現請求。例如，浏覽器可能不得不請求服務器上的不同的頁面，或通過代理服務器重復該請求。
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程序設計有所幫助。