最近想学着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("号码已存在");
}
%>
然后出现的效果如下：
对于ajax总体感觉用起来不错，不过个人感觉好像也只是提供了一个用户友好的页面而已，其他好像就没啥用了?