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

学习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>如何使用传统方法异步验证用户名的唯一性</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>

代码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>用户名不能为空!!!</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>

代码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>用户名不能为空!!!</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>

代码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");//获取“用户名”
			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);
		}
	}
}

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

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

时间: 2024-10-11 15:39:55

网页中使用传统方法实现异步校验详解的相关文章

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

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

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

网页中导入特殊字体@font-face属性详解

@font-face { font-family: 'icomoon';/*自定义字体名称*/ src:url('../fonts/icomoon.eot?rretjt');/*自定义字体的路径*/ src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'),/*format为字体格式 便于浏览器识别*/ u

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定

CSS3中的弹性流体盒模型技术详解

先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解.可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局.希望我今天的这篇文章能彻底改变大家的观念. Q:如何理解盒子模型? A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之间的间隙

在ASP.NET 5应用程序中的跨域请求功能详解

在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏感数据,但是一些特殊情况下,你需要允许另外一个站点跨域请求你的网站. 跨域资源共享(CORS:Cross Origin Resources Sharing)是一个W3C标准,它允许服务器放宽对同域策咯的限制,使用CORS,服务器可以明确的允许一些跨域的请求,并且拒绝其它的请求.CORS要比JSONP

PHP中的命名空间(namespace)及其使用详解

PHP中的命名空间(namespace)及其使用详解 晶晶 2年前 (2014-01-02) 8495次浏览 PHP php自5.3.0开始,引入了一个namespace关键字以及__NAMESPACE__魔术常量(当然use关键字或use as嵌套语句也同时引入):那么什么是命名空间呢?php官网已很明确的进行了定义并形象化解释,这里直接从php官网copy一段文字[来源]. “什么是命名空间?从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在操作系统中目录

struts2.0中Action的对象生命周期详解!!(转)

原文出处:http://blog.csdn.net/wxy_g/article/details/2071662 有很多人问Struts2.0中的对象既然都是线程安全的,都不是单例模式,那么它究竟何时创建,何时销毁呢? 这个和struts2.0中的配置有关,我们来看struts.properties ### if specified, the default object factory can be overridden here ### Note: short-hand notation is

PHP中include和require的区别详解

1.概要  require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说,文件只处理一次(实际上,文件内容替换require()语句).这就意味着如果可能执行多次的代码,则使用require()效率比较高.另外一方面,如果每次执行代码时是读取不同的文件,或者有通过一组文件迭代的循环,就使用include()语句. require的使用方法如:require("myfil