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

status 屬性：

200: "OK"

404: 未找到頁面

（1）?初始化請求參數(shù)：

方法：

open(method,url,async) ： 初始化異步請求對象

?參數(shù)說明：

• method：請求的類型；GET?或 POST

• url：服務(wù)器的servlet?地址

• async：true（異步）或 false（同步）

例如 :?

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

（2）?發(fā)送請求

xmlHttp.send()

（3）?接收服務(wù)器響應(yīng)的數(shù)據(jù)

如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對象的

responseText 或 responseXML 屬 性 。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)

AJAX?實例

全局刷新計算 bmi

需求：計算某個用戶的BMI。 用戶在jsp 輸入自己的身高，體重；servlet 中計算BMI，并顯示 BMI 的計算結(jié)果和建議。

BMI 指數(shù)（即身體質(zhì)量指數(shù)，英文為BodyMassIndex，簡稱 BMI），是用體重公斤數(shù)除以身高米數(shù)平方得出的數(shù)字，是目前國際上常用的衡量人體胖瘦程度以及是否健康的一個標(biāo)準(zhǔn)

成人的 BMI 數(shù)值：

1）過輕：低于 18.5

2）正常：18.5-23.9

3）過重：24-27

4）肥胖：28-32

5）非常肥胖,高于 32

?

開發(fā)步驟：

1.?在idea?中創(chuàng)建新的工程，名稱：ch01-bmi-ajax

2.?配置tomcat?服務(wù)器，如果已經(jīng)配置，省略此步驟。

• 選擇Local

• 配置tomcat 服務(wù)器的位置

• Module 添加tomcat 支持

• 出現(xiàn)窗口
  

• 選擇 2 Library

• 確定使用tomcat

3.?創(chuàng)建 jsp，定義form，有參數(shù)name， weight， height

4.?創(chuàng)建 Servlet， 名稱 BMIServlet

5.?注冊 servlet

6.?創(chuàng)建 result.jsp

web 目錄下創(chuàng)建 result.jsp 文件

6.配置運(yùn)行程序，輸入?yún)?shù)。顯示bmi

?使用HttpServletResponse?響應(yīng)輸出

1.?新建jsp： indexPrint.jsp

2.?新建Servlet, 名稱 BMIServeltPrint

使用 ajax?請求，計算 bmi

1.?新建ajax.jsp

2.?在ajax.jsp?的head?部分指定 doAjax()函數(shù)

3.?復(fù)制BMIServletPrint，重新命名 BMIServletAjax 代碼不需要改動

4.?注冊 Servlet

5.?在瀏覽器訪問ajax.jsp

在BMIServltAjax?的第一行設(shè)置斷點，然后在 jsp?中點擊按鈕，發(fā)起請求，觀察瀏覽器中的彈出的內(nèi)容變化

6.?修改ajax.jsp?中的doAjax()函數(shù)

7.訪問ajax.jsp?請求

在jsp?中點擊按鈕，發(fā)起請求，觀察瀏覽器中的彈出的內(nèi)容變化

8.獲取dom?對象 value?值

9.?在瀏覽器測試發(fā)送ajax 請求

10.修改 doAjax 函數(shù)

最后奉上視頻教程??，視頻觀看效果更佳??！走過路過別忘素質(zhì)三連哦~~