深入理解Ajax与J2EE结合应用实例-优快云博客

最近想学着J2EE来着，就学到了Ajax这个东西，就跟着学了点，下面就给个实例，省的自己以后用到了也不知道哪找去。

html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>user_info.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
  
  String.prototype.trim = function() {
  	return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 }
  	var xmlHttp;
  	
  	function createXMLHttpRequest(){
  		if(window.XMLHttpRequest){
  			xmlHttp=new XMLHttpRequest();
  		}else{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
  	}
  
	function validate(user){
	
		if(user.value.trim().length!=0){

			createXMLHttpRequest();
			var url="user_validate.jsp?userNumber="+user.value.trim()+"&time="+new Date().getTime();
			xmlHttp.open("get",url,true);
			
			// 把方法地址赋值给xmlHttp的onreadystatechange属性
			xmlHttp.onreadystatechange=callback;
			
			xmlHttp.send(null);
		}
	}
	
	function callback(){
	//	alert(xmlHttp.readyState);
		if(xmlHttp.readyState==4){ // Ajax引擎初始化完成
			if(xmlHttp.status ==200){ // http 200响应
			//	alert("请求成功");
		//	alert(xmlHttp.responseText);
				document.getElementById("spanuserNumber").innerHTML="<font color='red'>"
				+xmlHttp.responseText+"</font>"
			}else{
				alert("请求错误"+xmlHttp.status);
			}
		}
	}
	
</script>
  


  </head>
  
  <body>
  
  
    This is my HTML page. <br>
    
    <form name="input" action="html_form_action.asp" method="get">
    <table border =0 >
    <tr>
	<td>Usernumber: </td>
	<td><input type="text" name="usernumber" id="usernumber" onblur="validate(this)"/>
	<span id="spanuserNumber"></span>
	</td>
	</tr>
	<tr>
	<td>Username:</td>
	<td> <input type="text" name="username" />
	</td>
	</tr>
	<tr>
	<td>
	null:
	</td>
	<td> <input type="text" name="user" />
	</td>
	</tr>
	<tr>
	<td>
	<input type="submit" value="Submit" />
	</td>
	</tr>
</table>
</form>
  </body>
</html>

这里用到了trim(),按照教程的是用trim(str),而不是 str.trim()调用，上网查了下才发现IE不支持，而且实现这个的方法居然又十几种之多，http://www.cnblogs.com/rubylouvre/archive/2009/09/18/1568794.html

提交到Ajax的jsp页面如下：

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

    <%
    	String userNumber=request.getParameter("userNumber");
    	if(JDBCConnection.findByUserNumber(userNumber)){
    		System.out.print("JDBCConnection.findByUserNumber()--userer="+userNumber);
    		//out.println("the number is already in use");
    		out.println("号码已存在");
    	}
    
     %>

然后出现的效果如下：