---

一、Ajax介紹

在學習了前面知識內容後，我們已經可以說非常靈活的處理瀏覽器發起的請求了。還有一門非常重要的技術，也就是 Ajax 需要我們來掌握。 AsynchronousJavascriptAndXML 我們首先要明確一個概念——當前請求頁
當前請求頁並不一定指瀏覽器的標籤頁，可能是標籤頁的單獨區域。如果單個區域發起了請求，那麼這個請求也可以成為“當前請求頁” （1）問題： 目前瀏覽器向伺服器發起請求的方式有 form 標籤、超連結、還有指令碼語言(js\jquery)中的window.location.href 方式和表單提交函式這幾種。但是不管哪種提交方式，瀏覽器都會將接收到的響應內容覆蓋在請求網頁中顯示，但是怎麼在保留請求網頁內容的基礎顯示新的內容呢？ （2）解決： 使用 Ajax 技術； Ajax物件引擎傳送、接收資訊就不會覆蓋； （3）使用:

二、Ajax使用

前臺:

//1.建立ajax核心物件—— XMLHttpRequest 物件
var xhr = new XMLHttpRequest();

//2.給定請求方式以及請求地址
xhr.open("get","http://www.example.com");

//3.傳送請求
xhr.send();

//4.獲取伺服器端給客戶端的響應資料
//由於每當狀態碼readyState 改變時，就會觸發 onreadystatechange 事件，因此需要讓xhr的onreadystatechange屬性引用一個函式地址，
//函式裡我們規定當伺服器已響應時所執行的任務。
xhr.onreadystatechange = function(){ 
　　
 
//狀態碼為0說明open()沒有被呼叫
　　//狀態碼為1說明open()正在被呼叫 
　　//狀態為2:send()正在被呼叫 
　　//狀態碼3:服務端正在返回結果
　　//狀態碼4:請求結束，並且服務端已經結束髮送資料到客戶端 ，可以通過xhr.responseText來獲取資料
　　if(xhr.readyState == 4 && xhr.status == 200){      
　　　　document.getElementById("span").innerHTML=xhr.responseText; 
　　　　alert(xhr.responseText); } 
}

後臺:

目前返回了一個字串，以後可能會返回一個json串

1. Ajax 狀態碼——readystate的值：

• 0：表示ajax引擎物件建立；
• 1：表示請求建立，但是還未傳送；相當於執行到了ajax.open("get","my")這句程式碼，但還未執行到ajax.send()這句程式碼
• 2：表示請求已經發送了；相當於執行到了ajax.send（）這句程式碼；
• 3：表示伺服器已經將請求處理完畢，ajax物件正在接受響應內容；
• 4：表示響應內容接收完畢；

通過Ajax狀態碼，我們可以知道瀏覽器進行到哪一步了； 2. Ajax 的響應狀態碼：

• 200：表示一切正常
• 404：表示資源未找到
• 500：表示內部伺服器出錯了；（可能是servlet程式碼編寫錯誤）

3. Ajax 的非同步和同步 Ajax 的請求：

• Get 請求方式
• Post 請求方式

Ajax 的響應：

• 普通文字
• JSON 資料格式

Ajax 的封裝

• Ajax 完成三級聯動
• jquery 中的 ajax
• ajax 完成搜尋框關鍵字提示語

三、原理

ajax的基本原理

• 通過html的某個事件，呼叫js的某個函式，在js的函式裡寫ajax如何寫？
• new以後ajax的核心物件xmlhttprequest
• send方法
• 把接受伺服器返回資料的函式賦給xhr的某個屬性，通過呼叫這個屬性回撥這個函式，然後做邏輯判斷
• 在函式裡把伺服器返回的屬性寫入html

和以前前後端互動方式的區別：

一個是控制單元使用請求轉發或重定向
一個是控制單元使用流併發送給ajax

以前我們是通過控制單元的邏輯判斷進行請求轉發或者重定向，由於請求轉發和重定向是傳送給瀏覽器渲染的，所以會實現整個頁面的重新整理。
現在我們的控制單元邏輯判斷後，把結果當做一個流推出給ajax，ajax實現整個頁面的區域性頁面的重新整理。