学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起,本文来谈一下对传统校验的认识:
代码1index.jsp文件:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>如何使用传统方法异步验证用户名的唯一性</title> <script type="text/javascript"> function goDemo(pageName){ window.location.href='<%=basePath%>'+pageName; } </script> </head> <body> <center style="margin-top: 10%"><font style="color: red;font-size: 18pt;font-weight: bold;">如何使用传统方法异步验证用户名的唯一性</font></center><br> 例子一:<input type="button" value="例子一" onclick="goDemo('demo1.jsp');"/><br><br> 例子二:<input type="button" value="例子二" onclick="goDemo('demo2.jsp');"/><br><br> 例子一与例子二的区别:两者都实现了使用传统方法异步验证用户名的唯一性的功能,区别在于使用的servlet中的的方法不同:"例子一"使用的servlet中的doGet方法;"例子二"使用的servlet中的doPost方法。 </body> </html>
代码2demo1.jsp文件:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用的servlet中的doGet方法</title> <script type="text/javascript"> function checkUserName(){ var value=document.getElementById("userName").value; if(value==""){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=red>用户名不能为空!!!</font>"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){/*适用于IE7以上(包括IE7)的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){/*适用于IE6.0以下(包括IE6.0)的IE浏览器*/ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }//第一步:创建XMLHttpRequest对象,请求未初始化 xmlHttpRequest.onreadystatechange = function (){//readyState值发生改变时XMLHttpRequest对象激发一个readystatechange事件,进而调用后面的函数 if(xmlHttpRequest.readyState==1){ xmlHttpRequest.send();//第三步:发送请求,也可以为xmlHttpRequest.send(null) } if(xmlHttpRequest.readyState==2){ console.log("send()方法已执行,请求已发送到服务器端,但是客户端还没有收到服务器端的响应。"); } if(xmlHttpRequest.readyState==3){ console.log("已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。"); } if(xmlHttpRequest.readyState==4){//客户端接收服务器端信息完毕。第四步:处理服务器端发回来的响应信息 if(xmlHttpRequest.status==200){//与Servlet成功交互 console.log("客户端已完全接收服务器端的处理响应。"); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\"> 用户名已被使用!</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"green\"> 用户名有效!!!</font>"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败!</font>"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet"+value,true);//第二步:完成请求初始化,提出请求。open方法中的三个参数分别是:请求方式、路径、是否异步(true表示异步,false表示同步) } } } </script> </head> <body> <center style="margin-top: 10%"><font style="color: red;font-size: 18pt;font-weight: bold;">使用的servlet中的doGet方法</font><br><br> 用户名:<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();"> <font size="2" id="showUserName"> *用户名必填,具有唯一性。</font> </center> </body> </html>
代码3demo2.jsp文件:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用的servlet中的doPost方法</title> <script type="text/javascript"> function checkUserName(){ var value=document.getElementById("userName").value; if(value==""){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=red>用户名不能为空!!!</font>"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){/*适用于IE7以上(包括IE7)的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){/*适用于IE6.0以下(包括IE6.0)的IE浏览器*/ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }//第一步:创建XMLHttpRequest对象,请求未初始化 xmlHttpRequest.onreadystatechange = function (){//readyState值发生改变时XMLHttpRequest对象激发一个readystatechange事件,进而调用后面的函数 if(xmlHttpRequest.readyState==1){ xmlHttpRequest.send();//第三步:发送请求,也可以为xmlHttpRequest.send(null) } if(xmlHttpRequest.readyState==2){ console.log("send()方法已执行,请求已发送到服务器端,但是客户端还没有收到服务器端的响应。"); } if(xmlHttpRequest.readyState==3){ console.log("已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。"); } if(xmlHttpRequest.readyState==4){//客户端接收服务器端信息完毕。第四步:处理服务器端发回来的响应信息 if(xmlHttpRequest.status==200){//与Servlet成功交互 console.log("客户端已完全接收服务器端的处理响应。"); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\"> 用户名已被使用!</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"green\"> 用户名有效!!!</font>"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败!</font>"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet"+value,true);//第二步:完成请求初始化,提出请求。open方法中的三个参数分别是:请求方式、路径、是否异步(true表示异步,false表示同步) } } } </script> </head> <body> <center style="margin-top: 10%"><font color="red" size="5"><strong>使用的servlet中的doPost方法</strong></font><br><br> 用户名:<input type="text" id="userName" name="userName" size="27" onblur="checkUserName()"> <font size=2 id="showUserName"> *用户名必填,具有唯一性。</font> </center> </body> </html>
代码4AjaxCheckUserNameServlet.java文件:
package com.ghj.packagofserlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxCheckUserNameServlet extends HttpServlet { private static final long serialVersionUID = 6387744976765210524L; /** * 处理demo1.jsp中异步验证 * * @author GaoHuanjie */ public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { try{ response.setCharacterEncoding("UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //System.out.println(1/0);//故意出现异常,以检查demo1.jsp中xmlHttpRequest.status!=200的分支语句是否可用 String userName=request.getParameter("userName");//获取“用户名” System.out.println("处理demo1.jsp中异步验证,用户名为:"+userName); if ("admin".equals(userName)) { out.print("1");//“1”表示用户名不可用。 } else { out.print("2");//“2”表示用户名可用。 } out.flush(); out.close(); }catch (Exception e) { e.printStackTrace(); response.setStatus(405); } } /** * 处理demo2.jsp中异步验证 * * @author GaoHuanjie */ public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { try{ response.setCharacterEncoding("UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //System.out.println(1/0);//故意出现异常,以检查demo2.jsp中xmlHttpRequest.status!=200的分支语句是否可用 String userName=request.getParameter("userName");//获取“用户名” System.out.println("处理demo2.jsp中异步验证,用户名为:"+userName); if ("admin".equals(userName)) { out.print("1");//“1”表示用户名不可用。 } else { out.print("2");//“2”表示用户名可用。 } out.flush(); out.close(); }catch (Exception e) { e.printStackTrace(); response.setStatus(405); } } }
代码5web.xml文件:
<"1.0" encoding="UTF-8""http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <servlet> <servlet-name>AjaxCheckUserNameServlet</servlet-name> <servlet-class>com.ghj.packagofserlet.AjaxCheckUserNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxCheckUserNameServlet</servlet-name> <url-pattern>/AjaxCheckUserNameServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
以上就是使用传统方法实现异步校验的详细代码,希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路
- EA称AI是其业务核心!能提高开发效率、节约成本
- 卫华.1990-太阳升【BMG】【WAV+CUE】
- 呼吸乐队.1992-THEBREATHING【深飞】【WAV+CUE】
- 李玟.2008-1994-2008豪华典藏精选2CD【SONY】【WAV+CUE】
- 《张学友 再现歌神的光辉岁月 梦想成真 2CD》[WAV/分轨][1.2GB]
- 《海来阿木 高音测试王》[WAV+CUE][500MB]
- 《许巍 歌声给你生命的力量 珍藏许巍 3CD》[WAV/分轨][2GB]
- 《直到黎明重制版》配置要求推荐
- 《赛博朋克2077》2.13版本更新内容一览
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览