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

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

时间： 2024-10-06 04:57:55

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

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

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

给网页中的元素添加onclick事件(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>给网页中的元素添加onclick事件</p></title> <script src="jquery-1.7.1

【项目实战】---使用ajax完毕username是否存在异步校验

小伙伴在上网的时候.须要下载或者观看某些视频资料,更或者是在逛淘宝的时候.我们都须要注冊一个用户,当我们填写好各种信息,点击确定的时候.提示username已经存在.小编就想,为什么当我们填写完username的时候,她就自己主动提示username已经存在.我们也不须要浪费那么多感情.直到填写完那么多的信息之后在提示,在小编近期的项目中,就碰到这个问题.我们能够使用ajax完毕username是否存在.今天这篇博客.小编就简单的总结一下,怎样使用ajax来完毕校验,还请小伙伴多多不吝赐教哦`(

抓取网页中的内容、如何解决乱码问题、如何解决登录问题以及对所采集的数据进行处理显示的过程

本文主要介绍如何抓取网页中的内容.如何解决乱码问题.如何解决登录问题以及对所采集的数据进行处理显示的过程.效果如下所示: 1.下载网页并加载至HtmlAgilityPack 这里主要用WebClient类的DownloadString方法和HtmlAgilityPack中HtmlDocument类LoadHtml方法来实现.主要代码如下. var url = page == 1 ? "http://www.cnblogs.com/" : "http://www.cnblogs

问答项目---账号密码异步校验后进行PHP校验

在做登陆的时候,通过异步校验后还需要通过PHP来校验账号和密码的正确性. PHP校验账号密码: public function login(){ if(!IS_POST){echo "页面不存在"; $this->redirect('index'); die();}; $username = I('post.username'); $pwd = I('post.password','','md5'); $code = I('post.code'); $obj = new \Thi

使用Ajax完成用户名异步校验--【SSH】

1.事件触发--onblur <td><!-- onblur用户离开输入框的时候执行 --> <input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"> <span id="span1&quo

项目中使用的ajax异步读取数据结构设计

设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生成纯数据. ajax异步读取 使用了jQuery.ajax,通过ajax POST方式请求后台处理ashx页面,并传递相关参数. ashx 完成动态加载用户控件,并根据接收的参数对控件的属性进行赋值. 加载控件,借助于博客园老赵的一篇博文,链接找不到了,以后再补. public class View

浅谈如何使用python抓取网页中的动态数据

我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念, 动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器后动态生成的,而之前并没有的. 在编写爬虫进行网页数据抓取的时候,经常会遇到这种需要动态加载数据的HTML网页,如果还是直接从网页上抓取那么将无法获得任何数据. 今天,我们就在这里简单聊一聊如何用python来抓取页面中的JS动态加载的数据. 给出一个网页:豆瓣电影排行榜,其中的所有电影信息都

前端开发css实战：使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示