您的位置: 首页  >  IT文章  >  网页中使用传统方法实现异步校验具体解释

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

分类: IT文章 • 2022-07-28 12:17:32

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

        代码1——index.jsp文件：



        代码2——demo1.jsp文件：




");
		    		            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" >
		  	<font size="2" >  *username必填，具有唯一性。
</font>
	  	</center>
	</body>
</html>




        代码3——demo2.jsp文件：




");
		   		    	}
    		    		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" >
		  	<font size=2 >  *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" >

	<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分下载资源】

相关推荐