Ajax验证用户名是否注册案例

发布时间：2020-12-16 02:05:37 所属栏目：百科来源：网络整理

导读：myeclipse下建web project，主要有2个文件，一个是index.jsp,一个是后台验证用户名是否注册的servlet Check.java index.jsp代码如下： %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%%String path = request.getContextPath();String

myeclipse下建web project，主要有2个文件，一个是index.jsp,一个是后台验证用户名是否注册的servlet Check.java

index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Ajax演示案例</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script language="javascript">
	
		function $(id){
			return document.getElementById(id);
		}
	
		//获得XMLHttpRequest对象
		function getXMLHttpRequest(){
			var xmlHttp;

			try{
				// Firefox,Opera 8.0+,Safari
				xmlHttp=new XMLHttpRequest();
			}catch (e)
			{
				// Internet Explorer
				try{
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch (e)
				{
					try{
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e)
					{
						//alert("您的浏览器不支持AJAX！");
						return false;
					}
				}
			}	
			
			return xmlHttp;
			
		}
		
		//Ajax异步检测用户名是否已经注册
		function Check(){
			var xmlHttp = getXMLHttpRequest();
			var url = "servlet/Check?username="+$("username").value;
			if(xmlHttp!=false){
				//成功获得xmlHttp对象
				xmlHttp.onreadystatechange=function()
				{
					if(xmlHttp.readyState==4)
					{
						if(xmlHttp.status==200){
							$("info").innerHTML=xmlHttp.responseText;
						}else {
							$("res").innerHTML="Ajax传输出错，状态码不为200，实际值为"+xmlHttp.status;
						}
					}
				}
				
				xmlHttp.open("GET",url,true);
				xmlHttp.send(null);					
				
			}
			else{
				$("res").innerHTML="<b>您的浏览器不支持AJAX！</b>";
			}
		}
		
	</script>
  </head>
  
  <body>
    这是一个Ajax演示案例，我们要实现的效果就是在填写注册信息的时候实时告知用户所填写的用户名是否存在<br>
    <form>
    	用户名:<input type="text" id="username" onkeyup="Check()"><span id="info"></span><br>
    	密码:<input type="password" id="pswd">
    </form>
    <div id="res" style="color:gray;font-size:200%">提示信息显示区</div>
  </body>
</html>

Check.java代码

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

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

		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		String username = request.getParameter("username");
		
		username = new String(username.getBytes("ISO-8859-1"),"UTF-8");//处理中文乱码
		
		if(username.equalsIgnoreCase("Ajax")){
			out.print("<font color='red'><b>"+username+"</b>已经被注册!!</font>");
		}
		else {
			out.print("<font color='blue'>用户名<b>"+username+"</b>可以注册</font>");
		}

	}

	public void doPost(HttpServletRequest request,IOException {
		doGet(request,response);
	}

}

运行效果

上面的代码实现在用户名输入框输入用户名后Ajax立即将输入的值发给服务器，服务器判断该用户名是否能够注册。

Ajax只能和所在的服务器进行通信，也就是说虽然Ajax能够通过open send等方法给服务器发请求发数据并获取服务器的返回数据，但是不能用Ajax抓取其他网站上的数据，比如我们想通过Ajax获得csdn上的某个页面是不能实现的。Ajax只能和所在的服务器通信，那么就意味着包含Ajax的脚本必须放在一个服务器中才可能有效，这一点和js不同，js文件放在本地用浏览器打开就能运行，但是Ajax放在本地打开是不能工作的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!