資料課件講義段建國-課件TP08

Ajax與jQuery,第八章,本章目標,理解Ajax技術掌握JSON的使用掌握jQuery的常用Ajax方法,2/51,認識Ajax,Web2.0的特點用戶貢獻內容內容聚合RSS更豐富的“用戶體驗”,自動補全,內容聚合,每個小“窗口”可以關閉、最小化和進行個性化設置,所有操作都是在不刷新窗口的情況下完成的,3/51,為什么使用Ajax,無刷新：不刷新整個頁面，只刷新局部無刷新的好處只更新部分頁面，有效利用帶寬提供連續(xù)的用戶體驗提供類似C/S的交互效果，操作更方面,只是登錄，沒必要刷新“龐大”的頁面,4/51,4/51,4/51,觀看視頻時，不希望頁面刷新視頻從頭播放,只刷新局部頁面，視頻繼續(xù)播放,自動完成功能,拖動、放大、縮小Google地圖,傳統(tǒng)Web與Ajax的差異,5/52,Ajax簡介,Ajax：異步刷新技術,6/52,Ajax工作流程,Ajax：異步刷新技術,7/52,Ajax技術的核心,Ajax技術主要開發(fā)語言,封裝請求或響應的數(shù)據(jù)格式,修改頁面元素、改變樣式，實現(xiàn)局部刷新,XMLHttpRequest對象,XMLHttpRequest3-1,整個Ajax技術的核心提供異步發(fā)送請求的能力常用方法,8/51,常用屬性readystate:XMLHttpRequest的狀態(tài)信息onreadystatechange：指定回調函數(shù),XMLHttpRequest3-2,9/51,XMLHttpRequest3-3,常用屬性status：HTTP的狀態(tài)碼statusText：返回當前請求的響應狀態(tài)responseText：獲得響應的文本內容responseXML：獲得響應的XML文檔對象,就緒狀態(tài)是4且狀態(tài)碼是200，方可處理服務器數(shù)據(jù),10/51,使用Ajax驗證用戶名3-1,實現(xiàn)無刷新用戶名驗證當用戶名文本框失去焦點時，發(fā)送請求到服務器，判斷用戶名是否存在如果已經存在提示“用戶名已被使用”如果不存在則提示“用戶名可以使用”,問題,11/51,使用Ajax驗證用戶名3-2,使用文本框的onBlur事件使用Ajax技術實現(xiàn)異步交互創(chuàng)建XMLHttpRequest對象通過XMLHttpRequest對象設置請求信息向服務器發(fā)送請求創(chuàng)建回調函數(shù)，根據(jù)響應狀態(tài)動態(tài)更新頁面,分析,12/51,使用Ajax驗證用戶名3-3,編寫待驗證姓名表單編寫JavaScript方法驗證用戶名使用Ajax進行處理1.創(chuàng)建XMLHttpRequest對象2.設置在服務器完成響應后要運行的回調函數(shù)3.設置請求信息4.發(fā)送請求編寫服務器端處理客戶端請求編寫回調函數(shù)處理服務器端返回數(shù)據(jù),13/51,學員操作實現(xiàn)無刷新郵箱驗證,需求說明實現(xiàn)無刷新驗證注冊郵箱在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在,練習,14/51,使用jQuery實現(xiàn)Ajax,傳統(tǒng)方式實現(xiàn)Ajax的不足方法、屬性、常用值較多不好記憶步驟繁瑣瀏覽器兼容問題,jQuery常用Ajax方法$.ajax()$.get()$.post()$.getJSON()load(),問題,“$”為jQuery腳本庫的變量名，即“$”=“jQuery”,15/51,$.ajax()簡介2-1,語法,常用屬性參數(shù),$.ajax(settings);,16/51,常用函數(shù)參數(shù),$.ajax()簡介2-2,17/51,使用$.ajax()驗證用戶名2-1,實現(xiàn)無刷新用戶名驗證當用戶名文本框失去焦點時，發(fā)送請求到服務器，判斷用戶名是否存在如果已經存在則提示“用戶名已被使用”如果不存在則提示“用戶名可以使用”,問題,18/51,使用$.ajax()驗證用戶名2-2,使用$.ajax()實現(xiàn)異步交互,示例,$.ajax(url:url,/要提交的URL路徑type:get,/發(fā)送請求的方式data:data,/要發(fā)送到服務器的數(shù)據(jù)dataType:text,/指定傳輸?shù)臄?shù)據(jù)格式success:function(result)/請求成功后要執(zhí)行的代碼,error:function()/請求失敗后要執(zhí)行的代碼);,19/51,學員操作$.ajax()實現(xiàn)郵箱驗證,需求說明使用$.ajax()實現(xiàn)無刷新郵箱驗證在用戶注冊頁面當E-mail文本框失去焦點時，判斷用戶是否存在,練習,20/51,共性問題集中講解,常見問題及解決辦法代碼規(guī)范問題調試技巧,共性問題集中講解,21/51,常用參數(shù),$.get()簡介,語法,$.get(url,data,success(resp,status,xhr),dataType);,22/51,$.get()用法,使用$.get()實現(xiàn)異步交互以上代碼等價于,示例,$.ajax(url:url,data:data,type:get,success:function(result)/省略代碼);,$.get(url,data,function(result)/省略將服務器返回的數(shù)據(jù)顯示到頁面的代碼);,23/51,常用參數(shù),$.post()簡介,語法,$.post(url,data,success(resp,status,xhr),dataType);,24/51,$.post()用法,使用$.post()實現(xiàn)異步交互以上代碼等價于,示例,$.post(url,data,function(result)/省略將服務器返回的數(shù)據(jù)顯示到頁面的代碼);,$.ajax(url:url,data:data,type:post,success:function(result)/省略代碼);,25/51,常用參數(shù),load()簡介,語法,$(selector).load(url,data,function(result,status,xhr);,26/51,load()用法,使用load()實現(xiàn)異步交互以上代碼等價于,示例,$(#nameDiv).load(url,data);,$.get(url,data,function(result)$(#nameDiv).html(result););,27/51,學員操作使用$.get()和$.post()實現(xiàn)郵箱驗證,需求說明實現(xiàn)無刷新郵箱驗證在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在分別使用$.get()和$.post()方法實現(xiàn)以上需求,練習,28/51,學員操作load()實現(xiàn)郵箱驗證,需求說明實現(xiàn)無刷新郵箱驗證在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在,練習,29/51,認識JSON,JSON（JavaScriptObjectNotation）一種輕量級的數(shù)據(jù)交換格式通常用于在客戶端和服務器之間傳遞數(shù)據(jù),id:4,name:梅西,pwd:6666,30/51,示例,為什么使用JSON,JSON出現(xiàn)之前的數(shù)據(jù)交互方式：XMLXML難于解析體積比較大讀寫不夠靈活JSON優(yōu)點輕量級交互語言結構簡單易于解析,31/51,語法,JOSN簡介2-1,示例,varperson=name:張三,age:30;,varJSON對象=key:value,key:value,;,JSON對象,32/51,語法,JOSN簡介2-2,示例,varJSON數(shù)組=value,value,;,varcountryArray=中國,美國,俄羅斯;varpersonArray=name:張三,age:30,name:李四,age:40,JSON數(shù)組,33/51,定義JSON對象和數(shù)組2-1,定義JSON格式數(shù)據(jù)并在頁面輸出,問題,34/51,定義JSON對象和數(shù)組2-2,定義JSON格式的user對象，并在id為objectDiv的DIV元素中輸出定義JSON格式的字符串數(shù)組，并在id為arrayDiv的DIV元素中輸出定義JSON格式的user對象數(shù)組，并在id為objectArrayDiv的DIV元素中使用輸出,35/51,分析,常用參數(shù),$.getJSON()簡介,語法,$.getJSON(url,data,success(result,status,xhr),36/51,$.getJSON()用法,使用$.getJSON()實現(xiàn)異步交互以上代碼等價于,示例,$.getJSON(url,data,success(result)/省略將服務器返回的數(shù)據(jù)顯示到頁面的代碼);,$.ajax(url:url,data:data,type:get,dataType:json,success:function(result)/省略代碼);,37/51,學員操作$.ajax()傳遞JSON數(shù)據(jù),需求說明使用$.ajax()方法實現(xiàn)無刷新郵箱驗證在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在在服務器根據(jù)驗證結果返回一段JSON格式的字符串，并在客戶端解析該字符串，將結果顯示到頁面,練習,38/51,學員操作$.getJSON()實現(xiàn)郵箱驗證,需求說明使用$.getJSON()方法實現(xiàn)無刷新郵箱驗證在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在在服務器根據(jù)驗證結果返回一段JSON格式的字符串，并在客戶端解析該字符串，將結果顯示到頁面,練習,39/51,總結2-1,Ajax主要包括的技術:XMLHttpRequestJavaScriptDOM+CSSXML、JSON或HTML等使用Ajax需要以下步驟創(chuàng)建XMLHttpRequest對象設置回調函數(shù)初始化XMLHttpRequest組件發(fā)送請求使用Ajax正確處理服務器數(shù)據(jù)的條