小狼从上回做第二单元项目开始就对ajax充满了好奇,看着别人的代码,总是觉得什么能让数据不通过刷新页面完成提交,从而知道用户输入的用户名是否已经输入过。未来研究这个神奇的事情,今天,小狼完成了ajax异步的get提交
首先,先把后台写好
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String name=request.getParameter("uname"); boolean uexits=false; if("admin".equals(name)){ uexits=true; out.print(uexits);//输出 }else{ out.print(uexits); } out.flush(); out.close(); }
显而易见,这是一个servlet,小狼主要是觉得这是一个练习,自然是怎么简单怎么来,就不用struts了。
其次,写一个表单
<form name="myform" action="ajax.do"> <table align="center"> <tr> <td>用户账户:</td> <td><input name="uname" onblur="checkUser(this)"/></td> </tr> <tr> <td>用户密码:</td> <td><input name="pass1" type="password"/></td> </tr> <tr> <td>重复密码:</td> <td><input name="pass2" type="password"/></td> </tr> <tr> <td><input name="submit" type="submit" value="submit"/></td> <td><input name="reset" type="reset" value="reset"/></td> </tr> </table> </form>
接下来,就是我们的重头戏了。。。。ajax大神
var xmlHttpRequest; function checkUser(ouser){ var uname=ouser.value; if(!uname){ alert("用户的账号不为空"); ouser.focus(); return ; } var url="ajax.do?uname="+uname; xmlHttpRequest=createXmlHttpRequest(); xmlHttpRequest.onreadystatechange=checkStatus; xmlHttpRequest.open("GET",url,true); xmlHttpRequest.send(null); } //这是一个回调函数,处理完成对后台的数据的处理后的内容 function checkStatus(){ if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var result=xmlHttpRequest.responseText; //用正则表达式去掉首尾空格 result=result.replace(/(^\s*)|(\s*$)/g,""); //判断servlet的输出 if(result=="true"){ alert("用户名已经存在"); }else{ alert("用户名可以使用"); } } } //这是小狼上一篇讲的东西,就不叙述了 function createXmlHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } }此示例,小狼都自己亲自实践过,绝对ok,如果您觉得有用,就给小狼一个关注吧