資料課件講義段建國(guó)-課件TP08_第1頁(yè)
資料課件講義段建國(guó)-課件TP08_第2頁(yè)
資料課件講義段建國(guó)-課件TP08_第3頁(yè)
資料課件講義段建國(guó)-課件TP08_第4頁(yè)
資料課件講義段建國(guó)-課件TP08_第5頁(yè)
已閱讀5頁(yè),還剩36頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論