您的位置：首页 > 其它

利用AJAX在BS下实现CS模式下的可交互的应用程序

2008-09-01 15:48 459 查看

利用[/b]AJAX[/b]在[/b]BS[/b]下实现[/b]CS[/b]模式下的可交互的应用程序[/b][/b]
[/b]
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
以往，在web下只能通过提交页面的方式才能对表单的数据或数据库数据进行处理，有了AJAX，我们可以在javascript函数里，通过打开JSP文件（可带参数），从而间接实现调用JAVABEAN。
比如，页面中有一个Button按钮，我可以在这个Button按钮里面调用一个JavaScript函数，函数里面可通过事先写好的AJAX代码打开一个JSP页面，这时大家应该都清楚了，如何在JSP里面调用JAVABEAN我就不介绍了，通过这种方式，可以实现CS开发模式下的交互应用程序。
以下为示例代码：
1[/b]、ajax.js[/b]
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[/b]、[/b]Open.jsp[/b]

<%@ 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[/b]、调用界面的[/b]JavaScript[/b]函数[/b][/b]
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript">
function AllJoin()
{
var sURL = "Open.jsp";
ajaxRequest(sURL);
}
</script>
注意：在调用的界面中要注意ajax.js文件与被调用界面的路径问题，本例是放在统一个路径下了。

要是大家还有什么疑问，可以去我的资源上下载整个示例源文件^_^

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航