標籤：
背景：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" 5.AJAX發送請求和服務端返迴響應的流程高清無碼圖在這裡：點我查看大圖！！！
6.通過抓包，我們可以得到HTTP Headers
瀏覽器發送HTTP給服務端，採取的協議是HTTP協議。
在傳輸過程中，我們可以看下HTTP Headers：
7.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); }
1.請求的URL中，POST方式可以添加索引值對，也可以不添加
2.GET方式中，send方法傳遞值無效。對於IE瀏覽器可以忽略send()方法的參數。但是對於FireFox，必須提供一個null引用，否則回調行為將不規律。這是在編寫用戶端指令碼時你會發現的一個跨瀏覽器安全色的問題。
3.POST 可以用send方法發送額外資訊。發送的資訊存放在content中
4.Post方式需要指定Request Header的類型。Get方式不需要指定。
5.GET方式將參數暴露在URL中，POST不暴露。
四、XMLHttpRequest 對象的知識 1.XMLHttpRequest 對象的方法
方 法 |
描 述 |
abort() |
停止當前請求 |
getAllResponseHeaders() |
把HTTP請求的所有響應首部作為鍵/值對返回 |
getResponseHeader("header") |
返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) |
建立對伺服器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否非同步，使用者名稱，密碼。ayncFlag=ture，非同步；ayncFlag=false，同步。 |
send(content) |
向伺服器發送請求 |
setRequestHeader("header", "value") |
把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()。設定header並和請求一起發送 (‘post‘方法一定要 ) |
2.XMLHttpRequest 對象的屬性
屬 性 |
描 述 |
onreadystatechange |
狀態改變的事件觸發程序，每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數 |
readyState |
請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入，2 = 已載入，3 = 互動中，4 = 完成 |
responseText |
伺服器的響應，返回資料的文本。 |
responseXML |
伺服器的響應，返回資料的相容DOM的XML文檔對象 ，這個對象可以解析為一個DOM對象。 |
responseBody |
伺服器返回的主題（非文字格式設定） |
responseStream |
伺服器返回的資料流 |
status |
伺服器的HTTP狀態代碼（如：404 = "檔案末找到" 、200 ="成功" ，等等） |
statusText |
伺服器返回的狀態文本資訊 ，HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等） |
五、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
//定義返回的Response的格式為JSON格式 header(‘Content-type: text/json‘);
//引入自訂的資料庫連接檔案 include ‘dbConfig.php‘;
//引入自訂的設定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 = ‘‘) { //邏輯代碼
//返回JSON格式的Response echo json_encode(array(‘result‘=>$DaysOfWeekResultsArray)); }
?>
30分鐘全面解析-圖解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
