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

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

Ajax技術(shù)是基于js語言的擴(kuò)展，能夠通過將請求發(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ā)送請求， 接收響應(yīng)數(shù)據(jù)XML： 發(fā)送和接收的數(shù)據(jù)格式，現(xiàn)在使用json

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

全局刷新和局部刷新

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

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

全局刷新

登錄請求處理：

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

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

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

服務(wù)器端應(yīng)答結(jié)果階段：

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

全局刷新原理：

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

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

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

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

局部刷新

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

局部刷新原理：

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

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

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

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

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

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

異步請求對象：

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

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

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

XMLHttpRequest 對象能夠：

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

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

在頁面已加載后從服務(wù)器接收數(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 事件

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

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

語法：

xmlHttp．onreadystatechange＝ function（） ｛

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

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

｝

｝

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

屬性說明：

onreadystatechange 屬性：一個 js 函數(shù)名 或 直接定義函數(shù)，每當(dāng)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： 異步對象接收應(yīng)答數(shù)據(jù) 從服務(wù)端返回數(shù)據(jù)。XMLHttpRequest 內(nèi)部處理。

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