使用Ajax改进用户体验市公开课一等奖省赛课获奖课件

第十章使用Ajax改进用户体验1使用Ajax改进用户体验第1页回顾怎样手动创建webservice服务端？怎样手动创建webservice客户端？怎样自动创建webservice服务端？怎样自动创建webservice客户端？怎样使用log4j2使用Ajax改进用户体验第2页掌握Ajax技术原理掌握基于Ajax技术应用编程掌握基于DWR框架应用编程本章目标3使用Ajax改进用户体验第3页Web2.0互联网历史动态网页静态网站null黑暗年代革命啦，革命啦！三五年就来一次4使用Ajax改进用户体验第4页Web2.0Web2.0特点内容聚合：新闻分类用户贡献内容社会化网络5使用Ajax改进用户体验第5页为何使用Ajax无刷新：不刷新整个页面，只刷新局部无刷新好处只更新部分页面，有效利用带宽只是登录，没必要刷新“庞大”页面。6使用Ajax改进用户体验第6页为何使用Ajax无刷新好处提供连续用户体验7使用Ajax改进用户体验第7页什么是AjaxAjax：只刷新局部页面技术AJAX：AsynchronousAndXML异步：发送请求后不等返回结果，由回调函数处理结果JavaScript：向服务器发起请求，取得返回结果，更新页面用途使用JavaScript从服务器获取数据而无须刷新整个页面Asynchronous

异步JavaScriptAndXML8使用Ajax改进用户体验第8页怎样使用_

当输入焦点离开用户名输入框时检验用户是否存在。<html:textproperty="item.uname"

onblur="returncheckUserExists(this);"/>functioncheckUserExists(oCtl){varuname=oCtl.value;if(!uname){alert("用户名不能为空");oCtl.focus();return;}//发送请求到服务器，判断用户名是否存在

......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组件发送请求varxmlHttpRequest;functioncreateXmlHttpRequest(){if(window.ActiveXObject){returnnewActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){returnnewXMLHttpRequest();}}判断不一样浏览器，采取不一样方式创建XMLHttpRequest对象//发送请求到服务器，判断用户名是否存在//请求字符串varurl="?operate=doCheckUserExists&uname="+uname;//1.创建XMLHttpRequest组件xmlHttpRequest=createXmlHttpRequest();//2.设置回调函数xmlHttpRequest.onreadystatechange=haoLeJiaoWo;//3.初始化XMLHttpRequest组件xmlHttpRequest.open("GET",url,true);//4.发送请求xmlHttpRequest.send(null);请求字符串状态改变时，将要调用函数名字11使用Ajax改进用户体验第11页怎样使用Ajax补充：使用XMLHttpRequest组件发送请求window.ActiveXObject什么意思?解：判断浏览器是否支持ActiveX控件。假如浏览器支持ActiveX控件能够利用varxml=newActiveXObject(“Microsoft.XMLHTTP”);创建XMLHttpRequest对象（这是在IE7以前版本中）；在较新IE版本中能够利用varxml=newActiveXObject("Msxml2.XMLHTTP")形式创建XMLHttpRequest对象;而在IE7及非IE浏览器中能够利用varxml=newXMLHttpRequest()创建XMLHttpRequest对象12使用Ajax改进用户体验第12页怎样使用Ajax3、编写回调函数代码：处理返回结果更新页面显示状态改变时，将要调用函数名字functionhaoLeJiaoWo(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){varb=xmlHttpRequest.responseText;if(b=="true"){ alert("用户名已经存在");}else{ alert("用户名能够使用");}}}请求状态：0--未初始化1--初始化2--发送请求3--开始接收结果4--接收结果完成每次状态改变都会调这个函数HTML返回码：200--OK404--Notfound（没有找到资源）500--服务器端犯错取得返回结果：true或false。演示示例：使用Ajax判断用户是否存在13使用Ajax改进用户体验第13页小结当资料内容过多时，按字首字母分类存放更便于查找。怎样实现以下功效：如右图，点对应字母，从数据库加载该字

母打头用户。只更新列表，不刷新页面。 写出相关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应用越来越广泛，客观上需要简化开发过程各种Ajax框架层出不穷，各有特色DWR应用最为广泛/dwr15使用Ajax改进用户体验第15页Ajax框架DWR--DrectWebRemoting开源，无偿Ajax框架将Java类公布为JavaScript可调用脚本对象提供JavaScript工具类，简化页面编码/dwr16使用Ajax改进用户体验第16页Ajax框架在项目中应用DWR1、准备工作下载dwr.jar,添加到项目中（/dwr）创建配置文件：/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;//发送请求到服务器，判断用户名是否存在JUserChecker.check(uname,haoLeJiaoWo);}functionhaoLeJiaoWo(isExist){if(is