ajax实例Ajax实例

转载

mob604756fd2a33 2013-05-29 19:38:00

文章标签 xml html ajax javascript css 文章分类 代码人生

发一下牢骚和主题无关：

最近想学着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不支持，而且实现这个的方法居然又十几种之多

提交到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实例Ajax实例_xml