• 网页中使用传统方法实现异步校验具体解释


            学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起,今天星期六。我来谈一下对传统校验的认识:

            代码1——index.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>怎样使用传统方法异步验证username的唯一性</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;">怎样使用传统方法异步验证username的唯一性</font></center><br>
      		样例一:<input type="button" value="样例一" onclick="goDemo('demo1.jsp');"/><br><br>
      		样例二:<input type="button" value="样例二" onclick="goDemo('demo2.jsp');"/><br><br>
      		样例一与样例二的差别:两者都实现了使用传统方法异步验证username的唯一性的功能,差别在于使用的servlet中的的方法不同:"样例一"使用的servlet中的doGet方法;"样例二"使用的servlet中的doPost方法。
    	</body>
    </html>

            代码2——demo1.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>username不能为空。!!</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()方法已运行。请求已发送到server端,可是client还没有收到server端的响应。");
    		   		    	}
    				    	if(xmlHttpRequest.readyState==3){
    		   		    		console.log("已经接收到HTTP响应头部信息。可是消息体部分还没有全然接收结束。");
    		   		    	}
        		    		if(xmlHttpRequest.readyState==4){//client接收server端信息完毕。第四步:处理server端发回来的响应信息
    	    		    		if(xmlHttpRequest.status==200){//与Servlet成功交互
    		    		    		console.log("client已全然接收server端的处理响应。

    "); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size="2" color="red">  username已被使用!</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size="2" color="green">  username有效!!

    </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> username:<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();"> <font size="2" id="showUserName">  *username必填,具有唯一性。

    </font> </center> </body> </html>

            代码3——demo2.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>username不能为空!。!</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()方法已运行,请求已发送到server端,可是client还没有收到server端的响应。");
    		   		    	}
    				    	if(xmlHttpRequest.readyState==3){
    		   		    		console.log("已经接收到HTTP响应头部信息,可是消息体部分还没有全然接收结束。

    "); } if(xmlHttpRequest.readyState==4){//client接收server端信息完毕。第四步:处理server端发回来的响应信息 if(xmlHttpRequest.status==200){//与Servlet成功交互 console.log("client已全然接收server端的处理响应。

    "); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size="2" color="red">  username已被使用!</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size="2" color="green">  username有效!

    。</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> username:<input type="text" id="userName" name="userName" size="27" onblur="checkUserName()"> <font size=2 id="showUserName">  *username必填,具有唯一性。

    </font> </center> </body> </html>

            代码4——AjaxCheckUserNameServlet.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");//获取“username”
    			System.out.println("处理demo1.jsp中异步验证,username为:"+userName);
    			if ("admin".equals(userName)) {
    				out.print("1");//“1”表示username不可用。

    } else { out.print("2");//“2”表示username可用。 } 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");//获取“username” System.out.println("处理demo2.jsp中异步验证,username为:"+userName); if ("admin".equals(userName)) { out.print("1");//“1”表示username不可用。 } else { out.print("2");//“2”表示username可用。 } out.flush(); out.close(); }catch (Exception e) { e.printStackTrace(); response.setStatus(405); } } }

            代码5——web.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>
            【0分下载资源

  • 相关阅读:
    fis3解决web网站缓存问题
    C# 计算每周和每月固定日期
    移动端web页面上滑加载更多功能
    常见三种字符编码的区别:ASCII、Unicode、UTF-8
    ef AddDays报错
    .NET语言的编译过程:中间语言(IL)和即时编译器(JIT)
    ajax 传递数组类型参数后台接收不到的问题
    sql server 作业没跑、开启sql 代理服务、新建作业
    在javascript中NodeList和Array的区别及转换方法
    我经历的几种开发模式和心理
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/7145266.html
Copyright © 2020-2023  润新知