日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
30分鐘全面解析-圖解AJAX原理
  •  閱讀目錄
  • 先上原理圖:
  • 背景：
  • 問題：
  • 一、什么是 AJAX
  • 二、提交Form表單的原理
  • 三、AJAX提交請求和服務(wù)響應(yīng)的原理
  • 四、XMLHttpRequest 對象的知識
  • 五、JQuery實現(xiàn)AJAX
  • 六、優(yōu)勢
  • 七、缺點
  • 八、應(yīng)用場景
  • 九、不適用場景

注：文章內(nèi)圖片點擊可查看高清大圖和GIF動圖

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

背景：

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

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

3.服務(wù)端返回Response后，瀏覽器需要加載整個頁面，對瀏覽器的負(fù)擔(dān)也是很大的。

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

問題：1.如何改進(jìn)?

2.AJAX是什么?

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

4.有什么缺點?

一、什么是 AJAX  

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

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

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

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

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

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

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

1. iframe頁面重載的方式。

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

Step1.在頁面中定義一個Iframe

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

Step2.設(shè)置Iframe的src

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

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

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2. 
  
  
  
  
  2. + View Code 
    3.

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

2.AJAX方式

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

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

Step3.服務(wù)端返回Response

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

看下面的例子：

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

回到頂部

二、提交Form表單的原理

1.代碼

客戶端代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.             您的姓名1： 
    3. 
  
  
  
  
  3.              
    4. 
  
  
  
  
  4.   
    5.

服務(wù)端代碼：

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

2.將代碼部署到IIS

3.打開站點：

http://localhost:8003/Test.html

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

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

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

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

三、AJAX提交請求和服務(wù)響應(yīng)的原理

1.代碼

客戶端HTML代碼：

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

客戶端JS代碼:

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

這里有一點需要注意

 
 
 
 
    
  
  
  
  
  1. var xmlhttp = createRequest();  
    2.

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

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

服務(wù)端代碼不變。

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. //GET方式 
    2. 
  
  
  
  
  2. function testGet() { 
    3. 
  
  
  
  
  3.     var fname = document.getElementById("testGetName").value; 
    4. 
  
  
  
  
  4.     xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true); 
    5. 
  
  
  
  
  5. xmlhttp.onreadystatechange = callback; 
    6. 
  
  
  
  
  6.     xmlhttp.send(null); 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9. //POST方式 
    10. 
  
  
  
  
  10. function testPost() { 
    11. 
  
  
  
  
  11.     var fname = document.getElementById("testPostName").value; 
    12. 
  
  
  
  
  12.     xmlhttp.open("POST", "Test.ashx?"  + "&random=" + Math.random() , true); 
    13. 
  
  
  
  
  13.     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); 
    14. 
  
  
  
  
  14.    xmlhttp.onreadystatechange = callback; 
    15. 
  
  
  
  
  15.     xmlhttp.send("fname="+fname); 
    16. 
  
  
  
  
  16.      
    17. 
  
  
  
  
  17. } 
    18.

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

2.GET方式中，send方法傳遞值無效。對于IE瀏覽器可以忽略send()方法的參數(shù)。但是對于FireFox，必須提供一個null引用，否則回調(diào)行為將不規(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)了當(dāng)切換DropDownList的item時，觸發(fā)getWeeklyCalendar方法，用JQuery的類庫方法$.ajax來發(fā)送AJAX請求。

客戶端JQuery代碼

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

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

后臺PHP代碼

 
 
 
 
    
  
  
  
  
  1. + View Code 
    2.

六、優(yōu)勢

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

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

3.使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互

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

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

七、缺點

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

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

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

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

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

八、應(yīng)用場景

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

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

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

4.切換下拉列表item

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

九、不適用場景

1.整個頁面內(nèi)容的保存

2.導(dǎo)航

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

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


當(dāng)前題目：30分鐘全面解析-圖解AJAX原理
當(dāng)前地址：http://www.dlmjj.cn/article/dhhedoh.html