•  閱讀目錄
• 先上原理圖:
• 背景：
• 問題：
• 一、什么是 AJAX
• 二、提交Form表單的原理
• 三、AJAX提交請求和服務響應的原理
• 四、XMLHttpRequest 對象的知識
• 五、JQuery實現(xiàn)AJAX
• 六、優(yōu)勢
• 七、缺點
• 八、應用場景
• 九、不適用場景

注：文章內圖片點擊可查看高清大圖和GIF動圖

先上原理圖:點我查看高清大圖 

背景：

1.傳統(tǒng)的Web網(wǎng)站，提交表單，需要重新加載整個頁面。

2.如果服務器長時間未能返回Response，則客戶端將會無響應，用戶體驗很差。

3.服務端返回Response后，瀏覽器需要加載整個頁面，對瀏覽器的負擔也是很大的。

4.瀏覽器提交表單后，發(fā)送的數(shù)據(jù)量大，造成網(wǎng)絡的性能問題。

問題：1.如何改進?

2.AJAX是什么?

3.有什么優(yōu)勢?

4.有什么缺點?

一、什么是 AJAX  

1.為什么需要AJAX當需要從服務器獲取數(shù)據(jù)，并刷新頁面的操作，如果不采用AJAX，則需要用提交整個表單的方式，當提交表單時，發(fā)送請求給服務器，頁面需要等待服務器發(fā)送完response后，頁面才能恢復操作。

2.AJAX的概念：1.AJAX = 異步 JavaScript 和 XML。

2.AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。

3.通過在后臺與服務器進行少量數(shù)據(jù)交換，可以使網(wǎng)頁實現(xiàn)異步更新。

4.可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

3.什么叫異步當前頁面發(fā)送一個請求給服務器，當前頁面不需要等待服務器響應才能操作網(wǎng)頁。發(fā)送完請求之后，當前頁面可以繼續(xù)瀏覽，操作。

4.什么叫局部刷新我們可以用兩種方式來實現(xiàn)部分刷新。

1. iframe頁面重載的方式。

這種方式雖然實現(xiàn)了部分刷新，但是是頁面的重載，所以也會帶來性能上的問題。

Step1.在頁面中定義一個Iframe

+ View Code 

Step2.設置Iframe的src

+ View Code 

Step3.添加一個button的點擊事件，當點擊這個button時，重新設置Iframe的src，實現(xiàn)iframe里面的頁面刷新。Iframe外面的內容不刷新。

+ View Code 
+ View Code 

通過這種方式我們可以實現(xiàn)一個導航欄的功能：

2.AJAX方式

Step1.JavaScrpit發(fā)送異步請求

Step2.服務端查詢數(shù)據(jù)庫，返回數(shù)據(jù)

Step3.服務端返回Response

Step4.客戶端根據(jù)返回的Response，來用JavaScript操作DOM。

看下面的例子：

當我們切換DropDownList中的Item時，JavaScript發(fā)送異步請求給Server端，Server端返回數(shù)據(jù)，然后JavaScript將數(shù)據(jù)解析出來，拼接了一個Table，將Table呈現(xiàn)在頁面上。

回到頂部

二、提交Form表單的原理

1.代碼

客戶端代碼：

<form id="form1" action="Test.ashx" method="get"> 
            您的姓名1：<input type="text" name="fname" size="20" /> 
            <input type="submit" name="submit" value="Sumbit"> 
 </form> 

服務端代碼：

public void ProcessRequest (HttpContext context) 
{ 
        //Delay 
        for (int i = 0; i < 2; i++) 
        { 
            System.Threading.Thread.Sleep(1000); 
        } 
   
         //從Requset.Form中獲取fname的值。使用Form獲取請求的鍵值對的值的前提條件是HTTP request Content-Type 值必須是"application/x-www-form-urlencoded" 或 "multipart/form-data". 
        string fname = context.Request["fname"]; 
  
        context.Response.ContentType = "text/plain"; 
    //將字符串寫入 HTTP 響應輸出流。 
        context.Response.Write("Hello World " + fname); 
 } 

2.將代碼部署到IIS

3.打開站點：

http://localhost:8003/Test.html

4.輸入“Jackson0714”然后點擊Sumbit按鈕，頁面會重新刷新，顯示"Hello World Jackson0714"

5.提交Form表單后，頁面發(fā)送請求和服務端返回響應的流程

6.通過抓包，我們可以得到HTTP Headers瀏覽器發(fā)送HTTP給服務端，采取的協(xié)議是HTTP協(xié)議。

在傳輸過程中，我們可以看下HTTP Headers。

三、AJAX提交請求和服務響應的原理

1.代碼

客戶端HTML代碼：

+ View Code 

客戶端JS代碼:

+ View Code 

這里有一點需要注意

var xmlhttp = createRequest();  

1.讓服務端能夠操作這個變量，如果定義成局部變量，則服務端返回response時，不能對xmlhttp的屬性賦值?；卣{函數(shù)要求request是全局的，才能訪問這個變量和它的屬性值。

2.定義成全局變量后，可能出現(xiàn)兩個請求或多個請求共享同一個請求對象。而這個請求對象只能存放一個回調函數(shù)來處理服務器響應。當服務器返回兩個請求的Response后，可能會調用后指定的回調函數(shù)。所以可能有兩個完全不同的服務器響應由同一個回調函數(shù)處理，而這可能并不是正確的處理。解決辦法是創(chuàng)建兩個不同的請求對象。

服務端代碼不變。

2.輸入“Jackson0714”然后點擊Sumbit按鈕，頁面不會刷新，在最下面顯示"Hello World Jackson0714"

5.AJAX發(fā)送請求和服務端返回響應的流程

6.通過抓包，我們可以得到HTTP Headers瀏覽器發(fā)送HTTP給服務端，采取的協(xié)議是HTTP協(xié)議。

在傳輸過程中，我們可以看下HTTP Headers：

7.AJAX GET和POST方式區(qū)別AJAX發(fā)送請求和POST發(fā)送請求的代碼如下：

//GET方式 
function testGet() { 
    var fname = document.getElementById("testGetName").value; 
    xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true); 
xmlhttp.onreadystatechange = callback; 
    xmlhttp.send(null); 
} 
   
//POST方式 
function testPost() { 
    var fname = document.getElementById("testPostName").value; 
    xmlhttp.open("POST", "Test.ashx?"  + "&random=" + Math.random() , true); 
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); 
   xmlhttp.onreadystatechange = callback; 
    xmlhttp.send("fname="+fname); 
     
} 

1.請求的URL中，POST方式可以添加鍵值對，也可以不添加

2.GET方式中，send方法傳遞值無效。對于IE瀏覽器可以忽略send()方法的參數(shù)。但是對于FireFox，必須提供一個null引用，否則回調行為將不規(guī)律。這是在編寫客戶端腳本時你會發(fā)現(xiàn)的一個跨瀏覽器兼容的問題。

3.POST 可以用send方法發(fā)送額外信息。發(fā)送的信息存放在content中

4.Post方式需要指定Request Header的類型。Get方式不需要指定。

5.GET方式將參數(shù)暴露在URL中，POST不暴露。

四、XMLHttpRequest 對象的知識

1.XMLHttpRequest 對象的方法方 法描 述

2.XMLHttpRequest 對象的屬性 屬 性描 述

五、JQuery實現(xiàn)AJAX

下面的代碼實現(xiàn)了當切換DropDownList的item時，觸發(fā)getWeeklyCalendar方法，用JQuery的類庫方法$.ajax來發(fā)送AJAX請求。

客戶端JQuery代碼

+ View Code 

后臺成功返回Response后，執(zhí)行paintWeeklyCandler(data)方法

后臺PHP代碼

+ View Code 

六、優(yōu)勢

1.使用異步方式與服務器通信，頁面不需要重新加載，頁面無刷新

2.按需取數(shù)據(jù)，減少服務器的負擔

3.使得Web應用程序更為迅捷地響應用戶交互

4.AJAX基于標準化的并被廣泛支持的技術，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行

5.瀏覽器的內容和服務端代碼進行分離。頁面的內容全部由JAVAScript來控制，服務端負責邏輯的校驗和從數(shù)據(jù)庫中拿數(shù)據(jù)。

七、缺點

1.安全問題：將服務端的方法暴露出來，黑客可利用這一點進行攻擊

2.大量JS代碼，容易出錯

3.Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾——用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過的;現(xiàn)有的解決有：在相關位置提示、數(shù)據(jù)更新的區(qū)域設計得比較明顯、數(shù)據(jù)更新后給用戶提示等

4.可能破壞瀏覽器后退按鈕的正常行為;

5.一些手持設備(如手機、PAD等)自帶的瀏覽器現(xiàn)在還不能很好的支持Ajax

八、應用場景

1.對數(shù)據(jù)進行過濾和操縱相關數(shù)據(jù)的場景

2.添加/刪除樹節(jié)點

3.添加/刪除列表中的某一行記錄

4.切換下拉列表item

5.注冊用戶名重名的校驗

九、不適用場景

1.整個頁面內容的保存

2.導航

【本文為51CTO專欄作者“黃哲”的原創(chuàng)稿件，轉載請通過51CTO聯(lián)系作者獲取授權】

戳這里，看該作者更多好文