動態網頁和靜態網頁的區別在於是否能夠和服務器進行交互，而凡是與服務器進行數據交互就需要ajax。
什麼是AJAX？
AJAX是Asynchronous（[ə'sɪŋkrənəs]） javascript and xml 的縮寫，用javascript以異步的形式操作xml（現在操作的是json）。
隨着谷歌地圖的橫空出世，這種不需要刷新頁面就可以與服務器通訊的方式很快被人們所知。
在傳統的web模型中，客戶端向服務器發送一個請求，服務器會返回整個頁面。
我們前面學習的form表單來傳輸數據的方式就屬於傳統的web模型，當我們點擊submit按鈕之後，整個頁面就會被刷新一下。
• form表單有三個很重要的屬性，分別是method、action和enctype。method是數據傳輸的方式，一般是get或者post；action是我們要把數據傳送到的地址；enctype則是是否對數據進行編碼。
enctype的默認值是 “application/x-www-form-urlencoded”，即在發送前編碼所有字符，這個屬性值即使我們不寫也是默認這個的。
但是當我們在使用包含文件上傳控件的表單的時候，這個值就必須更改成“multipart/form-data”，即不對字符進行編碼。
而在AJAX模型中，數據在客戶端與服務器之間獨立傳輸，服務器不再返回整個頁面。
AJAX優點
1.頁面無刷新，在頁面內與服務器通信，給用戶的體驗很好。
2.使用異步的形式與服務器進行通信，不需要打斷用戶的操作，給用戶的體驗更好。
3.減輕服務器的負擔。
4.不需要插件或者小程序。
AJAX缺點
1.不支持瀏覽器的後退機制。
2.安全問題，跨站點腳本攻擊、sqi注入攻擊。
3.對搜索引擎支持較弱（seo）。
4.不支持移動設備。
5.違背了url和資源定位的初衷。
瞭解了以上的知識之後，我麼就開始學習如何運用AJAX了喲~
這裏我們先認識一下AJAX最重要的兩個對象：
new XMLHttpRequest()
new ActiveXObject(‘Microsoft.XMLHTTP’)
我們通過AJAX獲取數據就是通過這兩個對象，一般的主流瀏覽器支持第一個方法，IE6以下用第二個方法。
對象的方法
1.abort 停止當前的請求
2.getAllResponseHeaders 把http請求的所有響應首部最爲鍵/值返回
3.getResponseHeaders(‘headerLabel’) 返回指定首部的串值
4.open(‘method’, ‘url’, ‘true’) 建立對服務器的調用，method參數可以是get、post或者put。url參數可以是相對url或者絕對url，第三個參數是選擇異步還是同步，異步是true。這個方法還包括三個可選參數。
5.send(content) 向服務器發送請求
6.setRequestHeader(‘label’, ‘value’) 把指定首部設置爲提供的值，在設置任何首部之前必須調用open方法。
這裏面後三個方法是很重要的。
對象的屬性
1.onreadystatechange 狀態改變觸發器
2.readyState 對象的狀態
0代表未初始化，此時已經創建了一個XMLHttpRequest對象
1代表讀取中，此時代碼已經調用XMLHttpRequest的open方法並且XMLHttpRequest已經將請求發送到服務期。
2代表已讀取，此時已經通過open方法把一個請求發送到服務端，但是還沒有收到。
3代表交互中，此時已經收到http響應頭部信息，但是消息主體部分還沒有完全接受
4代表完成，此時響應已經被完全接受。
3.responseText 服務器進程返回數據的文本版本
4.responseXML 服務器進程返回數據的兼容DOM的XML文旦對象
5.status 服務器返回的狀態碼
這裏大致介紹一下狀態碼。
狀態碼的功能
狀態碼是用來描述返回的請求結果。藉助狀態碼，我們可以知道是正確的處理了請求還是出現了錯誤。
狀態碼的響應類別一共有5種，比如200，數字中的第一位代表響應的類別，後兩位無分類。
狀態碼的五種類別
1xx（信息性狀態碼），接受的請求正在處理
2xx（成功狀態碼），請求正確處理完畢
3xx（重定向狀態碼），需要進行附加操作以完成請求
4xx（客戶端錯誤狀態碼），服務器無法請求類別
5xx（服務器錯誤狀態碼），服務器處理請求出錯
其中一般會遇到的大致有以下14種：
2xx 成功
200 OK 請求已經被服務器正常處理。
204 No Content 請求處理成功，但是沒有資源可以返回。
206 Partial Content 表示客戶端進行了範圍請求，而服務器成功執行了這部分的GET請求。 content-Range在首部裏面。
3xx 重定向
301 Moved Permanently 永久性重定向
302 Found 臨時性重定向，禁止post變成get
303 See Other 請求的對應資源存在着另一個URI，因使用GET方法定性獲取請求的資源
304 Not Modified 資源已找到，但是爲符合要求
307 Temporary Redirect 臨時重定向，與302含義相同。
4xx 客戶端錯誤
400 Bad Request 請求報文中存在語法錯誤
401 Unauthorized 發送的請求需要有通過HTTP認證的認證信息。如果之前請求過一次，則表示用戶認證失敗。
403 Forbidden 不允許訪問該資源
404 Not Found 服務器上沒有改資源
5xx 服務器錯誤
500 Internal Server Error 服務器端在執行請求時發生錯誤
503 Service Unavailable 服務器暫時處於超負載或正在停機維護，無法處理請求
注意：不少返回的狀態碼響應是錯誤的，但是用戶可能察覺不到這點。
AJAX流程
這裏我把這個ajax流程暫時轉化成了一個定外賣的步驟，方便大家理解。
1.下載外賣APP
2.打開APP 裏面有選擇商家、付款方式，然後我們點完餐之後是選擇乾點別的事情還是什麼都不幹專心等外賣。
3.提交訂單 付款、添加備註
4.事件監聽物流信息，外賣到了之後驗貨。
這就是一個定外賣的流程，而我們的AJAX流程和這個定外賣的流程十分相似。
AJAX流程：
1.生成一個ajax對象（下載外賣APP）
2.通過ajax對象 open（method，url，flag）方法（付款方式、商家、是否乾點別的事情）
3.通過ajax對象 send提交數據（提交訂單）
4.通過ajax對象的onreadystatechange來監聽狀態改變（監控物流），當數據請求成功之後就可以操作數據了（驗貨）
function Ajax (method,url, flag, data, callback) {
var xml =null;
if (window.XMLHttpRequest) {//主流瀏覽器獲取ajax對象
xml = newXMLHttpRequest();
}else {
xml = newActiveXObject('Microsoft.XMLHTTP');
}
method = method.toUpperCase();
if (method ==='GET') {
xml.open('GET',url + '?' +data, flag);//true 異步
xml.send();
}else if (method ==='POST') {
xml.open(method,url, flag);
xml.setRequestHeader('Content-type','application/x-www.form-urlencoded');
xml.send(data);
}
xml.onreadystatechange =function () {
if (xml.readyState ===4 ) {
if (xml.status ==200) {
callback(xml.responseText);
}else {
alert('error');
}
}
}
}