Ajax开发

最新推荐文章于 2024-09-10 22:24:48 发布

Summer_Anny

最新推荐文章于 2024-09-10 22:24:48 发布

阅读量479

点赞数

分类专栏：网页开发

网页开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax开发
（参考郭克华《Java EE 程序设计与应用开发（第二版）》）

Ajax核心代码

 <SCRIPT LANGUAGE="JavaScript">
 function showInfo(){
  var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//步骤1
  xmlHttp.open("get","info.jsp",true);            //步骤2
  xmlHttp.onreadystatechange=function(){          //步骤3
     if(xmlHttp.readyState==4){                   //步骤4
         infoDiv.innerHTML=xmlHttp.responseText;
      }
   }
  xmlHttp.send();
}

</SCRIPT>

步骤1：在IE中实例化Msxml2.XMLHTTP对象

var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);

注意：如果不是IE浏览器，实例化方法如下：

推荐一个编程框架：

<SCRIPT LANGUAGE="JavaScript">
    var xmlHttp=false;
    function initAjax(){
       if(window.XMLHttpRequest){//Mozilla等浏览器
             xmlHttp=new XMLHttpRequest();
       }
    else if(window.ActiveXObject){ //IE浏览器
      try{
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
          window.alert("该浏览器不支持Ajax");
      }  
    }
  }
}
</SCRIPT>

当然可以在网页载入的时候运行该函数

...

步骤2：指定异步提交的目标和提交方式，调用了xmlHttp的open方法
xmlHttp.open(“get”,“info.jsp”,true);
参数1：请求的方式，有get,post
参数2：请求的目标是info.jsp
参数3：是否是异步请求，true是，false不是

步骤3：指定当xmlHttp状态改变时，需要进行的处理
xmlHttp.onreadystatechange=function(){ //步骤3
//处理代码
}

还有一种情况，是将处理代码单独写成函数
xmlHttp.onreadystatechange=handle;
…
function handle(){
//处理代码
}

在请求的过程中，xmlHttp的状态不断改变，其状态保存在xmlHttp的readySate属性中，用xmlHttp.readyState表示，常见的readySate属性值如下：
0：未初始化状态，对象已经创建，尚未调用open()
1:已初始化状态，调用open（）方法以后
2：发送数据状态，调用send()方法以后
3：数据传送中状态，已经接到部分数据，但接收尚未完成。
4：完成状态，数据全部接收完成。
每次状态改变，都会调用相应的处理函数。
一般情况下，仅仅在readyState状态为4时才做相应操作。

步骤4：编写处理代码

xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4){                   //步骤4
         infoDiv.innerHTML=xmlHttp.responseText;
      }
}

xmlHttp.responseText表示从提交目标中得到的输出的文本内容，也就是info.jsp的输出。

除了div可以达到动态显示内容外，span也可以做到该效果，两者的区别如下：
span将其内部的内容以文本段显示，div将其内部的内容以段落显示。

步骤5：发出请求，调用xmlHttp的send函数
xmlHttp.send();
如果请求方式是get的话，send可以没有参数，或者参数为null;如果请求方式是post,可以将需要传送的内容传入send函数中以字符串的形式发出。

由于Ajax项目中，目标页面是异步提交，如果页面发生了修改，在客户端不一定能够马上检测到，显示的仍然是以前的目标页面的内容，在此情况下，可以用以下方法进行解决：
（1）将目标页面直接输入URL进行访问，迫使服务器重新编译。
（2）将目标页面用response.setHeader(“Cache-Control”,“no-cache”);设置为不在客户端缓存驻留。
示例：
login.jsp调用LoginServlet,在LoginServlet中进行判断，并调用loginFail.jsp和loginSuccess.jsp

loginSuccess.jsp

<%@ page language="java" contentType="text/html; charset=gb2312"%>
<html>
	<body>
		欢迎${account}登录成功!<BR>
		您可以选择以下功能：<BR>
		<a href="">查询学生</a><BR>	
		<a href="">修改学生资料</a><BR>	
		<a href="">修改用户资料</a><BR>	
		<a href="">退出</a><BR>	
	</body>
</html>

loginFail.jsp

<%@ page language="java" contentType="text/html; charset=gb2312"%>
<html>
	<body>
		对不起，登录失败！<BR>
		请您检查是否：<BR>
		账号名写错<BR>
		密码写错		
	</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
  	<SCRIPT LANGUAGE="JavaScript">
  		function login(){
  			var account = document.loginForm.account.value;
  			var password = document.loginForm.password.value;  			
	  		var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  		var url = "servlet/LoginServlet?account="+account+"&password="+password;
			xmlHttp.open("POST", url, true);				
			xmlHttp.onreadystatechange=function() {
				if (xmlHttp.readyState==4) {
					resultDiv.innerHTML = xmlHttp.responseText;
				}
				else{
					resultDiv.innerHTML += "正在登录，请稍候......";
				}				
			}
			xmlHttp.send();	
  		}
	</SCRIPT>  	
    欢迎登录学生管理系统. <hr>
    <div id="resultDiv">
    <form name="loginForm">
    	请您输入账号:<input type="text" name="account"><BR>
    	请您输入密码:<input type="password" name="password"><BR>
    	<input type="button" value="登录" onclick="login()">
    </form>
    </div>
  </body>
</html>

LoginServlet

package servlets;
import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


public class LoginServlet extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String account = request.getParameter("account");
		String password = request.getParameter("password");
		String loginState = "Fail";
		String targetUrl = "/loginFail.jsp";
		//认为账号密码相等就算登录成功，此处是对DAO的简化
		if(account.equals(password)){
			loginState = "Success";
			targetUrl = "/loginSuccess.jsp";
			HttpSession session = request.getSession();
			session.setAttribute("account", account);
		}
		request.setAttribute("loginState", loginState);
		ServletContext application = this.getServletContext();
		RequestDispatcher rd = 
			application.getRequestDispatcher(targetUrl);
		rd.forward(request, response);
	}
}