今天照着书上说的试着做了一下输入验证

用AJax，但是由于自己的不细心所以老是弄了好久，要注意整个Ajax与服务器交互是通过XMLHttpRequest对象去联系的。

但是目前有一个问题， 就是验证密码时，我直接使用了document.getElementById("password").innerHTML="String"的方式，我发现只要是string是中文，在浏览器显示下就是乱码，现在还没解决，记录下来，以便查阅。

jsp代码:（未包含头JSP）

<pre name="code" class="java"><%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript">
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		//Mozilla浏览器
		XMLHttpReq=new XMLHttpRequest();
	}else{
		if(window.ActiveXObjct){
			try{
				//IE
				XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
    				XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP")

				}catch(e){}
			}
		}
	}
}
//处理响应结果
function handleResponce(){
	if(XMLHttpReq.readyState==4){
		//信息成功返回，开始处理
		if(XMLHttpReq.status==200){
			var out="";
			var res=XMLHttpReq.responseXML;
			var response=res.getElementsByTagName("response")[0].firstChild.nodeValue;
			document.getElementById("usernameInfo").innerHTML=response;
			

		}
	}
}

function sendRequest(url){
	createXMLHttpRequest();
	XMLHttpReq.open("GET",url,true);
	//指定响应函数，注意这里不带括号
	XMLHttpReq.onreadystatechange=handleResponce;
	XMLHttpReq.send(null);
}

function usernameIsExist(){
	var username=document.getElementById("username").value;
	sendRequest("usernameValidation?username="+username);
}

function passwordCheck(){
	var password=document.getElementById("password").value;
	var repassword=document.getElementById("repeatedPassword").value;
	

	if(password == repassword){
		document.getElementById("passwordInfo").innerHTML="Success";
	}else{
	
		document.getElementById("passwordInfo").innerHTML="失败";

	}

}    
    
    </script>

<div id="Catalog">

<form action="registe" method="post" name="userInfo" id="userInfo">

	<h3>User Information</h3>

	<table>
		<tr>
			<td>User ID:</td>
			<td>
				<input type="text" name="username" id="username" οnblur="usernameIsExist()"/>
				
				<div><font color="red"><span id="usernameInfo"></span></font> </div>
			</td>
		</tr>
		<tr>
			<td>New password:</td>
			<td><input type="password" name="password" id="password" οnblur="passwordCheck()"/></td>
		</tr>
		<tr>
			<td>Repeat password:</td>
			<td><input type="password" name="repeatedPassword" id="repeatedPassword" οnblur="passwordCheck()"/>
			    <div><font color="red"><span id="passwordInfo"></span></font> </div>
			</td>
		   
			
		</tr>
	</table>

	<%@ include file="IncludeAccountFields.jsp"%>

	<input type="submit" name="newAccount" value="Save Account Information" />
    
</form>
</div>
<%@ include file="../common/IncludeBottom.jsp"%>

servlet类:

package org.csu.mypetstore.web.servlets;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.FileWriter;
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;

import org.csu.mypetstore.domain.Account;
import org.csu.mypetstore.service.AccountService;

public class UserNameValidationServlet extends HttpServlet {

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

		doPost(request, response);
		
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		 response.setContentType("text/xml;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		
		PrintWriter out=response.getWriter();
		
		
		String output="";
		String res="";
		//String head="<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
  
		String username=request.getParameter("username");

		AccountService accountService=new AccountService();
		Account account =accountService.getAccount(username);

		if(account!=null){
			res="用户名已被注册";
		}
		else{
			res="恭喜，用户名可用";
		}
		output="<response>"+res+"</response>";
	
		out.println(output);
		out.close();
	
		 
	}


}