• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: | 推荐给好友 上一篇 | 下一篇

实现基于Ajax的无限级菜单

发布: 2008-1-29 16:18 | 作者: ycoe12 | 来源: www.blueidea.com | 查看: 30次 | 进入软件测试论坛讨论

领测软件测试网 框架特点:

  支持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带来的无闪刷新快感。

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

 

文章来源于领测软件测试网 https://www.ltesting.net/

TAG: ajax AJAX Ajax

21/212>

关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备10010545号-5
技术支持和业务联系:info@testage.com.cn 电话:010-51297073

软件测试 | 领测国际ISTQBISTQB官网TMMiTMMi认证国际软件测试工程师认证领测软件测试网