AJAX的异步提交

    技术2025-05-15  52

    什么是AJAX异步提交传统的web中,用户触发一个事件(比如点击一个按钮),服务器做出回应,返回一个HTML页面给用户。好比当当(其实现在当当的搜索也已经实现了AJAX异步提交),你在输入一本书的名字,点击搜索按钮后,服务器返回一个该书名的页面给用户最先实现AJAX异步提交的当属各种搜索引擎,当你在搜索输入框中输入某个关键字,例如JAVA,还没有点击搜索按钮时,搜索引擎已经就返回给你了许多结果,比如JAVA学习,JAVA论坛等等同样的例子还体现在一些注册页面上,输入某个用户名之后,不用点击该用户名是否被使用按钮(这个按钮根本就不会出现),页面在你输入完成后(我猜是在切换到下一个输入框后),就会提示该用户名能不能被使用现在有一个AJAX异步提交的例子,用于验证输入的用户名和密码是否正确

     

    就拿代码说话吧:

     

     

    <script type="text/javascript">      var request;      function createRequest() {        try {          request = new XMLHttpRequest();        } catch (trymicrosoft) {          try {            request = new ActiveXObject("Msxml2.XMLHTTP");          } catch (othermicrosoft) {            try {              request = new ActiveXObject("Microsoft.XMLHTTP");            } catch (failed) {              request = false;            }          }        }          if (!request)           alert("Error initializing XMLHttpRequest!");      }          //用以拿到输入框的帐号和密码以及后台Servlet地址      function toLogin(){          var username = document.getElementById("username").value;          var password = document.getElementById("password").value;          var url = "servlet/adminLoginServlet?username="+username+"&password="+password;          createRequest();          request.open("post",url,true);          request.onreadystatechange = processResponse;          request.send(null);      }            function MyLogin(){           document.getElementById("login").style.visibility="visible";       }      function processResponse(){      var res=request.responseText;           if (request.readyState == 4) { // 判断对象状态           if (request.status == 200) { // 信息已经成功返回,开始处理信息                               //由后台Servlet传过来的信息                  if(res=="登陆成功"){                    //进入登录成功后的页面                    window.location.href="../admin/welcome.jsp";                                }else{                  //在原登录页面显示登录失败的信息                   window.alert(res);                                   }                                                                               } else { //页面不正常                                    window.alert("您所请求的页面有异常。");              }          }      }      </script>     <body>      <h2 aling="center">Ajax 异步请求</h2><hr>           账号:<input type="text" name="username" ><br>          密码:<input type="password" name="password" ><br>      <input name="submit" type="submit" class="buttom"            value="登 录" onClick="toLogin();return false;"/>      <input name="exit" type="reset" class="buttom"             value="重 置" />    </body>  

     

     

     后台servlet代码:

     

    import java.io.IOException;  import java.io.PrintWriter;    import javax.servlet.ServletException;  import javax.servlet.http.HttpServlet;  import javax.servlet.http.HttpServletRequest;    import javax.servlet.http.HttpServletResponse;    public class Login extends HttpServlet {         public void doPost(HttpServletRequest request,   HttpServletResponse response)              throws ServletException, IOException {            String username = request.getParameter("username");          String password = request.getParameter("password");                        response.setContentType("text/xml; charset=utf-8");          PrintWriter out = response.getWriter();          if(username==null||password==null){              out.print("账号和密码不能为空!");              return;          }          if(username.equals("ajax")&&password.equals("java")){               out.print("登陆成功!");               return;          } else {              out.print("账号或密码错误!");              return;          }      }    }  

    最新回复(0)