手把手帶你掌握Ajax原理及實(shí)現(xiàn)步驟

時(shí)間：2023-05-24 07:57:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-24 07:57:02 來源：網(wǎng)站運(yùn)營

手把手帶你掌握Ajax原理及實(shí)現(xiàn)步驟：傳統(tǒng)開發(fā)的缺點(diǎn)，是對(duì)于瀏覽器的頁面，全部都是全局刷新的體驗(yàn)。

如果我們只是想取得或是更新頁面中的部分信息那么就必須要應(yīng)用到局部刷新的技術(shù)。

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

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

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

什么是Ajax？

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

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

AJAX 不是新的編程語言，而是使用現(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ù)通過網(wǎng)絡(luò)發(fā)送給服務(wù)器（Server）,服務(wù)端使用 Servlet（多種服務(wù)端技術(shù)的一種）接收請(qǐng)求，并將處理結(jié)果返回給瀏覽器。

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

全局刷新

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

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

發(fā)起請(qǐng)求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ù)。 整個(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)容沒有收到任何影響

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ù)沒有全部更新] 這個(gè)異步對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。XMLHttpRequest 就是我們說的異步對(duì)象。

XMLHttpRequest 對(duì)象能夠：

• 在不重新加載頁面的情況下更新網(wǎng)頁
• 在頁面已加載后向服務(wù)器請(qǐng)求數(shù)據(jù)
• 在頁面已加載后從服務(wù)器接收數(shù)據(jù)

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

創(chuàng)建 XMLHttpRequest 對(duì)象的語法（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。

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

語法：

xmlHttp.onreadystatechange= function() {if( xmlHttp.readyState == 4 && xmlHttp.status == 200){處理服務(wù)器返回?cái)?shù)據(jù)}}下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

屬性說明：

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ù)。

status 屬性：

200: "OK"
404: 未找到頁面

（1） 初始化請(qǐng)求參數(shù)：

方法：

open(method,url,async) ： 初始化異步請(qǐng)求對(duì)象

參數(shù)說明：

method：請(qǐng)求的類型；GET 或 POST
url：服務(wù)器的servlet 地址
async：true（異步）或 false（同步）

例如 :

xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)（2） 發(fā)送請(qǐng)求

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

如需獲得來自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的responseText 或 responseXML 屬 性 。

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

---

AJAX 實(shí)例

全局刷新計(jì)算 bmi

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

BMI 指數(shù)（即身體質(zhì)量指數(shù)，英文為BodyMassIndex，簡稱 BMI），是用體重公斤數(shù)除以身高米數(shù)平方得出的數(shù)字，是目前國際上常用的衡量人體胖瘦程度以及是否健康的一個(gè)標(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. 注冊(cè) servlet

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

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







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

---

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

1. 新建jsp： indexPrint.jsp

2. 新建Servlet, 名稱 BMIServeltPrint

使用 ajax 請(qǐng)求，計(jì)算 bmi

1. 新建ajax.jsp

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

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

4. 注冊(cè) Servlet

5. 在瀏覽器訪問ajax.jsp

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

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

7.訪問ajax.jsp 請(qǐng)求

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

8.獲取dom 對(duì)象 value 值

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

10.修改 doAjax 函數(shù)