小狼从上回做第二单元项目开始就对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大神
此示例,小狼都自己亲自实践过,绝对ok,如果您觉得有用,就给小狼一个关注吧
- 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");
- }
- }