AJAX异步提交

jfqxll · 发表于 2013-1-23 02:46:34

什么是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="登录" /> <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;}}}

这就是一个最基本的AJAX异步提交，可以在此基础上进行修改，实现可以完成自己需求功能的AJAX异步提交

		自动登录	找回密码
密码			立即注册