Ajax判断注册用户名重复

使用Ajax判断注册用户名重复：

1.AJAX简介
AJAX是实现web2.0服务中的核心技术，全称为“异步JavaScript和XML技术”(Asynchronous JavaScript and XML)；Ajax的核心技术理念在于使用XMLHttpRequest对象发送异步请求。最初为XMLHttpRequest对象提供浏览器支持的是微软公司。AJAX技术的出现，可以说是挽救了传统的B/S结构，并赋与web应用新的生命。如果要我用简单的一句话讲AJAX是什么：我就会说是在b/s结构上给予用户c/s的界面观感。

2.AJAX与传统web的区别：（局部刷新）
传统web页面的服务是基于http协议的，所以它永远也改变不了“请求—响应”的模式。你必须“点”一下，它才能动一下，而且每次都必须刷新整个页面，这也意味着服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容。
AJAX代码运行在浏览器和服务器之间，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页面中需要改变的某一部分：某一个div层、表格中的某一个单元格。用户不会看到页面全部被刷新了。

3.需要使用到的文件（下面都有）：
HTML：reg.html（界面，与AJAX代码）
java（servlet）：AccountCheckServlet（验证重复）
web.xml配置

AJAX:验证重复用户名
当用户输入注册用户名后，焦点离开第一个输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用户输入发送给服务器验证，并将服务器返回的结果消息显示在输入框下面的div层上。这个流程将由三部分组成：
Login.html:用户界面；
AccountCheckServlet .java服务器上用来验证用户名的Servlet，返回一个字符串做为验证结果；Js编写的AJAX代码:请送请求，并更新页面；我们先从关键的AJAX代码编写开始：

下面是reg.html文件代码：
（里面使用Ajax）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//第一步：
/*XMLHTTPRequest是AJAX应用中的核心API，它被js调用以向服务器发送请求，并异步接收服务器返回的数据后，更新局部页面。使用AJAX功能时，首先要在js中创建XMLHTTPRequest对象：*/
	var request;//异步请求对象
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {//IE浏览器
			request = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {//FireFox，netscape等等浏览器
			request = new XMLHttpRequest();
		} else {
			window.alert("你的浏览器不支持XMLHTTPRequest，将无使用AJAX功能！");
		}
	}
/*现在我们有了请求对象，接下来要考虑的是，XMLHTTPRequest对象发送了请求后，服务器返回的结果应如何处理，即AJAX中的回调方法。*/
	//回调函数[响应之后执行的函数]
	function processResult() {
		if ((request.readyState == 4) && (request.status == 200)) {
			var str = request.responseText;//获得返回数据
			if(str=="true"){
				//显示到指定的组件中
				document.getElementById("msg").innerHTML ="<span style='color:#00cc00'>该用户名可以使用</span>" ;
			}else{
				//显示到指定的组件中
				document.getElementById("msg").innerHTML ="<span style='color:#cc0000'>该用户名已经被注册！</span>" ;
			}
			
		}
	}

	//发送请求,绑定回调方法
	function sendRequest() {
		//创建XMLHTTPRequest对象
		createXMLHttpRequest();
		//绑定回调方法（因为是异步请求，这句代码指示了请求结果返回后，由那个js函数接收处理），
		request.onreadystatechange = processResult;
		//获得输入框中的内容
		var username = document.getElementById("userName").value;
		
		//发送get请求
		// request.open("GET", "AccountCheckServlet?username="+username, true); 
		//发送Post请求
		request.open("POST", "AccountCheckServlet", true);
		request.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		//将userName做为请求参数发送上去
		request.send("username=" + username);
		//request.send(null);
	}
</script>
</head>
<body>

	<h2>用户注册</h2>
		帐号:<input type="text" id="userN
ame" name="userName" onblur="sendRequest()" />
</body>
</html>

---------------------------------------------------------------------

//AccountCheckServlet类，请求响应类

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 AccountCheckServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String username = request.getParameter("username");
		//System.out.println("收到了请求"+username);
		
		PrintWriter out = response.getWriter();
		if(username.equals("newer")){//本来要连接数据库查询，这里为了方便便直接定义。
			out.write("false");
		}else{
			out.write("true");
		}
		out.flush();
	}

}

--------------------------------------------------------------------

当然还有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" 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">
  <display-name>PicValidate</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

   <servlet>
    <servlet-name>AccountCheckServlet</servlet-name>
    <servlet-class>servlet.AccountCheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AccountCheckServlet</servlet-name>
    <url-pattern>/AccountCheckServlet</url-pattern>
  </servlet-mapping>
  
</web-app>

Ajax判断注册用户名重复

猜你喜欢