怎样写网络小说,完结小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

30分鐘全面解析-圖解AJAX原理

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

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

先上原理圖:點(diǎn)我查看高清大圖

背景：

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

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

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

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

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

2.AJAX是什么?

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

4.有什么缺點(diǎn)?

一、什么是 AJAX

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

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

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

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

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

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

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

1. iframe頁面重載的方式。

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

Step1.在頁面中定義一個(gè)Iframe

 
 
 
 
  
  
  
  + View Code

Step2.設(shè)置Iframe的src

 
 
 
 
  
  
  
  + View Code

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

 
 
 
 
  
  
  
  + View Code 
  
  
  
  + View Code

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

2.AJAX方式

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

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

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

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

看下面的例子：

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

回到頂部

二、提交Form表單的原理

1.代碼

客戶端代碼：

服務(wù)端代碼：

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

2.將代碼部署到IIS

3.打開站點(diǎn)：

http://localhost:8003/Test.html

4.輸入“Jackson0714”然后點(diǎn)擊Sumbit按鈕，頁面會(huì)重新刷新，顯示"Hello World Jackson0714"

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

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

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

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

1.代碼

客戶端HTML代碼：

 
 
 
 
  
  
  
  + View Code

客戶端JS代碼:

 
 
 
 
  
  
  
  + View Code

這里有一點(diǎn)需要注意

 
 
 
 
  
  
  
  var xmlhttp = createRequest();

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

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

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

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

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

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

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

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

 
 
 
 
  
  
  
  //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.請(qǐng)求的URL中，POST方式可以添加鍵值對(duì)，也可以不添加

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

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

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

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

四、XMLHttpRequest 對(duì)象的知識(shí)

1.XMLHttpRequest 對(duì)象的方法方法描述

2.XMLHttpRequest 對(duì)象的屬性屬性描述

五、JQuery實(shí)現(xiàn)AJAX

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

客戶端JQuery代碼

 
 
 
 
  
  
  
  + View Code

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

后臺(tái)PHP代碼

 
 
 
 
  
  
  
  + View Code

六、優(yōu)勢(shì)

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é)邏輯的校驗(yàn)和從數(shù)據(jù)庫中拿數(shù)據(jù)。

七、缺點(diǎn)

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

2.大量JS代碼，容易出錯(cuò)

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

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

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

八、應(yīng)用場(chǎng)景

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

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

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

4.切換下拉列表item

5.注冊(cè)用戶名重名的校驗(yàn)

九、不適用場(chǎng)景

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

2.導(dǎo)航

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

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

分享文章：30分鐘全面解析-圖解AJAX原理
本文網(wǎng)址：http://fisionsoft.com.cn/article/dhhedoh.html

新聞中心

其他資訊