什么是Ajax?
Ajax（Asynchronous Javascrpt And Xml）是一種運用于瀏覽器的技術，它可以在瀏覽器與服務器之間使用異步通信機制進行數據通信，從而允許瀏覽器向服務器獲取少量信息而不是刷新整個頁面。Ajax并不是一種新的技術，或者說它不是一種技術，它只是多種技術的綜合：Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技術按照一定的方式在協作中發揮各自的作用就構成了Ajax。

一.XMLHttpRequest 對象

XMLHttpRequest是XMLHttp組件的一個對象，使用XMLHttpRequest可以實現瀏覽器端與服務器端進行異步通信。通過HttpRequest對象，Web應用程序無需刷新頁面就可以向服務器提交信息，然后得到服務器端的返回信息。

1.創建XMLHttpRequest 對象

（1）非IE瀏覽器和IE瀏覽器高版本

var xhr = new XMLHttpRequest();

（2）老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

（3）兼容性寫法

XHR.png

2.XMLHttpRequest 對象的方法和屬性

（1）XMLHttpRequest的屬性介紹： (常用的屬性)

• readyState：返回當前XMLHttp請求的狀態，有5種：

狀態：0 ：請求未初始化；
狀態：1 ：請求已經建立；
狀態：2 ：請求已經發送；
狀態：3 ：請求處理中；
狀態：4 ：響應已經完成。

• onreadystatechange：readyState狀態改變的事件觸發器，用來指定當readyState發生變化時的處理事件。
• responseText：將響應信息以字符串的形式返回。
• responseXML：如果響應的內容類型是 "text/xml" 或 "application/xml"，這個屬性中將保存著相應的xml 數據，是 XML 對應的 document 類型；
• status：當前Http請求的狀態，下面列幾個重要的，經常用到的狀態。

狀態值：200 ：OK；
狀態值：404 ：沒有發現文件、查詢或URI；
狀態值：500 ：服務器產生內部的錯誤；

（2）XMLHttpRequest的方法：(常用的方法)

• open(string method,string url,boolean async)方法將創建一個新的Http請求。

method（請求方法）：GET,POST和PUT(一般不用)；
url為：請求的地址；
async：可選參數，用來指定此請求是同步還是異步方式，默認為true(異步)；

• send(content)方法用來向服務器發送具體的請求,如果沒有內容要發送，content省略或為null。
• setRequestHeader() 向一個打開但未發送的請求設置或添加一個 HTTP 請求。

二.Ajax請求初印象：

//1.創建Ajax引擎對象
var xhr= createXHR();

//2.配置請求對象的信息,注意：如果使用post請求,就一定要設置請求頭 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;  charset=utf-8");
 xhr.open('GET/POST','url地址',[ '是否異步']);

//3.監聽Ajax引擎對象的改變(是否正確做出了響應)
  xhr.onreadystatechange=function(){

      //當請求和響應同時完成,從Ajax引擎中獲取響應內容,然后通過javascript對網頁進行操作
      if (xhr.readyState==4 && xhr.status==200){
          // xhr. responseText
          //xhr. responseXML
      }
  }

//4.發送請求
xhr.send([post請求參數字符串]);

（1） GET請求

用于向服務器查詢某些信息，將參數放在url后面。使用addURLParam就是保證URI被正確編碼，格式良好。

var xhr = new XMLHttpRequest();
function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
var url = "server.php";
url = addURLParam(url, "name", "patty");
url = addURLParam(url, "id", "20151002222");

xhr.open("get", url, true);
xhr.send(null);

JS中對URL進行轉碼與解碼

（2）POST請求

用于向服務器發送應該保存的數據。這時send的參數就是發送的數據了。一般是數據序列化后的字符串。

var xhr = new XMLHttpRequest();
xhr.open("post", "server.php", true);
//模仿表單提交
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user");
xhr.send(serialize(form));

POST 請求中，在發送數據之前，要設置提交的內容的方式 Content-Type 。常見的有application/x-www-form-urlencoded，multipart/form-data，application/json，text/xml。

（3）GET還是POST？

GET請求和POST請求的區別：

• 效率
  GET從服務器獲取數據（也可以上傳數據，參數就是），效率較高
  POST可以向服務器發送數據和下載數據，效率不如GET
• 緩存
  GET 請求能夠被緩存，默認的請求方式也是有緩存的
  POST請求默認不會緩存
• 安全性
  GET的所有參數全部包裝在URL中，明文顯示，且服務器的訪問日志會記錄，非常不安全
  POST的URL中只有資源路徑，不包含參數，參數封裝在二進制的數據體中，服務器也不會記錄參數，相對安全。所有涉及用戶隱私的數據都要用POST傳輸
  POST的安全是相對的，對于普通用戶來說他們看不到明文，數據封裝對他們來說就是屏障。但是對于專業人士，它們會抓包會分析，沒有加密的數據包對他們來說也是小case。所以POST僅僅是相對安全，唯有對數據進行加密才會更安全。
• 數據量
  HTTP協議中均沒有對GET和POST請求的數據大小進行限制，但是實際應用中它們通常受限于軟硬件平臺的設計和性能。
  GET：不同的瀏覽器和服務器不同，一般限制在2~8K之間，更加常見的是1k以內
  POST方法提交的數據比較大，大小靠服務器的設定值限制，PHP默認是2M

三.XMLHttpRequest 二級

老版本的XMLHttpRequest對象有以下幾個缺點：

• 只支持文本數據的傳送，無法讀取和上傳二進制文件。
• 傳送和接收數據時，沒有進度信息，只能提示有沒有完成。
• 受到”同域限制”，只能向同一域名的服務器請求數據。

新版本的XMLHttpRequest對象的一些新功能：

• 可以設置HTTP請求的時限。
• 可以使用FormData對象管理表單數據。
• 可以上傳文件。
• 可以請求不同域名下的數據（跨域資源共享，Cross-origin resource sharing，簡稱 CORS）。
• 可以獲取服務器端的二進制數據。
• 可以獲得數據傳輸的進度信息。

FormData
Web應用中頻繁使用的一項功能就是表單數據的序列化。為此，2級定義了FormData對象。
append方法可以向其添加數據，鍵值對形式
也可以直接使用表單初始化FormData：

//1.鍵值對形式,添加表單項
var data = new FormData();
data.append("name", "Nicholas");

//2.使用表單初始化FormData
var data = new FormData(document.forms[0]);

xhr.send(data);

超時設定
2級中又規定了一個timeout屬性，表示請求在等待響應多少毫秒之后就終止。設置之后，如果超時沒有接收到響應，就回觸發timeout事件，調用事件處理程序，這時xhr.readyState可能已經為4了，但是此時請求已經中止了，不能再訪問xhr.status，所以如果使用timeout，onreadystatechange事件處理也要小心。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        try {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        } catch (ex){

        }
    }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //      IE8+
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
};
xhr.send(null);

overrideMimetype()
重寫XHR響應的MIME類型，因為響應的MIME類型決定了XHR對象如何處理它。如果服務器返回的是XML文件，MIME卻是text/plain，那XHR對象就不能正確的設置responseXML。
要在send之前調用這個方法。

var xhr = createXHR();
xhr.open("get", "text.php", true); 
xhr.overrideMimeType("text/xml"); 
xhr.send(null);

雖然XMLHttpRequest 二級有很多優點，但其最致命的缺陷就是兼容性。
更多參考XMLHttpRequest Level 2 使用指南 和 MDN XMLHttpRequest

四.http普通請求和ajax請求

基于瀏覽器的http請求分為普通請求和ajax請求，普通請求都是同步執行的，ajax請求可以同步也可以異步(默認異步)。當這兩種請求到達服務端時候，我們可以通過x-requested-with這個header字段加以區分。如果是普通請求沒有這個header，取到為null。如果是ajax請求，取到是XMLHttpRequest。

本質

AJAX通xmlHttpRequest象請求服務器服務器接受請求返數據實現刷新交互
普通http請求通httpRequest象請求服務器接受請求返數據需要頁面刷新

五.為什么使用Ajax？

• 優點:
  1.使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地響應用戶動作，并避免了在網絡上發送那些沒有改變的html代碼信息。
  2.減輕服務器負擔，按需要獲得數據。
  3.無刷新更新頁面，減少用戶的實際和心理的等待時間。
  4.更好的用戶體驗。
  5.減輕寬帶的負擔。
  6.主流瀏覽器支持

• 缺點:
  1.AJAX大量使用了Javascript和AJAX引擎，而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
  2.AJAX更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要提醒用戶“數據已更新”。
  3.對搜索引擎支持不好。