什么是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; } } }