使用Ajax改進用戶體驗市公開課一等獎省賽課獲獎課件

第十章使用Ajax改進用戶體驗1使用Ajax改進用戶體驗第1頁回顧怎樣手動創(chuàng)建webservice服務端？怎樣手動創(chuàng)建webservice客戶端？怎樣自動創(chuàng)建webservice服務端？怎樣自動創(chuàng)建webservice客戶端？怎樣使用log4j2使用Ajax改進用戶體驗第2頁掌握Ajax技術原理掌握基于Ajax技術應用編程掌握基于DWR框架應用編程本章目標3使用Ajax改進用戶體驗第3頁Web2.0互聯(lián)網(wǎng)歷史動態(tài)網(wǎng)頁靜態(tài)網(wǎng)站null黑暗年代革命啦，革命啦！三五年就來一次4使用Ajax改進用戶體驗第4頁Web2.0Web2.0特點內(nèi)容聚合：新聞分類用戶貢獻內(nèi)容社會化網(wǎng)絡5使用Ajax改進用戶體驗第5頁為何使用Ajax無刷新：不刷新整個頁面，只刷新局部無刷新好處只更新部分頁面，有效利用帶寬只是登錄，沒必要刷新“龐大”頁面。6使用Ajax改進用戶體驗第6頁為何使用Ajax無刷新好處提供連續(xù)用戶體驗7使用Ajax改進用戶體驗第7頁什么是AjaxAjax：只刷新局部頁面技術AJAX：AsynchronousAndXML異步：發(fā)送請求后不等返回結果，由回調(diào)函數(shù)處理結果JavaScript：向服務器發(fā)起請求，取得返回結果，更新頁面用途使用JavaScript從服務器獲取數(shù)據(jù)而無須刷新整個頁面Asynchronous

異步JavaScriptAndXML8使用Ajax改進用戶體驗第8頁怎樣使用_

當輸入焦點離開用戶名輸入框時檢驗用戶是否存在。<html:textproperty="item.uname"

onblur="returncheckUserExists(this);"/>functioncheckUserExists(oCtl){varuname=oCtl.value;if(!uname){alert("用戶名不能為空");oCtl.focus();return;}//發(fā)送請求到服務器，判斷用戶名是否存在

......Ajaxhere......}9使用Ajax改進用戶體驗第9頁怎樣使用AjaxpublicclassUserActionextendsBaseAction{ privateUserBizuserBiz=null; publicActionForwarddoCheckUserExists(...) throwsServletException,IOException{ Stringuname=request.getParameter("uname"); booleanbExists=this.getUserBiz().isExists(uname); PrintWriterout=response.getWriter(); out.print(bExists);

returnnull; }}1、編寫服務器段代碼效果假如用戶名已存在就輸出true，不然輸出false。10使用Ajax改進用戶體驗第10頁怎樣使用Ajax2、使用XMLHttpRequest組件發(fā)送請求varxmlHttpRequest;functioncreateXmlHttpRequest(){if(window.ActiveXObject){returnnewActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){returnnewXMLHttpRequest();}}判斷不一樣瀏覽器，采取不一樣方式創(chuàng)建XMLHttpRequest對象//發(fā)送請求到服務器，判斷用戶名是否存在//請求字符串varurl="?operate=doCheckUserExists&uname="+uname;//1.創(chuàng)建XMLHttpRequest組件xmlHttpRequest=createXmlHttpRequest();//2.設置回調(diào)函數(shù)xmlHttpRequest.onreadystatechange=haoLeJiaoWo;//3.初始化XMLHttpRequest組件xmlHttpRequest.open("GET",url,true);//4.發(fā)送請求xmlHttpRequest.send(null);請求字符串狀態(tài)改變時，將要調(diào)用函數(shù)名字11使用Ajax改進用戶體驗第11頁怎樣使用Ajax補充：使用XMLHttpRequest組件發(fā)送請求window.ActiveXObject什么意思?解：判斷瀏覽器是否支持ActiveX控件。假如瀏覽器支持ActiveX控件能夠利用varxml=newActiveXObject(“Microsoft.XMLHTTP”);創(chuàng)建XMLHttpRequest對象（這是在IE7以前版本中）；在較新IE版本中能夠利用varxml=newActiveXObject("Msxml2.XMLHTTP")形式創(chuàng)建XMLHttpRequest對象;而在IE7及非IE瀏覽器中能夠利用varxml=newXMLHttpRequest()創(chuàng)建XMLHttpRequest對象12使用Ajax改進用戶體驗第12頁怎樣使用Ajax3、編寫回調(diào)函數(shù)代碼：處理返回結果更新頁面顯示狀態(tài)改變時，將要調(diào)用函數(shù)名字functionhaoLeJiaoWo(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){varb=xmlHttpRequest.responseText;if(b=="true"){ alert("用戶名已經(jīng)存在");}else{ alert("用戶名能夠使用");}}}請求狀態(tài)：0--未初始化1--初始化2--發(fā)送請求3--開始接收結果4--接收結果完成每次狀態(tài)改變都會調(diào)這個函數(shù)HTML返回碼：200--OK404--Notfound（沒有找到資源）500--服務器端犯錯取得返回結果：true或false。演示示例：使用Ajax判斷用戶是否存在13使用Ajax改進用戶體驗第13頁小結當資料內(nèi)容過多時，按字首字母分類存放更便于查找。怎樣實現(xiàn)以下功效：如右圖，點對應字母，從數(shù)據(jù)庫加載該字

母打頭用戶。只更新列表，不刷新頁面。 寫出相關JavaScript代碼。提醒：publicActionForwardtoUserList(...){Stringletter=request.getParameter("letter");Listlist=this.getUserBiz.getListByInitial(letter);...returnmapping.findForward("user_list");}提醒：varoList=document.getElementsById("uList");oList.innerHtml=xmlHttpRequest.responseText;14使用Ajax改進用戶體驗第14頁Ajax框架Ajax應用越來越廣泛，客觀上需要簡化開發(fā)過程各種Ajax框架層出不窮，各有特色DWR應用最為廣泛/dwr15使用Ajax改進用戶體驗第15頁Ajax框架DWR--DrectWebRemoting開源，無償Ajax框架將Java類公布為JavaScript可調(diào)用腳本對象提供JavaScript工具類，簡化頁面編碼/dwr16使用Ajax改進用戶體驗第16頁Ajax框架在項目中應用DWR1、準備工作下載dwr.jar,添加到項目中（/dwr）創(chuàng)建配置文件：/WEB-INF/dwr.xml在web.xml中配置<servlet><servlet-name>dwr</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class></servlet><servlet-mapping><servlet-name>dwr</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>作為servlet配置17使用Ajax改進用戶體驗第17頁怎樣使用DWR在項目中使用DWR2、公布Java類<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEdwrPUBLIC "-//GetAheadLimited//DTDDirectWebRemoting2.0//EN" "/dwr/dwr20.dtd"><dwr><allow><createcreator="new"javascript="JUserChecker"><paramname="class" value=".UserManager"/><includemethod="check"/></create></allow></dwr>要公布類名要公布方法名腳本對象名驗證公布成功18使用Ajax改進用戶體驗第18頁怎樣使用DWR在項目中使用DWR3、頁面代碼<scriptsrc='dwr/interface/JUserChecker.js'></script><scriptsrc='dwr/engine.js'></script><scriptsrc='dwr/util.js'></script>functioncheckUserExists(oCtl){varuname=oCtl.value;//發(fā)送請求到服務器，判斷用戶名是否存在JUserChecker.check(uname,haoLeJiaoWo);}functionhaoLeJiaoWo(isExist){if(is