Ajax指異步JavaScript及XML(Asynchronous JavaScipt And XML),是一種異步交互式網頁開發技術，用於創建快速動態網頁。與服務器進行少量數據交換中，Ajax可以使網頁實現異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
97年微軟便發明了ajax的關鍵技術，並且在99年用於IE5中，但可惜因為其它原因沒有被推廣擱置了起來，ajax技術的流行得益於google的大力推廣。Ajax的核心是JavaScript對象XmlHttpRequest,是一種支持異步請求的技術，它的意義有：1.在不重新加載頁面的情況下更新網頁。2.在頁面已加載後從服務器請求數據。3.在頁面已加載後從服務器接收數據。4.在後台向服務器發送數據。需要注意的是AJAX不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。
1.AJAX的工作原理：
Ajax的工作原理相當於在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。
2.Ajax的優點：
1.最大的一點是頁面無刷新，用戶的體驗非常好。
2.使用異步方式與服務器通信，具有更加迅速的響應能力。
3.可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。並且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。
4.基於標准化的並被廣泛支持的技術，不需要下載插件或者小程序。
5.Ajax使WEB中的界面與應用分離（也可以說是數據與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發布系統。
3.Ajax的缺點：
1、ajax不支持浏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
5、不容易調試。
4.XmlHttpRequest對象的屬性和方法：
屬性
說明
readyState
存有 XMLHttpRequest 的狀態。從0到4發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
Onreadystatechange
存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
responseText
服務器響應的文本內容
responseXML
服務器響應的XML內容對應的DOM對象
Status
服務器返回的http狀態碼。200表示“成功”，404表示“未找到”，500表示“服務器內部錯誤”等。
statusText
服務器返回狀態的文本信息。
方法
說明
Open(string method,string url,boolean asynch,
String username,string password)
指定和服務器端交互的HTTP方法，URL地址，即其他請求信息；
Method:表示http請求方法，一般使用"GET","POST".
url：表示請求的服務器的地址；
asynch：表示是否采用異步方法，true為異步，false為同步；
後邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。
Send(content)
向服務器發出請求，如果采用異步方式，該方法會立即返回。
content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)
設置HTTP請求中的指定頭部header的值為value.
此方法需在open方法以後調用，一般在post方式中使用。
getAllResponseHeaders()
返回包含Http的所有響應頭信息，其中相應頭包括Content-length,date,uri等內容。
返回值是一個字符串，包含所有頭信息，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)
返回HTTP響應頭中指定的鍵名header對應的值
Abort()
停止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。
上面了解了Ajax以及工作原理和XmlHttpRequest對象的屬性和方法，那我們該怎麼樣來使用它呢？這裡我分來五步來實現。
第一步：創建XmlHttpRequest對象:
1 2 3 4 5 6 7
var xmlhttp = null;
//XMLHttpRequest IE6是有兼容問題的,可以判斷ie6的 ActiveXObject('Microsoft.XMLHTTP')
if(window.XMLHttpRequest){
xmlhttp =new XMLHttpRequest();//除了IE6以外的浏覽器
}else{
xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");//IE6浏覽器
}
第二步：指定鏈接地址：
1var url='demo.php'。
第三步：發送資源請求給服務器。
使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。
xmlhttp.open(method,url,async) method包括get和post，url主要是文件或資源的路徑，async參數為true(代表異步)或者false（代表同步）
xmlhttp.send();使用get方法發送請求到服務器。
xmlhttp.send(string);使用post方法發送請求到服務器。
post 發送請求什麼時候能夠使用呢？
(1)更新一個文件或者數據庫的時候。
(2)發送大量數據到服務器，因為post請求沒有字符限制。
(3)發送用戶輸入的加密數據。
get例子：
1 2 3 4xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.open("GET", "index.html", true);
xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();
xmlhttp.send(null);//傳遞參數用的,但是只有在使用post方式提交請求的時候才有用
post例子:
1 2xmlhttp.open("POST", "demo_post.asp", true);
xmlhttp.send();
post表單例子:
1 2 3xmlhttp.open("POST", "ajax_test.aspx", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
第四步：服務器響應
使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應。
responseText：獲得字符串形式的響應數據。
responseXML：獲得 XML 形式的響應數據。
如果來自服務器的響應並非 XML，請使用responseText屬性。
responseText 屬性返回字符串形式的響應，因此可以這樣使用：
responseText例子：
1document.getElementById("demo").innerHTML=xmlhttp.responseText;
如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：
responseXML例子：
1 2 3 4 5 6 7xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
第五步：onreadystatechange函數的使用
onreadystatechange函數，當發送請求到服務器，我們想要服務器響應執行一些功能就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數。
onreadystatechange屬性存儲一個當readyState發生改變時自動被調用的函數。
readyState屬性，XMLHttpRequest對象的狀態，改變從0到4，0代表請求未被初始化，1代表服務器連接成功，2請求被服務器接收，3處理請求，4請求完成並且響應准備。
status屬性，200表示成功響應，404表示頁面不存在。
在onreadystatechange事件中，服務器響應准備的時候發生，當readyState==4和status==200的時候服務器響應准備。
1 2 3 4 5 6 7
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("demo").innerHTML=xmlhttp.responseText;
}
}
使用回調函數
回調函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務，那麼您應該為創建 XMLHttpRequest 對象編寫一個標准的函數，並為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
1 2 3 4 5 6 7function myFunction(){
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("demo").innerHTML=xmlhttp.responseText; }
});}
在實際的運用中，嘗試利用事件+ajax 給button綁定點擊事件，然後執行ajax。
server.php
<?php
if (isset($_POST['action']))
{
switch($_POST['action'])
{
case "btn1":btn1();break;
case "btn2":btn2();break;
default:break;
}
}
function btn1()
{
echo "hello 按鈕1";
}
function btn2()
{
echo "hello 按鈕2";
}
?>
方式：index.php
<html>
<head>
<style>
div {width:600px;margin:200px auto;}
.btn {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.btn:hover {
background-color:#5cbf2a;
}
.btn:active {
position:relative;
top:1px;
}
#btn2 {float:right;}
</style>
<script type="text/javascript" language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
//檢查浏覽器是否支持 XMLHttpRequest 對象
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function fun(n){
createXMLHttpRequest();
var url="server.php";
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = callback;
xmlHttp.send("action=" + n.value);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<div>
<button type="button" class="btn" id="btn1" onclick="fun(this)" value="btn1">按鈕1</button>
<button type="button" class="btn" id="btn2" onclick="fun(this)" value="btn2">按鈕2</button>
</div>
</body>
</html>
