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

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

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

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

什么是Ajax？

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

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

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

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

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

全局刷新和局部刷新

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

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

全局刷新

登錄請(qǐng)求處理：

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

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

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

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

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

全局刷新原理：

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

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

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

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

局部刷新

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

局部刷新原理：

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

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

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

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

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

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

異步請(qǐng)求對(duì)象：

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

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

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

XMLHttpRequest 對(duì)象能夠：

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

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

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

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

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

AJAX 中的核心對(duì)象就是XMLHttpRequest

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

XMLHttpRequest 對(duì)象介紹

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

var xmlHttp ＝ new XMLHttpRequest（）；

（2） onreadstatechange 事件

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

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

語(yǔ)法：

xmlHttp．onreadystatechange＝ function（） ｛

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

處理服務(wù)器返回?cái)?shù)據(jù)

｝

｝

下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

屬性說(shuō)明：

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

readyState 屬性：

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

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

? 1： 初始化異步請(qǐng)求對(duì)象， xmlHttp．open（請(qǐng)求方式，請(qǐng)求地址，true）

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

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

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