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><a href="http://kayosite.com/css3-animation.html" target="_blank" >Back To Article</a></p> <p><a href="http://kayosite.com" target="_blank" >My Blog</a></p> <p>Demo By Kayo © Copyright 2011-2013</p> </div> <h1>CSS3 Animation</h1> </div> </div> <div id="content"> <a 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> ajax.html<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>ajax</title></head><body> <p>成功獲取到這段文本</p></body></html>
具體的效果可以瀏覽完整Demo 。