• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于 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不支持异步请求。建议在这些页面上不要加入html>body>标签,就像.net里的asxm文件!而且在使用Struts框架时有点要注意的是,Mapping对象直接返回null就可以了,因为我们会在下面讲到并发多线程。来处理这个问题的。
    总的来看,有点像是积木搭建起来的。这样方便文件的修改和扩展,互相之间并不影响,而且,实现了代码和标签分离。在进行传统页面改版时,也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。

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

    上一篇:Ajax 汇总以及初步评价
    下一篇:AJAX请求类
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    基于 Ajax 的无限级菜单 基于,Ajax,的,无限,级,菜单,