1. 首頁 > 生活 > >

ajax使用教程 ajax基礎教程

小知識ajax基礎教程ajax使用教程



文章插圖
ajax使用教程 ajax基礎教程

文章插圖
傳統開發的缺點，是對于瀏覽器的頁面，全部都是全局刷新的體驗 。如果我們只是想取得或是更新頁面中的部分信息那么就必須要應用到局部刷新的技術 。局部刷新也是有效提升用戶體驗的一種非常重要的方式 。
Ajax技術是基于js語言的擴展，能夠通過將請求發送給后臺，并從后臺取得相關數據，然后將數據在頁面做局部刷新的重要技術 。
本教程會通過對ajax的傳統使用方式，結合json操作的方式，結合跨域等高級技術的方式，對ajax做一個全面的講解 。
搭配視頻效果更佳哦~~~
什么是Ajax？
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和XML） 。
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分頁面內容的新方法
AJAX 不是新的編程語言，而是使用現有技術混合使用的一種新方法 。ajax 中使用的技術有JavaScript, html , dom , xml ,css 等 。主要是JavaScript , XML.
JavaScript: 使用腳本對象XMLHttpRequest 發送請求，接收響應數據XML: 發送和接收的數據格式，現在使用json
AJAX 不單需要前端的技術，同時需要后端（服務器）的配合 。服務器需要提供數據，數據是AJAX 請求的響應結果 。
全局刷新和局部刷新
B/S 結構項目中，瀏覽器（Browse）負責把用戶的請求和參數通過網絡發送給服務器（Server）,服務端使用 Servlet（多種服務端技術的一種）接收請求，并將處理結果返回給瀏覽器 。
瀏覽器在html，jsp 上呈現數據，混合使用css，js 幫助美化頁面，或響應事件 。
全局刷新
登錄請求處理：
index.jsp 發起登錄請求——–LoginServlet result.jsp
發起請求request 階段：
瀏覽器現在內存中是index 頁面的內容和數據 ：
服務器端應答結果階段：
sevlet 返回后把數據全部覆蓋掉原來index 頁面內容，result.jsp 覆蓋了全部的瀏覽器內存數據 。整個瀏覽器數據全部被刷新 。重新在瀏覽器窗口顯示數據，樣式，標簽等
全局刷新原理：
1) 必須由瀏覽器親自向服務端發送請求協議包 。
2) 這個行為導致服務端直接將【響應包】發送到瀏覽器內存中
3) 這個行為導致瀏覽器內存中原有內容被覆蓋掉
4) 這個行為導致瀏覽器在展示數據時候，只有響應數據可以展示
局部刷新
瀏覽器在展示數據時，此時在窗口既可以看到本次的響應數據，同時又可以看到瀏覽器內存中原有數據
局部刷新原理：
1) 不能由瀏覽器發送請求給服務端
2) 瀏覽器委托瀏覽器內存中一個腳本對象代替瀏覽器發送請求.
3) 這個行為導致導致服務端直接將【響應包】發送腳本對象內存中
4) 這個行為導致腳本對象內容被覆蓋掉，但是此時瀏覽器內存中絕大部分內容沒有收到任何影響
5) 這個行為導致瀏覽器在展示數據時候,同時展示原有數據和響應數據
AJAX 實現局部刷新的一種技術 。
異步請求對象:
在局部刷新，需要創建一個對象，代替瀏覽器發起請求的行為，這個對象存在內存中 。
代替瀏覽器發起請求并接收響應數據 。這個對象叫做異步請求對象 。
全局刷新是同步行為，局部刷新是異步行為[瀏覽器數據沒有全部更新] 這個異步對象用于在后臺與服務器交換數據 。XMLHttpRequest 就是我們說的異步對象 。
XMLHttpRequest 對象能夠：
在不重新加載頁面的情況下更新網頁在頁面已加載后向服務器請求數據在頁面已加載后從服務器接收數據
所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象 。通過一行簡單的 JavaScript 代碼，我們就可以創建 XMLHttpRequest 對象
創建 XMLHttpRequest 對象的語法（xhr）： var xmlhttp=new XMLHttpRequest();
AJAX 中的核心對象就是XMLHttpRequest
AJAX 異步實現步驟
XMLHttpRequest 對象介紹
（1） 創建對象方式
var xmlHttp = new XMLHttpRequest();
（2） onreadstatechange 事件
當請求被發送到服務器時，我們需要執行一些基于響應的任務 。每當readyState 改變時，就會觸發 onreadystatechange 事件 。此事件可以指定一個處理函數function 。
通過判斷XMLHttpReqeust 對象的狀態，獲取服務端返回的數據 。
語法：
xmlHttp.onreadystatechange= function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
處理服務器返回數據
}
}
下面是 XMLHttpRequest 對象的三個重要的屬性：
屬性說明：
onreadystatechange 屬性：一個 js 函數名 或 直接定義函數，每當readyState 屬性改變時，就會調用該函數
readyState 屬性：
存有 XMLHttpRequest 的狀態 。從 0 到 4 發生變化 。
? 0: 請求未初始化，創建異步請求對象 var xmlHttp = new XMLHttpRequest()
? 1: 初始化異步請求對象，xmlHttp.open(請求方式，請求地址，true)
? 2: 異步對象發送請求，xmlHttp.send()
? 3: 異步對象接收應答數據 從服務端返回數據 。XMLHttpRequest 內部處理 。
? 4: 異步請求對象已經將數據解析完畢 。此時才可以讀取數據 。
status 屬性：
200: “OK”
404: 未找到頁面
（1） 初始化請求參數：
方法：
open(method,url,async) ： 初始化異步請求對象
參數說明：
method：請求的類型；GET 或 POST
url：服務器的servlet 地址
async：true（異步）或 false（同步）
例如 :
xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)
（2） 發送請求
xmlHttp.send()
（3） 接收服務器響應的數據
如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的
responseText 或 responseXML 屬 性。
responseText：獲得字符串形式的響應數據responseXML：獲得 XML 形式的響應數據
AJAX 實例全局刷新計算 bmi
需求：計算某個用戶的BMI 。用戶在jsp 輸入自己的身高，體重；servlet 中計算BMI，并顯示 BMI 的計算結果和建議 。
BMI 指數（即身體質量指數，英文為BodyMassIndex，簡稱 BMI），是用體重公斤數除以身高米數平方得出的數字，是目前國際上常用的衡量人體胖瘦程度以及是否健康的一個標準
成人的 BMI 數值：
1）過輕：低于 18.5
2）正常：18.5-23.9
3）過重：24-27
4）肥胖：28-32
5）非常肥胖,高于 32
開發步驟：
1. 在idea 中創建新的工程，名稱：ch01-bmi-ajax
2. 配置tomcat 服務器，如果已經配置，省略此步驟 。
選擇Local
配置tomcat 服務器的位置
Module 添加tomcat 支持
出現窗口
選擇 2 Library
確定使用tomcat
3. 創建 jsp，定義form，有參數name，weight，height
4. 創建 Servlet，名稱 BMIServlet
5. 注冊 servlet
6. 創建 result.jsp
web 目錄下創建 result.jsp 文件
7.配置運行程序，輸入參數 。顯示bmi
使用HttpServletResponse 響應輸出
1. 新建jsp： indexPrint.jsp
2. 新建Servlet, 名稱 BMIServeltPrint
使用 ajax 請求，計算 bmi
1. 新建ajax.jsp
2. 在ajax.jsp 的head 部分指定 doAjax()函數
3. 復制BMIServletPrint，重新命名 BMIServletAjax 代碼不需要改動
4. 注冊 Servlet
5. 在瀏覽器訪問ajax.jsp
在BMIServltAjax 的第一行設置斷點，然后在 jsp 中點擊按鈕，發起請求，觀察瀏覽器中的彈出的內容變化
6. 修改ajax.jsp 中的doAjax()函數
7.訪問ajax.jsp 請求
在jsp 中點擊按鈕，發起請求，觀察瀏覽器中的彈出的內容變化
8.獲取dom 對象 value 值
9. 在瀏覽器測試發送ajax 請求
【ajax使用教程 ajax基礎教程】10.修改 doAjax 函數