Ajax 是非同步JavaScript和XML的簡稱，是一種更新頁面某部分的機制。它賦予了你從伺服器擷取資料後，更新頁面某部分的權力，從而避免了重新整理整個頁面。另外，以此方式實現頁面局部更新，不僅能有效地打造流暢的使用者體驗，而且減輕了伺服器的負載。
下面是對一個基本的 Ajax 請求進行剖析：
var xhr = new XMLHttpRequest();xhr.open('GET', 'send-ajax-data.php');xhr.send(null);
在這裡， 我們建立了一個能向伺服器發出 HTTP 要求的類的執行個體。然後調用其 open 方法，其中第一個參數是 HTTP 要求方法，第二個參數是請求頁面的 URL。最後，我們調用參數為 null 的 send 方法。假如使用 POST 要求方法（這裡我們使用了 GET），那麼 send 方法 的參數應該包含任何你想發送的資料。
下面是我們如何處理伺服器的響應：
xhr.onreadystatechange = function(){ var DONE = 4; // readyState 4 代表已向伺服器發送請求 var OK = 200; // status 200 代表格服務器返回成功 if(xhr.readyState === DONE){ if(xhr.status === OK){ console.log(xhr.responseText); // 這是返回的文本 } else{ console.log("Error: "+ xhr.status); // 在此次請求中發生的錯誤 } }}
onreadystatechange 是非同步，那麼這就意味著它將可在任何時候被調用。這種類型的函數被稱為回呼函數——一旦某些處理完成後，它就會被調用。在此案例中，這個處理髮生在伺服器。
樣本
便捷的 Ajax 方法也是不少人依賴 jQuery 的原因，但實際上原生 JavaScript 的 Ajax api 也很強大，並且基本的使用在各個瀏覽器中的差異不大，因此完全可以自行封裝一個 Ajax 對象，下面是封裝好的 Ajax 對象：
// Ajax 方法 // 惰性載入建立 xhr 對象 function createXHR(){ if ( 'XMLHttpRequest' in window ){ createXHR = function(){ return new XMLHttpRequest(); }; } else if( 'ActiveXObject' in window ){ createXHR = function(){ return new ActiveXObject("Msxml2.XMLHTTP"); }; } else { createXHR = function(){ throw new Error("Ajax is not supported by this browser"); }; } return createXHR(); } // Ajax 執行 function request(ajaxData){ var xhr = createXHR(); ajaxData.before && ajaxData.before(); // 通過事件來處理非同步請求 xhr.onreadystatechange = function(){ if( xhr.readyState == 4 ){ if( xhr.status == 200 ){ if( ajaxData.dataType == 'json' ){ // 擷取伺服器返回的 json 對象 jsonStr = xhr.responseText; json1 = eval('(' + jsonStr + ')'), json2 = (new Function('return ' + jsonStr))(); ajaxData.callback(json2); // ajaxData.callback(JSON.parse(xhr.responseText)); // 原生方法，IE6/7 不支援 } else ajaxData.callback(xhr.responseText); } else { ajaxData.error && ajaxData.error(xhr.responseText); } } }; // 佈建要求參數 xhr.open(ajaxData.type, ajaxData.url); if( ajaxData.noCache == true ) xhr.setRequestHeader('If-Modified-Since', '0'); if( ajaxData.data ){ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( ajaxData.data ); } else {? ? xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send( null ); } return xhr;} function post(ajaxData){ ajaxData.type = 'POST'; var _result = request(ajaxData); return _result;} function get(ajaxData){ ajaxData.type = 'GET'; ajaxData.data = null; var _result = request(ajaxData); return _result;}
下面給出一個使用例子：
index.html
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>原生 JavaScript 實現 Ajax</title> <link rel="stylesheet" type="text/css" media="all" href="./common/common.css" /> <style> #content {text-align: center; font-family: 'lucida Grande', 'Microsoft Yahei'} #content .btn_ctr {display: block; width: 120px; height: 30px; margin: 0 auto 20px; background: #53a7bb; color: #fff; font-weight: bold; font-size: 14px; line-height: 30px; text-decoration: none; border-radius: 4px; } #test {width: 280px; height: 130px; margin: 0 auto; padding: 15px; background: #fff; border-radius: 4px; text-align: left; } </style></head><body> <div id="header"> <div id="header-content"> <div id="header-inside"> <p class="go-to-article"><a href="http://kayosite.com/css3-animation.html" title="開啟原文" target="_blank" >Back To Article</a></p> <p class="go-to-blog"><a href="http://kayosite.com" title="進入我的部落格 Kayo's Melody" target="_blank" >My Blog</a></p> <p class="copyright">Demo By Kayo © Copyright 2011-2013</p> </div> <h1>CSS3 Animation</h1> </div> </div> <div id="content"> <a class="btn_ctr" href="javascript:;" onclick="get({url: './ajax.html', callback: function(out){document.getElementById('test').innerHTML = out;}})">Ajax 擷取內容</a> <div id="test"></div> </div> <script> // Ajax 方法，這裡不在重複列出 </script></body></html>
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>ajax</title></head><body> <p>成功擷取到這段文本</p></body></html>
具體的效果可以瀏覽完整 Demo 。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
