傳統(tǒng)開發(fā)的缺點，是對于瀏覽器的頁面，全部都是全局刷新的體驗。如果我們只是想取得或是更新頁面中的部分信息那么就必須要應用到局部刷新的技術(shù)。

局部刷新也是有效提升用戶體驗的一種非常重要的方式。

Ajax技術(shù)是基于js語言的擴展，能夠通過將請求發(fā)送給后臺，并從后臺取得相關(guān)數(shù)據(jù)，然后將數(shù)據(jù)在頁面做局部刷新的重要技術(shù)。

本教程會通過對ajax的傳統(tǒng)使用方式，結(jié)合json操作的方式，結(jié)合跨域等高級技術(shù)的方式，對ajax做一個全面的講解。

什么是Ajax？

AJAX ＝ Asynchronous JavaScript and XML（異步的 JavaScript 和XML）。

AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分頁面內(nèi)容的新方法

AJAX 不是新的編程語言，而是使用現(xiàn)有技術(shù)混合使用的一種新方法。ajax 中使用的技術(shù)有JavaScript， html ， dom ， xml ，css 等。主要是JavaScript ， XML．

JavaScript： 使用腳本對象XMLHttpRequest 發(fā)送請求， 接收響應數(shù)據(jù)XML： 發(fā)送和接收的數(shù)據(jù)格式，現(xiàn)在使用json

AJAX 不單需要前端的技術(shù)，同時需要后端（服務器）的配合。服務器需要提供數(shù)據(jù)，數(shù)據(jù)是AJAX 請求的響應結(jié)果。

全局刷新和局部刷新

B／S 結(jié)構(gòu)項目中， 瀏覽器（Browse）負責把用戶的請求和參數(shù)通過網(wǎng)絡發(fā)送給服務器（Server），服務端使用 Servlet（多種服務端技術(shù)的一種）接收請求，并將處理結(jié)果返回給瀏覽器。

瀏覽器在html，jsp 上呈現(xiàn)數(shù)據(jù)，混合使用css， js 幫助美化頁面，或響應事件。

全局刷新

登錄請求處理：

index．jsp 發(fā)起登錄請求－－－－－－－－LoginServlet result．jsp

發(fā)起請求request 階段：

瀏覽器現(xiàn)在內(nèi)存中是index 頁面的內(nèi)容和數(shù)據(jù) ：

服務器端應答結(jié)果階段：

sevlet 返回后把數(shù)據(jù)全部覆蓋掉原來index 頁面內(nèi)容， result．jsp 覆蓋了全部的瀏覽器內(nèi)存數(shù)據(jù)。 整個瀏覽器數(shù)據(jù)全部被刷新。重新在瀏覽器窗口顯示數(shù)據(jù)，樣式，標簽等

全局刷新原理：

1） 必須由瀏覽器親自向服務端發(fā)送請求協(xié)議包。

2） 這個行為導致服務端直接將【響應包】發(fā)送到瀏覽器內(nèi)存中

3） 這個行為導致瀏覽器內(nèi)存中原有內(nèi)容被覆蓋掉

4） 這個行為導致瀏覽器在展示數(shù)據(jù)時候，只有響應數(shù)據(jù)可以展示

局部刷新

瀏覽器在展示數(shù)據(jù)時，此時在窗口既可以看到本次的響應數(shù)據(jù)， 同時又可以看到瀏覽器內(nèi)存中原有數(shù)據(jù)

局部刷新原理：

1） 不能由瀏覽器發(fā)送請求給服務端

2） 瀏覽器委托瀏覽器內(nèi)存中一個腳本對象代替瀏覽器發(fā)送請求．

3） 這個行為導致導致服務端直接將【響應包】發(fā)送腳本對象內(nèi)存中

4） 這個行為導致腳本對象內(nèi)容被覆蓋掉，但是此時瀏覽器內(nèi)存中絕大部分內(nèi)容沒有收到任何影響

5） 這個行為導致瀏覽器在展示數(shù)據(jù)時候，同時展示原有數(shù)據(jù)和響應數(shù)據(jù)

AJAX 實現(xiàn)局部刷新的一種技術(shù)。

異步請求對象：

在局部刷新，需要創(chuàng)建一個對象，代替瀏覽器發(fā)起請求的行為，這個對象存在內(nèi)存中。

代替瀏覽器發(fā)起請求并接收響應數(shù)據(jù)。這個對象叫做異步請求對象。

全局刷新是同步行為， 局部刷新是異步行為［瀏覽器數(shù)據(jù)沒有全部更新］ 這個異步對象用于在后臺與服務器交換數(shù)據(jù)。XMLHttpRequest 就是我們說的異步對象。

XMLHttpRequest 對象能夠：

在不重新加載頁面的情況下更新網(wǎng)頁

在頁面已加載后向服務器請求數(shù)據(jù)

在頁面已加載后從服務器接收數(shù)據(jù)

所有現(xiàn)代瀏覽器 （IE7＋、Firefox、Chrome、Safari 以及 Opera） 都內(nèi)建了 XMLHttpRequest 對象。通過一行簡單的 JavaScript 代碼，我們就可以創(chuàng)建 XMLHttpRequest 對象

創(chuàng)建 XMLHttpRequest 對象的語法（xhr）： var xmlhttp＝new XMLHttpRequest（）；

AJAX 中的核心對象就是XMLHttpRequest

AJAX 異步實現(xiàn)步驟

XMLHttpRequest 對象介紹

（1） 創(chuàng)建對象方式

var xmlHttp ＝ new XMLHttpRequest（）；

（2） onreadstatechange 事件

當請求被發(fā)送到服務器時，我們需要執(zhí)行一些基于響應的任務。每當readyState 改變時，就會觸發(fā) onreadystatechange 事件。此事件可以指定一個處理函數(shù)function。

通過判斷XMLHttpReqeust 對象的狀態(tài)，獲取服務端返回的數(shù)據(jù)。

語法：

xmlHttp．onreadystatechange＝ function（） ｛

if（ xmlHttp．readyState ＝＝ 4 ＆＆ xmlHttp．status ＝＝ 200）｛

處理服務器返回數(shù)據(jù)

｝

｝

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性說明：

onreadystatechange 屬性：一個 js 函數(shù)名 或 直接定義函數(shù)，每當readyState 屬性改變時，就會調(diào)用該函數(shù)

readyState 屬性：

存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

? 0： 請求未初始化，創(chuàng)建異步請求對象 var xmlHttp ＝ new XMLHttpRequest（）

? 1： 初始化異步請求對象， xmlHttp．open（請求方式，請求地址，true）

? 2： 異步對象發(fā)送請求， xmlHttp．send（）

? 3： 異步對象接收應答數(shù)據(jù) 從服務端返回數(shù)據(jù)。XMLHttpRequest 內(nèi)部處理。

? 4： 異步請求對象已經(jīng)將數(shù)據(jù)解析完畢。 此時才可以讀取數(shù)據(jù)。