16-AJAX_課程筆記

1、.AJAX學(xué)習(xí)目標(biāo) Asynchronous JavaScript And XML/JSON前臺(tái)和后臺(tái)異步交互的一門技術(shù) 1:ajax運(yùn)行原理2:ajax 編程步驟3:ajax 應(yīng)用案例1. AJAX介紹AJAX ： 異步 javascript和 XML AJAX ：帶來用戶體驗(yàn)改變，是web優(yōu)化一種主要手段 AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 對(duì)象 2. AJAX產(chǎn)生的背景傳統(tǒng)web交互模型，瀏覽器直接將請(qǐng)求發(fā)送給服務(wù)器，服務(wù)器回送響應(yīng)，直接發(fā)給瀏覽器， Ajax交互模型，瀏覽器首先將請(qǐng)求 發(fā)送 Ajax引擎（以XMLHt

2、tpRequest為核心），AJax引擎再將請(qǐng)求發(fā)送給 服務(wù)器，服務(wù)器回送響應(yīng)先發(fā)給Ajax引擎，再由引擎?zhèn)鹘o瀏覽器顯示 1、同步交互模式，客戶端提交請(qǐng)求，等待，在響應(yīng)回到客戶端前，客戶端無(wú)法進(jìn)行其他操作 2、異步交互模型，客戶端將請(qǐng)求提交給Ajax引擎，客戶端可以繼續(xù)操作，由Ajax引擎來完成與服務(wù)武器端通信，當(dāng)響應(yīng)回來后，Ajax引擎會(huì)更新客戶頁(yè)面，在客戶端提交請(qǐng)求后，用戶可以繼續(xù)操作，而無(wú)需等待 。 運(yùn)行原理圖: Ajax 引擎對(duì)象 異步發(fā)送請(qǐng)求給服務(wù)器 同時(shí)接受服務(wù)器給予響應(yīng) 使用js 局部跟新!設(shè)計(jì)對(duì)象 XMLHttpRequest 該對(duì)象 : ajax 引擎對(duì)象 作用: 及時(shí)發(fā)送異

3、步請(qǐng)求給服務(wù)器 及時(shí)獲取服務(wù)器回應(yīng)數(shù)據(jù) 由js 實(shí)現(xiàn)局部更新!該對(duì)象客戶端的 瀏覽器來創(chuàng)建ajax 引擎對(duì)象. function() var aa = new Object()創(chuàng)建該對(duì)象 瀏覽器兼容問題: 不同瀏覽器創(chuàng)建ajax 引擎 方法是不同的! 創(chuàng)建方式:3. Ajax編程快速入門步驟:(ajax 開發(fā)步驟固定的)1.創(chuàng)建ajax引擎對(duì)象 XMLHttpRequest對(duì)象 瀏覽器創(chuàng)建 兼容問題 (火狐 chrome safari 一樣) IE 不一樣! 來自 w3cschool手冊(cè)自己頁(yè)面 創(chuàng)建該對(duì)象 封裝js 引入外部js 腳本 測(cè)試不同瀏覽器 是否獲取該對(duì)象簡(jiǎn)化獲取xhr 對(duì)象的代碼

4、 封裝到j(luò)s 腳本中 腳本內(nèi)容:目標(biāo)頁(yè)面引入該腳本即可2.將狀態(tài)觸發(fā)器綁定到一個(gè)函數(shù)3.使用open方法建立與服務(wù)器的連接4.send()向服務(wù)器端發(fā)送數(shù)據(jù)5.在回調(diào)函數(shù)中對(duì)返回?cái)?shù)據(jù)進(jìn)行處理獲取核心對(duì)象可以參考w3cSchool 手冊(cè)代碼案例XMLHttpRequest 核心對(duì)象方法： open() send() 屬性： onreadystatechange ：狀態(tài)回調(diào)函數(shù)responseText/responseXML ：服務(wù)器的響應(yīng)字符串status：服務(wù)器返回的HTTP狀態(tài)碼readyState ：對(duì)象狀態(tài)4. 案例一 get 請(qǐng)求 ajax 異步發(fā)送get請(qǐng)求: 應(yīng)用場(chǎng)景演示get 請(qǐng)

5、求: 點(diǎn)擊按鈕,將用戶輸入文本數(shù)據(jù) 發(fā)送請(qǐng)求給服務(wù)器. 服務(wù)器回送一個(gè)簡(jiǎn)單類型的數(shù)據(jù)給ajax 引擎 get.jsp 輸入?yún)?shù)之后 點(diǎn)擊按鈕 數(shù)據(jù)異步發(fā)送給服務(wù)器 查看瀏覽器地址不會(huì)變化!ajax 引擎 接受服務(wù)器端回送數(shù)據(jù) 使用js div標(biāo)簽顯示提示信息! 2: ajax 發(fā)送請(qǐng)求 點(diǎn)擊事件 發(fā)送ajax 請(qǐng)求注意: xhr 相關(guān)屬性 和 方法作用 open() 建立連接和請(qǐng)求方式以及異步還是同步 三個(gè)參數(shù) 一般開發(fā)就2個(gè)參數(shù) 最后參數(shù)true默認(rèn)不寫!send() 發(fā)送請(qǐng)求 : send(null)-get send(xxxx)-post屬性 onreadystatechange 屬性事

6、件和匿名函數(shù)綁定 形成回調(diào)函數(shù) 該函數(shù) 服務(wù)器響應(yīng)完成200 通過js 操作頁(yè)面局部更新 屬性 responseText xhr 獲取服務(wù)器響應(yīng)字符類型數(shù)據(jù) 屬性 responseXML xhr 接受服務(wù)器端回送xml 數(shù)據(jù) text/xml response.setContextType(text/xml;charset=utf-8)屬性 readyState 表示ajax請(qǐng)求發(fā)送狀態(tài) 0 1 2 3 4 4表示請(qǐng)求發(fā)送完成 響應(yīng)就緒 屬性 status 服務(wù)器發(fā)送狀態(tài)碼 200 ok 請(qǐng)求 響應(yīng)ok 2: 服務(wù)器端servlet 開發(fā) 接受請(qǐng)求 響應(yīng)數(shù)據(jù) ajax引擎 通過 xhr.res

7、ponseText 可以接受服務(wù)器響應(yīng)數(shù)據(jù)了!測(cè)試完成!5. 案例二post 請(qǐng)求 ajax 異步發(fā)送post請(qǐng)求: 基于get 模板 幾乎一致 區(qū)分: open(post) send(xx傳遞給服務(wù)器數(shù)據(jù)寫在這里key=value) send 之前 添加一個(gè)頭信息 xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded); 其他代碼不變! 客戶端向服務(wù)器提交數(shù)據(jù) get/post1、get方式發(fā)送數(shù)據(jù)xmlHttp.open(GET,url?key=value); / 參數(shù)已經(jīng)在url上xmlHttp.send(

8、null); 2、post方式發(fā)送數(shù)據(jù)xmlHttp.open(POST,url); / 不需要寫參數(shù)xmlHttp.setRequestHeader(CONTENT-TYPE,application/x-www-form-urlencoded); / post發(fā)送參數(shù)前，需要設(shè)置編碼格式xmlHttp.send(name=xxx&pwd=xxx); / 發(fā)送post數(shù)據(jù) 回調(diào)函數(shù)編寫 if(xmlHttp.readyState = 4)/ 判斷數(shù)據(jù)是否正確if(xmlHttp.status = 200)/ 響應(yīng)有效.小結(jié):發(fā)送給服務(wù)器方式:get 請(qǐng)求 send(null)post請(qǐng)求 需要

9、添加頭信息 xmlHttp.setRequestHeader(CONTENT-TYPE,application/x-www-form-urlencoded);6. Ajax應(yīng)用場(chǎng)景 6.1. 案例一通過離焦發(fā)送Ajax請(qǐng)求，驗(yàn)證郵箱是否存在 需要掌握: 1: ajax 發(fā)送請(qǐng)求的編碼流程 2: 回調(diào)函數(shù)的編寫 3: 表單的提交控制頁(yè)面設(shè)計(jì) register.jsp編寫 js 離焦事件發(fā)送ajax請(qǐng)求給服務(wù)器 服務(wù)器數(shù)據(jù)庫(kù)查詢.得到郵箱是否存在. 后臺(tái)代碼設(shè)計(jì)添加錯(cuò)誤信息提示 標(biāo)簽 存在問題!注意 response.getWriter().print() 換行! 輸出字符串 如果前臺(tái)js 需要比

10、較 切記 不可以添加ln 換行.控制表單的提交的控制添加表單校驗(yàn) 聲明全局變量回調(diào)函數(shù) 修改validEmailFlag值 表單添加屬性 Onsubmit=return validForm()6.2. 案例二案例之商品信息的明細(xì)顯示 1: product.jsp 異步發(fā)送請(qǐng)求到服務(wù)器 抓取數(shù)據(jù)更新頁(yè)面局部表格! 2: js 發(fā)送ajax onchange 事件 一般用于select 標(biāo)簽! 3: 編寫后臺(tái)servlet 抓取數(shù)據(jù) 函數(shù)數(shù)據(jù) 給ajax 引擎 response.getWriter 三層結(jié)構(gòu) 數(shù)據(jù)庫(kù)查詢給定商品信息 封裝 List servlet - 轉(zhuǎn)發(fā)給tab.jsp (res

11、ponse輸出流 )表格數(shù)據(jù) 發(fā)送ajax 引擎 servlet 職責(zé): 接受請(qǐng)求 調(diào)用業(yè)務(wù)層 完成具體的業(yè)務(wù) 響應(yīng)客戶端 查詢商品數(shù)據(jù)轉(zhuǎn)發(fā)tab.jsp 頁(yè)面響應(yīng)! tab.jsp 底層 servlet 通過輸出流 數(shù)據(jù) 發(fā)送 ajax 引擎對(duì)象 js 使用 xhr.responseText 接受到數(shù)據(jù)! 頁(yè)面片段! 測(cè)試效果: 6.3. 案例三服務(wù)器響應(yīng)json數(shù)據(jù)6.3.1. 什么是json數(shù)據(jù)格式.前臺(tái)和后臺(tái)一種輕量級(jí)數(shù)據(jù)交互格式 字符串 客戶端 請(qǐng)求 和 服務(wù)器響應(yīng) 通過字符串進(jìn)行交互的!字符串具有一定數(shù)據(jù)格式! 既可以讓服務(wù)器端 java 對(duì)象轉(zhuǎn)換成 字符串 也可以 讓前端js 可

12、以識(shí)別 把這種字符串格式: json 字符串!java 對(duì)象 -json 字符串key:value,key1:value1 -特定字符串 傳遞給ajax 引擎 -xhr.responseText-字符串 通過js函數(shù)eval()解析該字符串 -js對(duì)象 使用 dom技術(shù) ! json 傳輸?shù)臄?shù)據(jù)格式: 1:上海,2:北京 javabean 對(duì)象上海,北京,深圳,廈門 數(shù)組對(duì)象, List 集合問題: 如何將java 不同對(duì)象 轉(zhuǎn)換 json 字符串! 6.3.2. json-lib說明以及引用1:json-lib 2:flex-json 技術(shù) 作用: javabean 對(duì)象 轉(zhuǎn)換json 字符

13、串個(gè)數(shù).百度: json 英文網(wǎng)站 json 字符解析技術(shù) -json-lib -下載相關(guān)jar 6個(gè)! 下發(fā)分層管理 json 6 個(gè)jar 包 導(dǎo)入lib 目錄6.3.3. json改寫商品明細(xì)顯示案例導(dǎo)入該6個(gè)jar 改寫案例2 采用json 傳輸方式完成頁(yè)面數(shù)據(jù)顯示1: 導(dǎo)入jar2: servlet 數(shù)據(jù)庫(kù)查詢 封裝List 注意事項(xiàng) 格式轉(zhuǎn)換 使用對(duì)象JSONArray 測(cè)試之后 發(fā)現(xiàn) ajax引擎收到了 3: 集合對(duì)象List 解析 json 數(shù)組字符串 純數(shù)據(jù)發(fā)送給ajax 網(wǎng)絡(luò)傳輸數(shù)據(jù)只有 有效數(shù)據(jù) 沒有頁(yè)面樣式文件 標(biāo)簽文件.大大減少網(wǎng)絡(luò)傳輸和帶寬. eval() 函數(shù)解析 DOM 技術(shù) 動(dòng)態(tài)顯示數(shù)據(jù)到指定表格中 表頭的生成! 4: ajax 引擎 解析具有json格式字符串 轉(zhuǎn)換成js 對(duì)象 -dom 技術(shù) 完成表格數(shù)據(jù)動(dòng)態(tài)顯示. 完成!eval()函數(shù)的說明為什么要 eval這里要添加 “(+data+);/”呢？加上圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式（expression）轉(zhuǎn)化為對(duì)象，而不是作為語(yǔ)句（statement）來執(zhí)行。舉一個(gè)例子，例如對(duì)象字面量，如若不加外層的括號(hào)，那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的