首页 > 代码库 > 网页中使用传统方法实现异步校验详解

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

2024-07-11 17:34:05   216人阅读

        学习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=http://www.mamicode.com/''+pageName;>
        代码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=http://www.mamicode.com/document.getElementById("userName").value;>
        代码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=http://www.mamicode.com/document.getElementById("userName").value;>
        代码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分下载资源】


联系
我们