AJAX，Asynchronous JavaScript And XML的簡稱。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），可使網頁從服務器請求少量的信息，而不是整個頁面。ajax算不上新技術，只不過是幾項老技術的整合，包括客戶端腳本技術javascript、xml以及json等數據交換形式、DOM等。
ajax的使用可以分爲三個步驟:XMLHttpRequest對象的創建、onreadystatechange響應函數的綁定、發送請求。範例：
<html>
<head>
<script type="text/javascript">
function load()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="load()">通過 AJAX 改變內容</button>
</body>
</html>一、XMLHttpRequest對象的創建
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後臺與服務器交換數據，在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建方法：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}二、onreadystatechange響應函數的綁定
當請求被髮送到服務器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是 XMLHttpRequest 對象的三個重要的屬性：
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status |
200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}關於服務器響應
有responseText（字符串）和responseXML（XML結構樹對象）兩種形式。
三、發送請求
將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET",url,true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) |
規定請求的類型、URL 以及是否異步處理請求。
|
| send(string) |
將請求發送到服務器。
|
GET請求
xmlhttp.open("GET",url,true);
xmlhttp.send();
POST請求
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
最後的最後：
網站上一般存在多個 AJAX 任務，那麼可以爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
<!DOCTYPE script PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function load(url,func){
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=func;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
else{
alert("Your browser does not support XMLHTTP.");
}
}
function loadx(){
//alert();
load("b.html",function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<div id="content"></div>
<input type="button" οnclick="loadx()" value="load">
</html>相關文章：jquery中的ajax
參考資料：http://www.w3school.com.cn/ajax/index.asp