AJAX技術是網頁構建的必備技能之一，本文希望能幫助大家輕鬆的學習這項技術 ...
摘要
AJAX技術是網頁構建的必備技能之一，本文希望能幫助大家輕鬆的學習這項技術
一、什麼是ajax?
ajax(非同步javascript xml) 能夠刷新局部網頁數據而不是重新載入整個網頁。
二、如何使用ajax?
第一步：創建xmlhttprequest對象
創建xmlhttprequest對象，XMLHttpRequest對象用來和伺服器交換數據。
var xmlhttp =new XMLHttpRequest();第二步：註冊回調函數
onreadystatechange函數，當伺服器響應請求並返回數據後，我們想要客戶端處理這些數據就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數。對於readyState會在下一章節詳細介紹。
xmlHttp.onreadystatechange= callback;
function callback(){}第三步：配置和發送請求
使用xmlhttprequest對象的open（）和send（）方法配置和發送資源請求給伺服器。
xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或資源的路徑，async參數為true(代表非同步)或者false（代表同步）
xmlhttp.send();使用get方法發送請求到伺服器。
xmlhttp.send(string);使用post方法發送請求到伺服器。
post表單數據需要使用xmlhttprequest對象的setRequestHeader方法增加一個HTTP頭。
post 發送請求什麼時候能夠使用呢？
(1)更新一個文件或者資料庫的時候。
(2)發送大量數據到伺服器，因為post請求沒有字元限制。
(3)發送用戶輸入的加密數據。
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");第四步：處理響應數據
使用xmlhttprequest對象的responseText或responseXML屬性獲得伺服器的響應。
使用responseText屬性得到伺服器響應的字元串數據，使用responseXML屬性得到伺服器響應的XML數據。
在回調函數中使用readyState==4和status==200判斷交互是否結束，響應是否正確，並根據需要獲取伺服器端返回的數據，更新頁面內容。
function callback(){
if(xmlHttp.readyState == 4){
//判斷交互是否成功
if(xmlHttp.status == 200){
//獲取伺服器返回的數據
//獲取純文本數據
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
}三、AJAX運行過程中5種狀態（readyState）
在AJAX實際運行當中，對於訪問XMLHttpRequest（XHR）時並不是一次完成的，而是分別經歷了多種狀態後取得的結果，對於這種狀態在AJAX中共有5種，這五種狀態是由AJAX引擎切換設置的，分別是。
0 ： 定義了XHR，但還未初始化
1 ：調用send()方法，正在發送請求，請求發送完畢後，開始等待接收響應
2 ：響應接收完成
3 ：正在解析響應內容
4 ：響應內容解析完成，返回給客戶端調用
對於上面的狀態，其中“0”狀態是在定義後自動具有的狀態值，而對於成功訪問的狀態（得到信息）我們大多數採用“4”進行判斷。
值得註意的是，狀態每切換一次，都會觸發onreadystatechange 事件，所以整個過程onreadystatechange 事件被觸發5次
四、AJAX的優缺點
優點
1、最大的一點是頁面無刷新，在頁面內與伺服器通信，不需要打斷用戶的操作，具有更加迅速的響應能力給用戶的體驗非常好。
2、減輕伺服器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
缺點
1、ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。
2、對搜索引擎的支持比較弱。
更多前端技術文章，歡迎前往我的個人博客：嶸麽麽的個人博客
