首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解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传统方法实现异步校验

- Author -

不动声色的蜗牛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
目录管理(1) html5+(1) Get(1) 磁盘管理(1) 虚拟机(3) 二维码(2) Post(1) 条码(1) plus.io(1) 日志(1)
You might like
php中单个数据库字段多列显示（单字段分页、横向输出）
2014/07/28 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
[JS]点出统计器
2020/10/11 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
AngularJS动态菜单操作指令
2017/04/25 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python之父谈Python的未来形式
2016/07/01 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
如何实现jdbc性能优化
2012/07/30 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
公司开业致辞
2015/07/29 职场文书
学校教学管理制度
2015/08/06 职场文书
《刺客之王：C罗全景传记》：时代从来不会亏待手艺人
2019/11/28 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js