轉(zhuǎn)換課程s2y2java方向tg13

神奇的Ajax第十三章回顧與作業(yè)點評如何理解Servlet的生命周期？請簡述Tomcat中如何部署Servlet？使用Servlet如何實現(xiàn)轉(zhuǎn)發(fā)和重定向？預習檢查為什么使用Ajax？Ajax主要包括哪些技術？使用Ajax的步驟有哪些？本章任務實現(xiàn)即時檢查Email是否可用實現(xiàn)無刷新的用戶登錄實現(xiàn)搜索自動提示本章目標掌握Ajax技術原理掌握Ajax應用編程Web2.0互聯(lián)網(wǎng)前世今生動態(tài)網(wǎng)頁靜態(tài)網(wǎng)站null黑暗年代革命啦，革命啦！三五年就來一次Web2.0Web2.0的特點用戶貢獻內(nèi)容內(nèi)容聚合RSS更豐富的“用戶體驗”內(nèi)容聚合每個小“窗口”可以關閉、最小化和進行個性化設置所有操作都是在不刷新窗口的情況下完成的自動補全為什么使用Ajax3-1無刷新：不刷新整個頁面，只刷新局部無刷新的好處只更新部分頁面，有效利用帶寬只是登錄，沒必要刷新“龐大”的頁面。無刷新的好處提供連續(xù)的用戶體驗觀看視頻時執(zhí)行操作，不希望頁面刷新視頻從頭播放吧為什么使用Ajax3-2只刷新了局部頁面，視頻繼續(xù)播放無刷新的好處提供類似C/S的交互效果，操作更方面為什么使用Ajax3-3拖動、放大、縮小Google地圖自動補全功能什么是AjaxAjax：只刷新局部頁面的技術JavaScript：更新局部的網(wǎng)頁XML：一般用于請求數(shù)據(jù)和響應數(shù)據(jù)的封裝XMLHttpRequest對象：發(fā)送請求到服務器并獲得返回結(jié)果CSS：美化頁面樣式異步：發(fā)送請求后不等返回結(jié)果，由回調(diào)函數(shù)處理結(jié)果Ajax技術的核心XMLHttpRequest3-1JavaScript對象XMLHttpRequest是整個Ajax技術的核心，它提供了異步發(fā)送請求的能力常用方法方法名說明open(method,URL,async)

建立與服務器的連接method參數(shù)指定請求的HTTP方法,典型的值是GET或POSTURL參數(shù)指定請求的地址async參數(shù)指定是否使用異步請求，其值為true或falsesend(content)發(fā)送請求content參數(shù)指定請求的參數(shù)setRequestHeader(header,value)設置請求的頭信息XMLHttpRequest3-2常用屬性onreadystatechange：指定回調(diào)函數(shù)readystate:

XMLHttpRequest的狀態(tài)信息

就緒狀態(tài)碼說明0XMLHttpRequest對象沒有完成初始化1XMLHttpRequest對象開始發(fā)送請求2XMLHttpRequest對象的請求發(fā)送完成3XMLHttpRequest對象開始讀取響應，還沒有結(jié)束4XMLHttpRequest對象讀取響應結(jié)束XMLHttpRequest3-3常用屬性status：HTTP的狀態(tài)碼

responseText：獲得響應的文本內(nèi)容

responseXML：獲得響應的XML文檔對象狀態(tài)碼說明200服務器響應正常400無法找到請求的資源403沒有訪問權(quán)限404訪問的資源不存在500服務器內(nèi)部錯誤就緒狀態(tài)是4而且狀態(tài)碼是200，才可以處理服務器數(shù)據(jù)實現(xiàn)無刷新用戶名驗證當用戶名文本框失去焦點時，發(fā)送請求到服務器，判斷用戶名是否存在如果已經(jīng)存在則提示：“用戶名已被可用”如果不存在則提示：“用戶名可以可用”如何使用Ajax5-1使用文本框的onBlur事件使用Ajax技術實現(xiàn)異步交互創(chuàng)建XMLHttpRequest對象通過XMLHttpRequest對象設置請求信息向服務器發(fā)送請求創(chuàng)建回調(diào)函數(shù)，根據(jù)響應狀態(tài)動態(tài)更新頁面如何使用Ajax5-2驗證姓名表單-checkname.jsp使用JavaScript驗證用戶名-checkname.jsp<formname="form1"action=""method="post">

用戶名

<inputtype="text"id="uname"name="username"value="" onblur="checkUserExists()"/> <divid="mess"style="display:inline"/> </form>functioncheckUserExists(){ varf=document.form1; varusername=f.username.value; if(username==""){ alert("用戶名不能為空"); returnfalse; }else{

doAjax("CheckUserServlet?username="+username); }}調(diào)用Ajax進行處理如何使用Ajax5-3使用Ajax進行處理-checkname.jsp1、創(chuàng)建XMLHttpRequest對象varxmlhttp;functiondoAjax(url){ try{

xmlhttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{

xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{

xmhttp=newXMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }catch(e){ } } }}如何使用Ajax5-4使用Ajax進行處理-checkname.jsp2、設置在服務器完成后要運行的回調(diào)函數(shù)3、設置請求信息4、發(fā)送請求functiondoAjax(url){

創(chuàng)建XMLHttpRequest對象 …

xmlhttp.onreadystatechange=processRequest;

xmlhttp.open("post",url,true); //如果以post方式請求，必須要添加

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(null);}當?shù)膕end()方法不配置參數(shù)時，建議最好加上nullfunctionprocessRequest(){ varmessdiv=document.getElementById(“mess”)； if(xmlhttp.readyState==4)

if(xmlhttp.status==200){ //responseText表示請求完成后，返回的字符串信息 if(xmlhttp.responseText=="false") messdiv.innerHTML="用戶名可以使用"; else

messdiv.innerHTML="用戶名已被使用"; }else{ alert("請求處理返回的數(shù)據(jù)有錯誤"); } }}演示示例：使用Ajax實現(xiàn)用戶名驗證如何使用Ajax5-5學員操作：實現(xiàn)無刷新郵箱驗證2-1需求說明：實現(xiàn)無刷新郵箱驗證。在用戶注冊頁面，當E-mail文本框失去焦點時，判斷用戶是否存在學員操作：實現(xiàn)無刷新郵箱驗證2-2實現(xiàn)思路：1、開發(fā)注冊表單-reg.jsp2、使用Ajax驗證郵箱名-reg.jsp

2.1創(chuàng)建XMLHttpRequest對象

2.2設置在服務器完成后要運行的回調(diào)函數(shù)2.3設置請求信息2.4發(fā)送請求3、編寫CheckEmailServletServlet4、編寫EmailModel5、編寫EmailDao完成時間：25分鐘完成時間：15分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解實現(xiàn)無刷新用戶登錄輸入用戶名和密碼，單擊“登錄”，異步提交表單如果正確，顯示歡迎信息如果錯誤，顯示提示信息使用Ajax實現(xiàn)登錄2-1functiondoAjax(){

createXMLHttpRequest(); varname=document.getElementById("uname").value; varpwd=document.getElementById("upwd").value; if(XMLHttp!=null){ varurl="LoginServlet?uname="+name+"&upwd="+pwd；

XMLHttp.open("POST",url,true); XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); XMLHttp.onreadystatechange=processRequest; XMLHttp.send(null); }else{ alert("不能創(chuàng)建XMLHttpRequest對象實例") }}調(diào)用創(chuàng)建對象的方法演示示例：使用Ajax實現(xiàn)用戶登錄使用Ajax實現(xiàn)登錄2-2學員操作：實現(xiàn)無刷新用戶登錄2-1需求說明：實現(xiàn)無刷新用戶登錄輸入用戶名和密碼，單擊“登錄”，異步提交表單如果正確，顯示歡迎信息如果錯誤，顯示提示信息學員操作：實現(xiàn)無刷新用戶登錄2-2實現(xiàn)思路：1、編寫登錄頁面2、實現(xiàn)Ajax登錄-客戶端

3、實現(xiàn)Ajax登錄-服務器端完成時間：15分鐘完成時間：10分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解實現(xiàn)搜索自動提示功能使用Ajax實現(xiàn)自動提示功能5-1搜索提示的原理每輸入完一個關鍵字時，向服務器發(fā)送一個請求服務器根據(jù)用戶輸入的關鍵字，從數(shù)據(jù)庫中搜索相關關鍵字信息，并返回到客戶端在客戶端顯示提示信息注意事項當鍵盤的按鍵抬起時，觸發(fā)onkeyup鍵盤事件將文本框的plete屬性設置為off，以免影響搜索提示當搜索提示出現(xiàn)后，需要將其中選中的搜索項突出顯示，以便區(qū)分使用Ajax實現(xiàn)自動提示功能5-2編寫搜索頁面<h3> Ajax實現(xiàn)搜索提示</h3><divstyle="width:500px"> <formaction=""id="formSearch"> <inputtype="text"id="txtSearch"name="txtSearch" onkeyup="searchSuggest()"plete="off"/> <inputtype="submit"id="cmdSearch" name="cmdSearch"value="搜索"/><br> <divid="suggest"style="width:200px"></div> </form></div>使用Ajax實現(xiàn)自動提示功能5-3服務器端代碼：通過數(shù)據(jù)庫進行查詢，獲取相關提示文本，最后將查詢結(jié)果返回客戶端publicclassSearchSuggestextendsHttpServlet{ publicvoiddoGet(…){ … Stringstr=request.getParameter("search"); ListstrList=newArrayList(); try{ if(str!=null&str.length()>0){ … rs=stmt.executeQuery("selectdistinct(title)from suggestwheretitlelike'"+str+"%'orderbytitle"); while(rs.next()) strList.add(rs.getString("title")); StringBuffersbu=newStringBuffer(); intsize=strList.size(); for(inti=0;i<size;i++) sbu.append((String)strList.get(i)+"-"); out.print(sbu.toString()); } }catch(Exceptione){ e.printStackTrace(); } }}獲取查詢結(jié)果將結(jié)果放入List轉(zhuǎn)換為一個字符串，以“-”分隔個提示文本返回字符串使用Ajax實現(xiàn)自動提示功能5-4客戶端回調(diào)函數(shù)：在客戶端查詢結(jié)果，實現(xiàn)自動提示效果functionprocessReuqest(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ varsobj=document.getElementById("suggest"); sobj.innerHTML=""; varstr=xmlhttp.responseText.split("-"); varsuggest=""; if(str.length>0&&str[0].length>0){

for(i=0;i<str.length;i++){

suggest+="<divonmouseover='javascript:suggestOver(this);'"; suggest+="onmouseout='javascript:suggestOut(this);'"; sug