圖文解析AJAX的原理_AJAX相關

來源:互聯網
上載者:User

先上原理圖:

 

 

 

背景:

     1.傳統的Web網站,提交表單,需要重新載入整個頁面。

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

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

     4.瀏覽器提交表單後,發送的資料量大,造成網路的效能問題。

問題:

     1.如何改進?

     2.AJAX是什嗎?

     3.有什麼優勢?

     4.有什麼缺點?

一、什麼是 AJAX

1.為什麼需要AJAX

當需要從伺服器擷取資料,並重新整理頁面的操作,如果不採用AJAX,則需要用提交整個表單的方式,當提交表單時,發送請求給伺服器,頁面需要等待伺服器發送完response後,頁面才能恢複操作。

2.AJAX的概念:

     1.AJAX = 非同步 JavaScript 和 XML。

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

     3.通過在後台與伺服器進行少量資料交換,可以使網頁實現非同步更新。

     4.可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。

3.什麼叫非同步

當前頁面發送一個請求給伺服器,當前頁面不需要等待伺服器響應才能操作網頁。發送完請求之後,當前頁面可以繼續瀏覽,操作。

4.什麼叫局部重新整理

我們可以用兩種方式來實現部分重新整理。

1. iframe頁面重載的方式。

這種方式雖然實現了部分重新整理,但是是頁面的重載,所以也會帶來效能上的問題。

Step1.在頁面中定義一個Iframe

<iframe id="indexFrame" name="index" width="1000" height="800"    frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>

Step2.設定Iframe的src

var indexFrame = document.getElementById("indexFrame");indexFrame.src = "introduction.php";

Step3.添加一個button的點擊事件,當點擊這個button時,重新設定Iframe的src,實現iframe裡面的頁面重新整理。Iframe外面的內容不重新整理。

<button id="room" onclick='IndexClick("room")'>Click Me!</button>
function IndexClick(moduleKey) { var indexFrame = document.getElementById("indexFrame"); if(indexFrame == null) {   indexFrame = parent.document.getElementById("indexFrame"); } var url = "introduction.php"; switch (moduleKey) {  case "introduction":   url = "introduction.php";   break;  case "room":   url = "room.php";   break;  default:   {   } } indexFrame.src = url;}

通過這種方式我們可以實現一個導覽列的功能:

    

  2.AJAX方式

    Step1.JavaScrpit發送非同步請求

    Step2.服務端查詢資料庫,返回資料

    Step3.服務端返回Response

    Step4.用戶端根據返回的Response,來用JavaScript操作DOM。

  看下面的例子:

  

  當我們切換DropDownList中的Item時,JavaScript發送非同步請求給Server端,Server端返回資料,然後JavaScript將資料解析出來,拼接了一個Table,將Table呈現在頁面上。

二、提交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表單後,頁面發送請求和服務端返迴響應的流程 

6.通過抓包,我們可以得到HTTP Headers

瀏覽器發送HTTP給服務端,採取的協議是HTTP協議。

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

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

1.代碼

用戶端HTML代碼:

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="Ajax.js"></script> </head><body> <div id="Test" style="background-color:#40eeee">  您的姓名2:<input type="text" id="testGetName" size="20" />  <button type="button" onclick="testGet();">Ajax Get請求</button> </div>    <div id="Test" style="background-color:#ff6a00">  您的姓名3:<input type="text" id="testPostName" size="20" />  <button type="button" onclick="testPost();">Ajax Post請求</button> </div>  <div id="myDiv" /> </body></html>

用戶端JS代碼:

var xmlhttp = createRequest(); 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);} 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); } function createRequest() { var xmlhttp; if (window.XMLHttpRequest) {  // code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp = new XMLHttpRequest(); } else {  // code for IE6, IE5  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp} function callback() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }}

這裡有一點需要注意

var xmlhttp = createRequest(); 。

       1.讓服務端能夠操作這個變數,如果定義成局部變數,則服務端返回response時,不能對xmlhttp的屬性賦值。回呼函數要求request是全域的,才能訪問這個變數和它的屬性值。

       2.定義成全域變數後,可能出現兩個請求或多個請求共用同一個請求對象。而這個請求對象只能存放一個回呼函數來處理伺服器響應。當伺服器返回兩個請求的Response後,可能會調用後指定的回呼函數。所以可能有兩個完全不同的伺服器響應由同一個回呼函數處理,而這可能並不是正確的處理。解決辦法是建立兩個不同的請求對象。 

服務端代碼不變。

2.輸入“Jackson0714”然後點擊Sumbit按鈕,頁面不會重新整理,在最下面顯示"Hello World Jackson0714"

3.AJAX發送請求和服務端返迴響應的流程

 

 

4.通過抓包,我們可以得到HTTP Headers

瀏覽器發送HTTP給服務端,採取的協議是HTTP協議。

在傳輸過程中,我們可以看下HTTP Headers:

 

5.AJAX  GET和POST方式區別

AJAX發送請求和POST發送請求的代碼如下:

//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); }

四、XMLHttpRequest 對象的知識

1.XMLHttpRequest 對象的方法

 2.XMLHttpRequest 對象的屬性

五、JQuery實現AJAX

下面的代碼實現了當切換DropDownList的item時,觸發getWeeklyCalendar方法,用JQuery的類庫方法$.ajax來發送AJAX請求。

用戶端JQuery代碼

function getWeeklyCalendar(name,currentDate,mode){ $.ajax({  type:'POST',  url:'weekProcess.php',data:'func=getWeeklyCalender&name='+name+'&currentDate='+currentDate+'& mode='+mode,  success:function(data){  paintWeeklyCandler(data);  } });}

後台成功返回Response後,執行paintWeeklyCandler(data)方法

後台PHP代碼

<?php<br> //定義返回的Response的格式為JSON格式 header('Content-type: text/json');<br> //引入自訂的資料庫連接檔案 include 'dbConfig.php';<br> //引入自訂的設定session的檔案 include_once 'session.php'; /* * Function requested by Ajax */ if(isset($_POST['func']) && !empty($_POST['func'])) {  switch($_POST['func']){    case 'getWeeklyCalender':      getWeeklyCalender($_POST['name'],$_POST['currentDate'],$_POST['mode']);       break;     case 'getWeeklyStatus':      getWeeklyStatus($_POST['name'],$_POST['currentDate'],$_POST['mode']);      break;     case 'getEvents':      getEvents($_POST['date'],$_POST['name']);      break;    default:      break; }} function getWeeklyCalender($name = '',$currentDate = '',$mode = '') {  //邏輯代碼<br>    <br>  <br>    //返回JSON格式的Response  echo json_encode(array('result'=>$DaysOfWeekResultsArray)); }<br>?>

六、優勢

     1.使用非同步方式與伺服器通訊,頁面不需要重新載入,頁面無重新整理

     2.按需取資料,減少伺服器的負擔

     3.使得Web應用程式更為迅捷地響應使用者互動

     4.AJAX基於標準化的並被廣泛支援的技術,不需要下載瀏覽器外掛程式或者小程式,但需要客戶允許JavaScript在瀏覽器上執行

     5.瀏覽器的內容和服務端代碼進行分離。頁面的內容全部由JAVAScript來控制,服務端負責邏輯的校正和從資料庫中拿資料。

七、缺點

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

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

     3.Ajax的無重新整理重載,由於頁面的變化沒有重新整理重載那麼明顯,所以容易給使用者帶來困擾——使用者不太清楚現在的資料是新的還是已經更新過的;現有的解決有:在相關位置提示、資料更新的地區設計得比較明顯、資料更新後給使用者提示等

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

     5.一些手持功能(如手機、PAD等)內建的瀏覽器現在還不能很好的支援Ajax

八、應用情境

     1.對資料進行過濾和操縱相關資料的情境

     2.添加/刪除樹節點

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

     4.切換下拉式清單item

     5.註冊使用者名稱重名的校正

九、不適用情境

     1.整個頁面內容的儲存

     2.導航

十、總結

以上就是本文的全部內容,文章寫的很詳細,希望對大家學習ajax能有所協助哦。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.