任务1基于Ajax实现无刷新的用户名存在性验证

7.1任务1：基于Ajax实现无刷新的用户名存在性验证任务描述在会员注册页中，实现无刷新用户名验证。当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在；如果已经存在提示“该账号已被使用”，如果不存在则提示“该账号可用”。任务描述技能目标理解Ajax技术能够使用JQuery的$.ajax()方法实现页面局部刷新技能目标7.1.1Ajax技术概述Ajax的全称是AsynchronousJavaScriptandXML，即异步的JavaScript和XML，能够在无需重新加载整个网页的情况下，更新部分网页。Ajax的执行流程是，用户界面触发事件调用JavaScript，通过XMLHttpRequest对象（Ajax引擎）异步发送请求到服务器，服务器返回XML、JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CS技术局部更新用户界面。7.1.2jQuery的$.ajax()方法jQuery将Ajax相关的操作都进行了封装，只需调用一个$.ajax()方法即可完成请求的发送和复杂格式结果的解析，简单方便。$.ajax()方法等价于jQuery.ajax()，可以通过发送HTTP请求加载远程数据，是jQuery最底层的Ajax实现.语法格式：$.ajax([settings])；其中，settings是$.ajax()方法的参数列表，用于配置Ajax请求的键值对集合。7.1.2jQuery的$.ajax()方法$.ajax()方法的参教语法比较特殊。参数列表需要包含在一对花括号"{}"之间；每个参数以"参数名"："参数值"的方式书写；如有多个参数，以逗号"，"隔开。例如，$.ajax({"url":"NameServlet",//要提交的URL路径

"type":"GET",//发送请求的方式

"data":"uname="+name,//要发送到服务器的数据

"dataType":"text",//指定返回的数据格式

"success":callBack,//响应成功后要执行的代码

"error":function(){//请求失败后要执行的代码

alert("出现错误，请稍后再试或与管理员联系！");}});任务实现一、完成数据访问层代码任务实现二、完成业务逻辑层代码在业务逻辑接口（UserBiz）中，新增用户名存在性验证方法；并在业务逻辑类（UserBizImpl）中，通过调用数据访问层的方法，实现该方法。任务实现三、完成注册控制器Servlet为了不和之前的代码混淆，这里新建一个Servlet类（NameServlet），专门用来处理用户名的存在性验证，并把结果返回客户端。Stringname=request.getParameter("uname");//获取请求参数UserBizub=newUserBizImpl();booleanused=ub.isUserExist(name);//进行存在性验证response.setContentType("text/html;charset=UTF-8");PrintWriterout=response.getWriter();out.print(used);//打印结果（true或false）out.flush();out.close();任务实现四、完成用户名存在性的无刷新验证1、引入jQuery文件在WebRoot下新建js文件夹，并把提前下载好的jQuery拷贝到该文件夹下。然后在注册页面reg.jsp中引入jQuery。例如，<scripttype="text/javascript"src="js/jquery-1.12.4.min.js"></script>2、在账号文本框后面新增一个层标签<inputname="uname"id="uname"type="text"/><!--添加id属性--><divid="nameDiv"style="display:inline"></div><!--该层用于显示提示信息-->任务实现3、完成无刷新验证代码为用户名文本框（uname）添加失去焦点的事件处理函数，把请求提交给NameServlet。然后根据结果（true或者false），在nameDiv层显示不同的提示消息。关键代码如下：任务实现拓展与提高页面对不同访问者的响应叫做事件，如在元素上移动鼠标、选取单选按钮、点击元素等。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语"触发"（或"激发"）.例如："当您按下按键时触发keypress事件"。拓展与提高在jQuery中，大多数DOM事件都有一个等效的jQuery方法。例如，页面中指定一个点击事件：$("p").click();下一步是编写事件处理代码，可以通过一个事件函数实现。例如，$("p").click(function(){//动作触发后执行的代码!});jQuery函数位于一个document.ready函数中：$(document).ready(function(){//开始写jQuery代码...});这是为了防止文档在完全加载（就绪）之前运行jQuery代码，即在DOM加载完成后才可以对