zl程序教程

您现在的位置是:首页 >  前端

当前栏目

基于Ajax的无限级菜单

AJAX 基于 无限 菜单
2023-06-13 09:13:41 时间

支持Form的无闪提交(方法有点笨)
支持MVC框架,即支持传统网页架构
多线程并发请求(要语言支持线程)
动态加载文件,只加载有用的!处理了Ajax框架臃肿的JS文件问题。
采用notable的全div+css布局

a.获得XMLHTTPRequest对象,网上到处都找得到了,不多说:

functionnewXMLHttpRequest(){
varxmlreq=false;
if(window.XMLHttpRequest){
xmlreq=newXMLHttpRequest();
}elseif(window.ActiveXObject){
try{
xmlreq=newActiveXObject("Msxml2.XMLHTTP");
}catch(e1){
try{
xmlreq=newActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
}
}
}
returnxmlreq;
}
这里提供一个通用的支持多浏览器的方法。

b.提出异步请求

 

//这里用Bcandy作为方法名是为了感谢一个对我来说很重要的人,她一直在支持我
functionBcandy(Tid,url,parm,js){
if(url==""){
return;
}
//这是一个加载信息提示框,也可以不要!
document.getElementById("load").style.visibility="visible";
//加载相应页面的JS文件
if(js!=null){
//加载JS文件
LoadJS(js);
}
//获取一个XMLHttpRequest实例
varreq=newXMLHttpRequest();
//设置用来从请求对象接收回调通知的句柄函数
varhandlerFunction=getReadyStateHandler(req,Tid);
req.onreadystatechange=handlerFunction;
//第三个参数表示请求是异步的
req.open("POST",url,true);
//指示请求体包含form数据
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//发送参数
req.send(parm);
}

functiongetReadyStateHandler(req,Tid){
//返回一个监听XMLHttpRequest实例的匿名函数
returnfunction(){
//如果请求的状态是“完成”
if(req.readyState==4){
//成功接收了服务器响应
if(req.status==200){
//下面一句是重点,这里显示了返回信息的内容部分,也可以加以修改。进行其它处理
document.getElementById(Tid).innerHTML=req.responseText;
document.getElementById(Tid).style.visibility="visible";
//这一句是实现加载信息提示框的隐藏,也可以不要。
document.getElementById("load").style.visibility="hidden";
}else{
//有HTTP问题发生
document.getElementById("load").style.visibility="hidden";
alert("HTTPerror:"+req.status);
}
}
}
}


//动态加载JS文件
functionLoadJS(file){
varhead=document.getElementsByTagName("HEAD").item(0);
varscript=document.createElement("SCRIPT");
script.src=file;
script.type="text/javascript";
head.appendChild(script);
}
这就是基本的框架了,因为使用了request.responseText;所以,可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理,因为Form不支持异步请求。建议在这些页面上不要加入<html><body>标签,就像.net里的asxm文件!而且在使用Struts框架时有点要注意的是,Mapping对象直接返回null就可以了,因为我们会在下面讲到并发多线程。来处理这个问题的。
总的来看,有点像是积木搭建起来的。这样方便文件的修改和扩展,互相之间并不影响,而且,实现了代码和标签分离。在进行传统页面改版时,也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。

以上代码均在IE,FireFox下测试过!