JavaWeb22案例

　　头条创作挑战赛12。3案例
　　需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在
　　12。3。1分析前端完成的逻辑给用户名输入框绑定光标失去焦点事件onblur发送ajax请求，携带username参数处理响应：是否显示提示信息后端完成的逻辑接收用户名调用service查询User。此案例是为了演示前后端异步交互，所以此处不做业务逻辑处理，直接将返回结果定为true返回标记
　　整体流程如下：
　　12。3。2后端实现packageweb。servlet；Author晨默Date202291222：51importjavax。servlet。；importjavax。servlet。http。；importjavax。servlet。annotation。；importjava。io。IOException；WebServlet（nameSelectUserServlet，valueSelectUserServlet）publicclassSelectUserServletextendsHttpServlet｛OverrideprotectedvoiddoGet（HttpServletRequestrequest，HttpServletResponseresponse）throwsServletException，IOException｛1。接受用户名Stringusernamerequest。getParameter（username）；2。调用service查询user对象，直接给flag赋值为true，表明用户名占用booleanflagtrue；3。响应标记response。getWriter（）。write（flag）；｝OverrideprotectedvoiddoPost（HttpServletRequestrequest，HttpServletResponseresponse）throwsServletException，IOException｛this。doGet（request，response）；｝｝12。3。3前端实现
　　在register。html页面的body结束标签前编写script标签，在该标签中实现如下逻辑1。第一步：给用户名输入框绑定光标失去焦点事件onblur1。给用户输入框绑定失去焦点事件document。getElementById（username）。onblurfunction（）｛｝2。第二步：发送ajax请求，携带username参数
　　在第一步绑定的匿名函数中书写发送ajax请求的代码2。1创建核心对象letxhttp；if（window。XMLHttpRequest）｛xhttpnewXMLHttpRequest（）；｝else｛xhttpnewActiveXObject（Microsoft。XMLHTTP）；｝2。2发送请求xhttp。open（GET，http：localhost：5050AjaxDemowarSelectUserServlet？usernameusername）；xhttp。send（）；2。3获取响应xhttp。onreadystatechangefunction（）｛if（this。readyState4this。status200）｛｝｝
　　由于发送的是GET请求，所以需要在URL后拼接从输入框获取的用户名数据。而在第一步绑定的匿名函数中通过以下代码可以获取用户名数据获取用户名的值varusernamethis。value；this：给谁绑定的事件，this就代表谁
　　而携带数据需要将URL修改为：xhttp。open（GET，http：localhost：8080ajaxdemoselectUserServlet？usernameusername）；3。第三步：处理响应：是否显示提示信息
　　当this。readyState4this。status200条件满足时，说明已经成功响应数据了。
　　此时需要判断响应的数据是否是true字符串，如果是说明用户名已经占用给出错误提示；如果不是说明用户名未被占用清除错误提示。代码如下判断if（this。responseTexttrue）｛用户名存在，显示提示信息document。getElementById（usernameerr）。style。display；｝else｛用户名不存在，清除提示信息document。getElementById（usernameerr）。style。displaynone；｝
　　综上所述，所有代码为：！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8title欢迎注册titlelinkhrefcssregister。cssrelstylesheetheadbodyh1欢迎注册h1span已有帐号？span登录bodyhtml
　　效果如下：