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

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

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

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

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

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

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

8、lHttp.open("GET","url?key=value"); / 參數(shù)已經(jīng)在url上xmlHttp.send(null); 2、post方式發(fā)送數(shù)據(jù)xmlHttp.open("POST","url"); / 不需要寫參數(shù)xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); / post發(fā)送參數(shù)前，需要設置編碼格式xmlHttp.send("name=xxx&

9、amp;pwd=xxx"); / 發(fā)送post數(shù)據(jù) 回調(diào)函數(shù)編寫 if(xmlHttp.readyState = 4)/ 判斷數(shù)據(jù)是否正確if(xmlHttp.status = 200)/ 響應有效.小結(jié):發(fā)送給服務器方式:get 請求 send(null)post請求 需要添加頭信息 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");6. Ajax應用場景 6.1. 案例一通過離焦發(fā)送Ajax請求，驗證郵箱是否存在 需要掌握: 1: aja

10、x 發(fā)送請求的編碼流程 2: 回調(diào)函數(shù)的編寫 3: 表單的提交控制頁面設計 register.jsp編寫 js 離焦事件發(fā)送ajax請求給服務器 服務器數(shù)據(jù)庫查詢.得到郵箱是否存在. 后臺代碼設計添加錯誤信息提示 <span>標簽 存在問題!注意 response.getWriter().print() 換行! 輸出字符串 如果前臺js 需要比較 切記 不可以添加ln 換行.控制表單的提交的控制添加表單校驗 聲明全局變量回調(diào)函數(shù) 修改validEmailFlag值 表單添加屬性 Onsubmit="return validForm()"6.2. 案例二案例之商品

11、信息的明細顯示 1: product.jsp 異步發(fā)送請求到服務器 抓取數(shù)據(jù)更新頁面局部表格! 2: js 發(fā)送ajax onchange 事件 一般用于select 標簽! 3: 編寫后臺servlet 抓取數(shù)據(jù) <table> 函數(shù)數(shù)據(jù) 給ajax 引擎 response.getWriter 三層結(jié)構(gòu) 數(shù)據(jù)庫查詢給定商品信息 封裝 List<Product> servlet - 轉(zhuǎn)發(fā)給tab.jsp (response輸出流 )表格數(shù)據(jù) 發(fā)送ajax 引擎 servlet 職責: 接受請求 調(diào)用業(yè)務層 完成具體的業(yè)務 響應客戶端 查詢商品數(shù)據(jù)轉(zhuǎn)發(fā)tab.jsp 頁面

12、響應! tab.jsp 底層 servlet 通過輸出流 數(shù)據(jù) 發(fā)送 ajax 引擎對象 js 使用 xhr.responseText 接受到數(shù)據(jù)! 頁面片段! 測試效果: 6.3. 案例三服務器響應json數(shù)據(jù)6.3.1. 什么是json數(shù)據(jù)格式.前臺和后臺一種輕量級數(shù)據(jù)交互格式 字符串 客戶端 請求 和 服務器響應 通過字符串進行交互的!字符串具有一定數(shù)據(jù)格式! 既可以讓服務器端 java 對象轉(zhuǎn)換成 字符串 也可以 讓前端js 可以識別 把這種字符串格式: json 字符串!java 對象 ->json 字符串key:value,key1:value1 -特定字符串 傳遞給ajax

13、 引擎 ->xhr.responseText->字符串 通過js函數(shù)eval()解析該字符串 ->js對象 使用 dom技術(shù) ! json 傳輸?shù)臄?shù)據(jù)格式: 1:'上海',2:'北京' javabean 對象'上海','北京','深圳','廈門' 數(shù)組對象, List 集合問題: 如何將java 不同對象 轉(zhuǎn)換 json 字符串! 6.3.2. json-lib說明以及引用1:json-lib 2:flex-json 技術(shù) 作用: javabean 對象 轉(zhuǎn)換json 字符串個數(shù).

14、百度: json 英文網(wǎng)站 json 字符解析技術(shù) ->json-lib ->下載相關jar 6個! 下發(fā)分層管理 json 6 個jar 包 導入lib 目錄6.3.3. json改寫商品明細顯示案例導入該6個jar 改寫案例2 采用json 傳輸方式完成頁面數(shù)據(jù)顯示1: 導入jar2: servlet 數(shù)據(jù)庫查詢 封裝List<Product> 注意事項 格式轉(zhuǎn)換 使用對象JSONArray 測試之后 發(fā)現(xiàn) ajax引擎收到了 3: 集合對象List<.Product> 解析 json 數(shù)組字符串 純數(shù)據(jù)發(fā)送給ajax 網(wǎng)絡傳輸數(shù)據(jù)只有 有效數(shù)據(jù) 沒有頁

15、面樣式文件 標簽文件.大大減少網(wǎng)絡傳輸和帶寬. eval() 函數(shù)解析 DOM 技術(shù) 動態(tài)顯示數(shù)據(jù)到指定表格中 表頭的生成! 4: ajax 引擎 解析具有json格式字符串 轉(zhuǎn)換成js 對象 ->dom 技術(shù) 完成表格數(shù)據(jù)動態(tài)顯示. 完成!eval()函數(shù)的說明為什么要 eval這里要添加 “("("+data+")");/”呢？加上圓括號的目的是迫使eval函數(shù)在處理JavaScript代碼的時候強制將括號內(nèi)的表達式（expression）轉(zhuǎn)化為對象，而不是作為語句（statement）來執(zhí)行。舉一個例子，例如對象字面量，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結(jié)