ajax实例--注册

最新推荐文章于 2024-08-06 16:00:52 发布

dacainiao007

最新推荐文章于 2024-08-06 16:00:52 发布

阅读量646

点赞数 2

文章标签： ajax xmlhttprequest function button safari internet

本文链接：https://blog.csdn.net/dacainiao007/article/details/7883741

版权

JavaWeb 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<%@ page language="java"  pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>校验用户名是否存在</title>
		<script charset="gb2312" type="text/javascript" src="./register.js"> </script>
	</head>
	<body>
	<center>
	<form action=""  enctype="application/x-www-form-urlencoded">
		<h3>请填写用户注册信息</h3>
		<table  border="1">
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="username" value="" id="username">
				  <div id="divcheck"></div>
				  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="psw" value=""></td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="password" name="confpsw" value=""></td>
			</tr>
			<tr>
				<td>出生日期:</td>
				<td><input type="text" name="birthday" value=""></td>
			</tr>
		</table>
		 </form>
		 </center>
	</body>
	
</html>

window.οnlοad=function(){
	//<input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
	document.getElementById("checkusername").οnclick=function(){
		//1.
		var xmlRequest= ajaxFunction();
		
		//<input type="text" name="username" value="" id="username">
		var username = document.getElementById("username").value;
		
		//2.
		xmlRequest.onreadystatechange=function(){
			if(xmlRequest.readyState==4){
				if(xmlRequest.status==200||xmlRequest.status==304){
					var  info = xmlRequest.responseText;
					//获取层 <div id="divcheck"></div>
					 document.getElementById("divcheck").innerHTML=info;
				}
			}
		}
		
		//3.
		xmlRequest.open("post","../registerServlet?timeStamp="+new Date().getTime(),true);
		
		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		//4.
		xmlRequest.send("username="+username);
	}
	
}


/**
 * 该函数创建XmlHttpRequest对象
 */
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }
     return xmlHttp;
 }

package cn.ajax;

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 RegisterServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		System.out.println("register   dopost");
		
		String username = request.getParameter("username");
		if ("sa".equals(username)) {
			out.println("用户名已经存在");
		}else {
			out.println("用户名可以使用");
		}
	}

}