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

2024-12-04 02:57:55

学习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将异步校验表单改写为同步表单

同步表单校验的缺点响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据) 异步校验表单的初衷提升用户体验最大化减少网络请求,减轻服务器压力下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号) 校验工号复制代码代码如下: var BASE_PATH = '${rc.contextPath}';
详解javascript传统方法实现异步校验

学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起,本文来谈一下对传统校验的认识: 代码1index.jsp文件: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"
详解JavaScript 异步编程

异步的概念异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念. 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行).而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系. 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高: 以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一
详解SpringBoot中的参数校验(项目实战)

Java后端发工作中经常会对前端传递过来的参数做一些校验,在业务中还要抛出异常或者不断的返回异常时的校验信息,充满了if-else这种校验代码,在代码中相当冗长.例如说,用户注册时,会校验手机格式的正确性,用户名的长度等等.虽说前端也可以做参数校验,但是为了保证我们API接口的可靠性,以保证最终数据入库的正确性,后端进行参数校验不可忽视. Hibernate Validator 提供了一种统一方便的方式,让我们快速的实现参数校验. Hibernate Validator 使用注解,实现声明式校验
详解JavaScript 的执行机制

一.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web Worker,但javascript是单线程这一核心仍未改变. 为什么js是单线程的语言?因为最初的js是用来在浏览器验证表单操纵DOM元素的.如果js是多线程的话,两个线程同时对一个DOM进行了相互冲突的操作,那么浏览器的解析是无法执行的. Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同
详解JavaScript执行模型

JavaScript执行模型引言 JavaScript是一个单线程(Single-threaded)异步(Asynchronous)非阻塞(Non-blocking)并发(Concurrent)语言,这些语言效果通过一个调用栈(Call Stack).一个事件循环(Event Loop).一个回调队列(Callback Queue)有些时候也叫任务队列(Task Queue)与跟运行环境相关的API组成. 概念调用栈 Call Stack 调用栈是一个LIFO后进先出数据结构的函数运行栈,它
详解JavaScript Promise和Async/Await

概述一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生
详解JavaScript状态容器Redux

目录一.Why Redux 二.Redux Data flow 三.Three Principles(三大原则) 四.Redux源码解析 4.1.index.js 4.2.createStore.js 4.3.combineReducers.js 4.4.bindActionCreators.js 4.5.compose.js 4.6.applyMiddleware.js 五.从零开始实现一个简单的Redux 六.Redux Devtools 七.总结一.Why Redux 在说为什么用 R
详解Java中CountDownLatch异步转同步工具类

使用场景由于公司业务需求,需要对接socket.MQTT等消息队列. 众所周知 socket 是双向通信,socket的回复是人为定义的,客户端推送消息给服务端,服务端的回复是两条线.无法像http请求有回复. 下发指令给硬件时,需要校验此次数据下发是否成功. 用户体验而言,点击按钮就要知道此次的下发成功或失败. 如上图模型, 第一种方案使用Tread.sleep 优点:占用资源小,放弃当前cpu资源缺点: 回复速度快,休眠时间过长,仍然需要等待休眠结束才能返回,响应速度是固定的,无法及时响
详解JavaScript Alert函数执行顺序问题

目录问题分析解决替换 Alert() 函数 setTimeOut函数小结问题前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求,每次选择后都将选择结果暂时输出到页面上,最后一次选择结束后再一次性将选项传到后端处理. 代码类似于: var step1 = confirm("exec step1?"); $('#result').html($('#result').html() +
详解JavaScript 中的批处理和缓存

场景最近在生产环境遇到了下面这样一个场景: 后台在字典表中存储了一些之前需要前后端共同维护的枚举值,并提供根据 type/id 获取字典的 API.所以在渲染列表的时候,有很多列表的字段直接就是字典的 id,而没有经过后台的数据拼装. 起初,吾辈解决问题的流程如下确定字典字段,添加转换后的对象类型接口将对象列表进行转换得到其中字典字段的所有值对字典 id 列表进行去重根据 id 列表从后台获取到所有的字典数据将获得的字典数据转换为 id => 字典的 Map 遍历最初的列表,对里面

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

相关推荐

随机推荐