1、第十章上机,使用Ajax改进用户体验,相关回顾,Ajax的含义是?Ajax可以用来实现什么效果?Ajax的核心组件是?使用Ajax的步骤是?,上机目标,继续增强“我的宝贝儿”在线宠物网站:在宠物信息编辑页面,在不刷新页面的情况下检查宠物名是否已经被占用。在宠物训练页面,在不刷新页面的情况下完成训练功能,并更新分数的显示。,教员讲解上机目标,训练技能点,使用XMLHttpRequest实现无刷新请求服务器。DWR的使用。,训练要点:使用XMLHttpRequest实现无刷新请求服务器 需求说明:在无刷新的情况下实现宠物训练功能:1、使用XMLHttpRequest提交请求到服务器2、获得训练结果
2、(宠物的三项分数)3、刷新显示,阶段1,讲解需求说明,实现思路及关键代码:修改原PetAction中doGame、doStory和doFeed代码。使之返回宠物得分字符串。修改petInfo.jsp页的doTraining函数。,阶段1,代码示例,讲解实现思路和关键代码,完成时间:20分钟,需求说明:在宠物信息编辑页面,当输入新的宠物名后,宠物名输入框失去焦点时检查宠物名是否已经被占用,如果已经被占用则显示提示信息。1、创建PetManager,提供检查宠物名是否存在的方法。2、在PetAction中创建doCheckNameExists方法。3、如果宠物名没有修改则不检查。,阶段2,完成时间
3、:15分钟,阶段2,常见调试问题及解决办法代码规范问题,共性问题集中讲解,训练要点:DWR的使用 需求说明:同阶段1使用DWR实现只实现“喂食”功能,阶段3,讲解需求说明,实现思路及关键代码:在PetManger中添加doFeed(Long id)方法,返回需要更新到页面的字符串添加DWR到项目中。(添加dwr.jar、dwr.xml,修改web.xml)修改petInfo.jsp页面,将喂食功能使用DWR实现,阶段3,讲解实现思路和关键代码,完成时间:15分钟,需求说明:使用DWR检查宠物名是否已经被占用 同阶段3使用DWR实现,阶段4,完成时间:15分钟,阶段4,常见调试问题及解决办法代码规范问题,共性问题集中讲解,总结,总结并布置作业,Thank you,