CNET中国旗舰网站

ZDNet China | CNET科技资讯网 | 政府采购 | 行业网站联盟





 
标题: [转贴] 实现基于 Ajax 的无限级菜单
mz89757053
版主
Rank: 7Rank: 7Rank: 7


UID 304999
精华 0
积分 6933
帖子 8295
威望 116
ZD币 1002 元
阅读权限 250
注册 2008-3-10
状态 离线
  楼主
发表于 2008-3-18 11:36  资料  个人空间  短消息  加为好友 
开发者在线

实现基于 Ajax 的无限级菜单

特点:     
   
  支持Form的无闪提交(方法有点笨)     
   
  支持MVC框架,即支持传统网页架构     
   
  多线程并发请求(要语言支持线程)     
   
  动态加载文件,只加载有用的!处理了Ajax框架臃肿的JS文件问题。     
   
  采用no   table的全div   +   css布局     
   
   
  a.   获得XMLHTTPRequest对象,网上到处都找得到了,不多说:     
   
   
  function   newXMLHttpRequest()   {     
   
  var   xmlreq   =   false;     
   
  if   (window.XMLHttpRequest)   {     
   
  xmlreq   =   new   XMLHttpRequest();     
   
  }   else   if   (window.ActiveXObject)   {     
   
  try   {     
   
  xmlreq   =   new   ActiveXObject("Msxml2.XMLHTTP");     
   
  }   catch   (e1)   {     
   
  try   {     
   
  xmlreq   =   new   ActiveXObject("Microsoft.XMLHTTP");     
   
  }   catch   (e2)   {     
   
  }     
   
  }     
   
  }     
   
  return   xmlreq;     
   
  }     
   
  这里提供一个通用的支持多浏览器的方法。     
   
   
  b.提出异步请求     
   
   
   
   
  //这里用Bcandy作为方法名是为了感谢一个对我来说很重要的人,她一直在支持我     
   
  function   Bcandy(Tid,url,parm,js)   {     
   
  if(url   ==   ""){     
   
  return;     
   
  }     
   
  //这是一个加载信息提示框,也可以不要!     
   
  document.getElementById("load").style.visibility   =   "visible";     
   
  //加载相应页面的JS文件     
   
  if(js   !=   null){     
   
  //加载JS文件     
   
  LoadJS(js);     
   
  }     
   
  //   获取一个XMLHttpRequest实例     
   
  var   req   =   newXMLHttpRequest();     
   
  //   设置用来从请求对象接收回调通知的句柄函数     
   
  var   handlerFunction   =   getReadyStateHandler(req,Tid);     
   
  req.onreadystatechange   =   handlerFunction;     
   
  //   第三个参数表示请求是异步的     
   
  req.open("POST",   url,   true);     
   
  //   指示请求体包含form数据     
   
  req.setRequestHeader("Content-Type",     
   
  "application/x-www-form-urlencoded");     
   
  //   发送参数     
   
  req.send(parm);     
   
  }     
   
   
  function   getReadyStateHandler(req,Tid)   {     
   
  //   返回一个监听XMLHttpRequest实例的匿名函数     
   
  return   function   ()   {     
   
  //   如果请求的状态是“完成”     
   
  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("HTTP   error:   "+req.status);     
   
  }     
   
  }     
   
  }     
   
  }     
   
   
   
  //动态加载JS文件     
   
  function   LoadJS(file){     
   
  var   head   =   document.getElementsByTagName('HEAD').item(0);     
   
  var   script   =   document.createElement('SCRIPT');     
   
  script.src   =   file;     
   
  script.type   =   "text/javascript";     
   
  head.appendChild(script);     
   
  }     
   
  这就是基本的框架了,因为使用了request.responseText;所以,可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理,因为Form不支持异步请求。建议在这些页面上不要加入标签,就像.net里的asxm文件!而且在使用Struts框架时有点要注意的是,Mapping对象直接返回null就可以了,因为我们会在下面讲到并发多线程。来处理这个问题的。     
   
  总的来看,有点像是积木搭建起来的。这样方便文件的修改和扩展,互相之间并不影响,而且,实现了代码和标签分离。在进行传统页面改版时,也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。     
   
  http://java.ccidnet.com/art/3741/20061122/957223_1.html




顶部
热点频道推荐: C/S开发| 数据库| WEB开发| 嵌入式| 项目管理|
mz89757053
版主
Rank: 7Rank: 7Rank: 7


UID 304999
精华 0
积分 6933
帖子 8295
威望 116
ZD币 1002 元
阅读权限 250
注册 2008-3-10
状态 离线
  沙发
发表于 2008-3-18 11:36  资料  个人空间  短消息  加为好友 
源代码如下:   
  test.html   
  <html>   
  <head>   
  <title>测试</title>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=utf-8"   />   
  <script   type="text/javascript"   src="js/ajax.js"></script>   
  <script   type="text/javascript"   src="js/treeMenu.js"></script>   
  <style   type="text/css">   
   
  body   {   font-size:   12px;}   
   
  </style>   
  </head>   
  <body>   
  <a   href="javascript:TreeMenu.getChildren('0');">显示类别</a>   
  <a   href="javascript:Request.intervalSend(3000,'test2.asp?pId=1',processRequest);">测试</a>   
  <div   id="0"></div>   
  <script   type="text/javascript">   
  TreeMenu._url="test2.asp";   
  var   processRequest=function(obj)   
  {   
  alert(obj.responseText);   
  }   
  </script>   
  </body>   
  </html>   
  ----------------------------------------------------------------------------   
  test2.html   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=utf-8"   />   
  1,测试节点,1   
   
  ----------------------------------------------------------   
  test2.asp   
  <%@LANGUAGE="JAVASCRIPT"   CODEPAGE="65001"%>   
  <%   
  Response.ContentType="text/xml";   
  var   xmlString='<?xml   version="1.0"   encoding="UTF-8"?>';   
  xmlString+='<root>';   
  if   (Request.QueryString("pId")=="0")   
  {   
  xmlString+='<node   id="1"   hasChildren="1">测试类别1</node>';   
  xmlString+='<node   id="4"   hasChildren="0">测试类别4</node>';   
  }   
  else   if   (Request.QueryString("pId")=="1")   
  {   
  xmlString+='<node   id="2"   hasChildren="1">测试类别2</node>';   
  xmlString+='<node   id="5"   hasChildren="0">测试类别5</node>';   
  }   
  else   if   (Request.QueryString("pId")=="2")   
  {   
  xmlString+='<node   id="3"   hasChildren="0">测试类别3</node>';   
  }   
  xmlString+='</root>';   
  Response.write(xmlString);   
  %>   
  ------------------------------------------------   
  test2.xml   
  <?xml   version="1.0"   encoding="UTF-8"?>   
  <root>   
    <node   id="1"   hasChildren="1">测试节点1</node>   
    <node   id="2"   hasChildren="0">测试节点2</node>   
  </root>




顶部
热点频道推荐: C/S开发| 数据库| WEB开发| 嵌入式| 项目管理|
 



当前时区 GMT+8, 现在时间是 2009-7-4 16:36

  Powered by Discuz! 5.5.0 © 2001-2007 Comsenz Inc.
Processed in 0.065581 second(s), 3/3 queries

清除 Cookies - 联系我们 - ZDNetChina中文社区 - 无图版