首先，我們來回顧下ajax是什麼?

Ajax = 非同步 JavaScript 和XML。

Ajax是一種用於建立快速動態網頁的技術。

通過在後臺與伺服器進行少量資料交換，Ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁(不使用 Ajax)如果需要更新內容，必須過載整個網頁面

前面談到ajax是什麼，其主要也就是非同步提交，大家是否知道同步和非同步提交的區別嗎?

同步提交：當使用者傳送請求時，當前頁面不可以使用，伺服器響應頁面到客戶端，響應完成，使用者才可以使用頁面。
非同步提交：當使用者傳送請求時，當前頁面還可以繼續使用，當非同步請求的資料響應給頁面，頁面把資料顯示出來。

Ajax工作原理

客戶端傳送請求，請求交給xhr，xhr把請求提交給服務，伺服器進行業務處理，伺服器響應資料交給xhr物件，xhr物件接收資料，由javascript把資料寫到頁面上，如下圖所示：

Ajax請求的五個步驟：

//第一步，建立XMLHttpRequest物件var xmlHttp = new XMLHttpRequest();function CommentAll() {//第二步，註冊回撥函式xmlHttp.onreadystatechange =callback1;//{
    //    if (xmlHttp.readyState == 4)
    //        if (xmlHttp.status == 200) {
    //            var responseText = xmlHttp.responseText;
    //        }
    //}//第三步，配置請求資訊，open(),get
     //get請求下引數加在url後，.ashx?methodName = GetAllComment&str1=str1&str2=str2
      xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);    //post請求下需要配置請求頭資訊
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //第四步，傳送請求,post請求下，要傳遞的引數放這
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"}//第五步，建立回撥函式function callback1() {    if (xmlHttp.readyState == 4)        if (xmlHttp.status == 200) {            //取得返回的資料
            var data = xmlHttp.responseText;            //json字串轉為json格式
            data = eval(data);
            $.each(data,                function(i, v) {
                    alert(v);
                });       
        }
}//後臺方法
 public  void GetAllComment(HttpContext context)
        {            //Params可以取得get與post方式傳遞過來的值。
            string methodName = context.Request.Params["methodName"];            //QueryString只能取得get方式傳遞過來的值。
            string str1 = context.Request.Form["str1"];            //取得httpRequest傳來的值，包括get與post方式
            string str2 = context.Request["str2"];
            List comments = new List();
            comments.Add(methodName);
            comments.Add(str1);
            comments.Add(str2);            //ajax接受的是json型別，需要把返回的資料轉給json格式
            string commentsJson = new JavaScriptSerializer().Serialize(comments);
            context.Response.Write(commentsJson);
        }

1. 建立xmlHttpRequest物件

2. 設定回撥函式

3. 使用open方法與伺服器建立連結

4. 向伺服器傳送資料

5. 在回撥函式中針對不同的響應狀態進行處理

AJAX是有很多用處的，接下來給大家介紹AJAX需要掌握的幾個功能點：

1. 建立原生Ajax物件

XMLHttpRequest 是 AJAX 的基礎，所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 物件。那麼我們下面來建立一個ajax物件

const instance = new XMLHttpRequest();

這樣我們就建立了一個用於進行ajax互動的物件。

當然我們這兒提及一下老版本的ie5、ie6的javascript物件都是使用ActiveX來實現的標準，所以沒有XMLHttpRequest物件。他們建立一個物件使用這種方式

const instance = new ActiveXObject("Microsoft.XMLHTTP");

其實我們瞭解一下就行了，這塊在你的程式碼也不用加上了，現在所有的網站應該都放棄了對低版本ie的支援，這個已經退出了歷史舞臺，瞭解一下情況即可。

2. Ajax傳送請求

首先來看一下XMLHttpRequest如何傳送一個請求到伺服器

const instance = new XMLHttpRequest();
 
instance.open(method,url,async);
 
instance.send();

這裡用到了兩個方法，第一個open方法其實是配置ajax必要的資訊，第二個send才是真正的發起請求到伺服器。

3. Ajax通過readyState狀態的變化接收伺服器響應

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務，每當 readyState 改變時，就會觸發 onreadystatechange 事件，readyState 屬性存有 XMLHttpRequest 的狀態資訊。

4. 進級苦惱之跨域請求

跨域是所有前端都必須去面對的一個棘手的問題，當你去請求其他伺服器的資源時，瀏覽器安全限制會阻止該請求。你的請求不會到底伺服器，被瀏覽器阻止了，這也是遵循了同源策略。

那麼如何去解決這個跨域呢，通用的有幾種方法，但是核心都是需要伺服器去配合處理跨域，前端自己無法處理跨域。

第一個採用JsonP方法，這個方法其實也是需要後臺去配合處理，由後臺來進行請求，然後將資料拼裝在一個json物件返回到前臺，然後前臺通過callback函式來進行操作。這個也比較繁瑣。
第二種就是服務端去放一個跨域檔案crossdomain.xml放置到伺服器端，然後寫上可以跨域的ip地址。
第三種配置反向代理伺服器，通過代理伺服器我們也其實是代理伺服器去請求外圍，然後轉發到我們的伺服器上。這樣也可以防止跨域。

以上就是AJAX的知識總結，最後也推薦大家觀看ajax的視訊去學習，對於新手更易理解吸收，動力節點的Ajax學習教程，通過對ajax的傳統使用方式，結合json操作的方式，結合跨域等高階技術的方式，對ajax做一個全面的講解。

Ajax教程配套資料下載：見評論區！！！！

Ajax基礎原理及使用教程（來自動力節點ajax教程）