AJAX异步提交

最新推荐文章于 2024-10-09 14:04:46 发布

jfqxll

最新推荐文章于 2024-10-09 14:04:46 发布

阅读量105

点赞数

分类专栏： J2EE 文章标签： Ajax Servlet Java 搜索引擎 Microsoft

J2EE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

}