本文介绍了如何利用Ajax技术在BS架构下创建具有交互性的应用程序，通过JavaScript函数调用JSP文件，间接调用JavaBean，实现类似CS模式的交互体验。示例代码包括Ajax请求的实现、响应处理以及在页面中调用Ajax函数的方法。
利用AJAX在BS下实现CS模式下的可交互的应用程序
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
以往，在web下只能通过提交页面的方式才能对表单的数据或数据库数据进行处理，有了AJAX，我们可以在javascript函数里，通过打开JSP文件（可带参数），从而间接实现调用JAVABEAN。
比如，页面中有一个Button按钮，我可以在这个Button按钮里面调用一个JavaScript函数，函数里面可通过事先写好的AJAX代码打开一个JSP页面，这时大家应该都清楚了，如何在JSP里面调用JAVABEAN我就不介绍了，通过这种方式，可以实现CS开发模式下的交互应用程序。
以下为示例代码：
1、ajax.js
var ajaxreq=false, ajaxCallback;
function ajaxRequest(filename){
try{
//ie7/ie5 /ie6
ajaxreq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(error){
try{
//firefox / others
ajaxreq=new XMLHttpRequest();
}catch(error){
return false;
}
}
ajaxreq.open("GET",filename,true); //注意1
//ajaxreq.open("GET", filename, true);
//get方法 和 post方法 根据需要选择.
ajaxreq.onreadystatechange=ajaxResponse;
ajaxreq.send(null);
}
function ajaxResponse(){
if(ajaxreq.readyState !=4) return; //readyState 表示请求已经完成：zhansing
if(ajaxreq.status==200){//status=200表示返回正常：zhansing
if(ajaxCallback) {ajaxCallback(); ajaxreq=false; }
}else{
alert("Request failed:" + ajaxreq.statusText);
}
return true;
}
注意：
（1） 在ajaxreq.open("GET",filename,true);里面，若用“post”时，还需要设置http表头，“true”代表是的异步，若想用同步，可改为“false”。
（2） ajaxreq.readyState !=4 表示请求已完成。ajaxreq.status==200表示返回正常
（3） ajaxreq.send(null);其中的null表示，发送的参数为空，当然也可以在此添加需要的参数。
2、Open.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
/*重要：不使用缓存！*/
response.setHeader("Expires","0");
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
try
{
//操作内容，调用JavaBean等等
}catch(Exception e)
{
}
3、调用界面的JavaScript函数
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript">
function AllJoin()
{
var sURL = "Open.jsp";
ajaxRequest(sURL);
}
</script>
注意：在调用的界面中要注意ajax.js文件与被调用界面的路径问题，本例是放在统一个路径下了。
要是大家还有什么疑问，可以去我的资源上下载整个示例源文件^_^
扫一扫
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
