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