ajax验证用户名是否可以使用

首先创建一个web project 项目.

新建一个ajax3.jsp页面,代码如下.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---验证用户名是否可以使用</title>

<script type="text/javascript" src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
	window.onload = function() {
		//得到id=t的文本框
		var txt = document.getElementById("t");
		//给文本框注册一个失去焦点事件
		txt.onblur = function() {
			
			//获取文本框中的信息
			var value=txt.value;
			//第一步:得到XMLHttpRequest对象.
			var xmlhttp=getXmlHttpRequest();
			//2.设置回调函数
			xmlhttp.onreadystatechange = function() {

				//5.处理响应数据  当信息全部返回，并且是成功
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					
					var msg=xmlhttp.responseText;    //通过responseText获取服务器信息
					document.getElementById("s").innerHTML=msg;    
				}
			};

			//post请求方式，参数设置
			xmlhttp.open("POST", "${pageContext.request.contextPath}/ajax3");
			xmlhttp.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			xmlhttp.send("username="+value);
		}
	};
</script>

</head>
<body>
	<input type="text" name="username" id="t"><span id="s"></span>    <%-- 在文本框后面显示服务器文字 --%>
	<br>
	<input type="text">
</body>
</html>

innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容；  
如：<div id="aa">这是内容</div> ，  
我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；  
也可以对某对象插入内容，如  document.getElementById('abc').innerHTML='这是被插入的内容';     
这样就能向id为abc的对象插入内容。

再新建一个my.js的文件,将ajax.jsp的部分代码抽取出来,如下就是 my.js 的代码.

function getXmlHttpRequest() {
	var xmlhttp = null;

	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest(); // 针对于现在的浏览器包括IE7以上版本
	} else if (window.ActiveXObject) {
		// 针对于IE5,IE6版本
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

然后写服务器的代码.

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Ajax3Servlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");    //服务器响应下面的<用户名不可使用>编码格式为utf-8
		request.setCharacterEncoding("utf-8");
		List<String> names = new ArrayList<String>();    //把已经占用的名字写入集合
		names.add("tom");
		names.add("fox");
		names.add("james");
		names.add("张三");
		PrintWriter out = response.getWriter();
		String username = request.getParameter("username");    //拿到传递过来的username

		if (names.contains(username)) {     //contains 是包含的意思,就是判断names里面是否包含了username,如果包含就返回true,否则false.
			out.print("<font color='red'>用户名不可使用</font>");
		} else {
			out.print("<font color='green'>用户名可以使用</font>");
		}
		out.flush();    //释放掉缓冲区的数据
		out.close();
	}

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

如下图显示效果,tom是服务器里存在的用户名.

tom123是服务器里面不存在的用户名.

ajax验证用户名是否可以使用

猜你喜欢