先上原理圖:
背景：
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+'¤tDate='+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能有所協助哦。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
