详解javascript传统方法实现异步校验


Posted in Javascript onJanuary 22, 2016

学习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?userName="+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?userName="+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文件:

<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="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>

以上就是使用传统方法实现异步校验的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js漂浮广告实现代码
Aug 15 Javascript
详解JavaScript常量定义
Jan 03 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
jquery.validate提示错误信息位置方法
Jan 22 #Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
URL Rewrite的设置方法
2007/01/02 PHP
php实现多城市切换特效
2015/08/09 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
2014年最新学习全国两会精神心得
2014/03/17 职场文书
毕业自我鉴定书
2014/03/24 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年采购工作总结
2014/11/20 职场文书
技术股东合作协议书
2014/12/02 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android