AJAX的异步提交

什么是AJAX异步提交

传统的web中,用户触发一个事件(比如点击一个按钮),服务器做出回应,返回一个HTML页面给用户。

好比当当(其实现在当当的搜索也已经实现了AJAX异步提交),你在输入一本书的名字,点击搜索按钮后,服务器返回一个该书名的页面给用户

最先实现AJAX异步提交的当属各种搜索引擎,当你在搜索输入框中输入某个关键字,例如JAVA,还没有点击搜索按钮时,搜索引擎已经就返回给你了许多结果,比如JAVA学习,JAVA论坛等等

同样的例子还体现在一些注册页面上,输入某个用户名之后,不用点击该用户名是否被使用按钮(这个按钮根本就不会出现),页面在你输入完成后(我猜是在切换到下一个输入框后),就会提示该用户名能不能被使用

现在有一个AJAX异步提交的例子,用于验证输入的用户名和密码是否正确

 

就拿代码说话吧:

 

 

  1. <script type="text/javascript">  
  2.     var request;  
  3.     function createRequest() {  
  4.       try {  
  5.         request = new XMLHttpRequest();  
  6.       } catch (trymicrosoft) {  
  7.         try {  
  8.           request = new ActiveXObject("Msxml2.XMLHTTP");  
  9.         } catch (othermicrosoft) {  
  10.           try {  
  11.             request = new ActiveXObject("Microsoft.XMLHTTP");  
  12.           } catch (failed) {  
  13.             request = false;  
  14.           }  
  15.         }  
  16.       }  
  17.         if (!request)  
  18.          alert("Error initializing XMLHttpRequest!");  
  19.     }  
  20.         //用以拿到输入框的帐号和密码以及后台Servlet地址  
  21.     function toLogin(){  
  22.         var username = document.getElementById("username").value;  
  23.         var password = document.getElementById("password").value;  
  24.         var url = "servlet/adminLoginServlet?username="+username+"&password="+password;  
  25.         createRequest();  
  26.         request.open("post",url,true);  
  27.         request.onreadystatechange = processResponse;  
  28.         request.send(null);  
  29.     }  
  30.       
  31.     function MyLogin(){   
  32.         document.getElementById("login").style.visibility="visible";   
  33.     }  
  34.     function processResponse(){  
  35.     var res=request.responseText;  
  36.          if (request.readyState == 4) { // 判断对象状态  
  37.          if (request.status == 200) { // 信息已经成功返回,开始处理信息  
  38.                
  39.               //由后台Servlet传过来的信息  
  40.   
  41.               if(res=="登陆成功"){  
  42.                   //进入登录成功后的页面  
  43.                   window.location.href="../admin/welcome.jsp";  
  44.                 
  45.               }else{  
  46.                 //在原登录页面显示登录失败的信息  
  47.                  window.alert(res);  
  48.                   
  49.                }  
  50.                                                                  
  51.             } else { //页面不正常  
  52.                   
  53.                 window.alert("您所请求的页面有异常。");  
  54.             }  
  55.         }  
  56.     }  
  57.     </script>  
  58.   
  59.  <body>  
  60.     <h2 aling="center">Ajax 异步请求</h2><hr>   
  61.         账号:<input type="text" name="username" ><br>  
  62.         密码:<input type="password" name="password" ><br>  
  63.     <input name="submit" type="submit" class="buttom"  
  64.           value="登 录" onClick="toLogin();return false;"/>  
  65.     <input name="exit" type="reset" class="buttom"   
  66.           value="重 置" />  
  67.   </body>  

 

 

 后台servlet代码:

 

  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3.   
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.http.HttpServlet;  
  6. import javax.servlet.http.HttpServletRequest;  
  7.   
  8. import javax.servlet.http.HttpServletResponse;  
  9.   
  10. public class Login extends HttpServlet {  
  11.    
  12.     public void doPost(HttpServletRequest request,   
  13. HttpServletResponse response)  
  14.             throws ServletException, IOException {  
  15.   
  16.         String username = request.getParameter("username");  
  17.         String password = request.getParameter("password");  
  18.               
  19.         response.setContentType("text/xml; charset=utf-8");  
  20.         PrintWriter out = response.getWriter();  
  21.         if(username==null||password==null){  
  22.             out.print("账号和密码不能为空!");  
  23.             return;  
  24.         }  
  25.         if(username.equals("ajax")&&password.equals("java")){   
  26.             out.print("登陆成功!");   
  27.             return;  
  28.         } else {  
  29.             out.print("账号或密码错误!");  
  30.             return;  
  31.         }  
  32.     }  
  33.   
  34. }  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值