Ajax实例

来源：互联网发布：wake瑜伽软件下载编辑：程序博客网时间：2024/06/05 04:48

最近想学着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总体感觉用起来不错，不过个人感觉好像也只是提供了一个用户友好的页面而已，其他好像就没啥用了?