[转帖]Mootools源码分析-34 -- Request.HTML

最新推荐文章于 2015-08-24 17:13:00 发布

weixin_30517001

最新推荐文章于 2015-08-24 17:13:00 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maapaa/articles/mootools-s-34.html

本文介绍了一个针对MooTools框架的自定义Ajax请求处理类，该类能够解析HTML响应并将其转换为DOM元素，方便进一步操作。同时，文章还展示了如何通过Element对象发起请求并处理返回的数据。

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-407193

原作者：我佛山人

// 响应输出为HTML的Ajax请求类
Request.HTML = new Class({

     // 继承自Request类
    Extends: Request,

    options: {
         // 是否更新
        update: false ,
         // 是否解释执行字符脚本
        evalscrīpts: true ,
         // 是否过滤
        filter: false
    },

     // 处理HTML代码
    processHTML: function (text)    {
         // 如果请求为完整的HTML页
         var match = text.match( / <body[^>]*>([\s\S]*?)<\ / body > / i);
         // 取<body>与</body>之间的字符
        text = (match) ? match[ 1 ] : text;
         // 创建html的容器节点
         var container = new Element( ' div ' );
         // 返回容器节点,先尝试使用XMLDOM解释HTML节点,失败的话直接设置innerHTML
         return $ try ( function ()    {
             // 构造一个根节点,因为必须保证让XML片段有根节点
             var root = ' <root> ' + text + ' </root> ' , doc;
             // IE的处理
             if (Browser.Engine.trident)    {
                 // 使用ActiveX控件解释
                doc = new ActiveXObject( ' Microsoft.XMLDOM ' );
                 // 同步加载
                doc.async = false ;
                doc.loadXML(root);
            }     else     {
                 // 使用标准DOM解释器解释
                doc = new DOMParser().parseFromString(root, ' text/xml ' );
            }
             // 取根节点句柄
            root = doc.getElementsByTagName( ' root ' )[ 0 ];
             // 通过遍历节点,复制到container容器中
             for ( var i = 0 , k = root.childNodes.length; i < k; i ++ )    {
                 var child = Element.clone(root.childNodes[i], true , true );
                 if (child)    container.grab(child);
            }
             return container;
         // XMLDOM解释失败的话直接设置innerHTML
        }) || container.set( ' html ' , text);
    },

     // 请求成功,覆盖Request类的同名方法
    success: function (text)    {
         var options = this .options, response = this .response;
         // 解释出脚本,之后剩下HTML
        response.html = text.stripscrīpts( function (scrīpt)    {
            response.javascrīpt = scrīpt;
        });

         // 处理HTML中的节点
         var temp = this .processHTML(response.html);

         // 绑定节点到返回的对象
        response.tree = temp.childNodes;
        response.elements = temp.getElements( ' * ' );

         // 如果提供过滤标签名,过滤树节点
         if (options.filter)    response.tree = response.elements.filter(options.filter);
         // 如果指定需要更新的Element,将响应更新到Element
         if (options.update)    $(options.update).empty().adopt(response.tree);
         // 如果指定解释脚本
         if (options.evalscrīpts)    $exec(response.javascrīpt);

         // 调用父类方法,触发成功事件
         this .onSuccess(response.tree, response.elements, response.html, response.javascrīpt);
    }

});

// 为Element添加load属性的setter和getter
Element.Properties.load = {

     // setter
    set: function (options)    {
         // 从临时对象取Request.HTML
         var load = this .retrieve( ' load ' );
         // 如果对象存在,取消(这里的send貌似是load的手误?)
         if (load)    send.cancel();
         // 缓存Request.HTML的配置参数
         return this .eliminate( ' load ' ).store( ' load:options ' , $extend({data: this , link: ' cancel ' , update: this , method: ' get ' }, options));
    },

     // getter
    get: function (options)    {
         // 如果提供配置参数或者不存在缓存
         if (options || ! this .retrieve( ' load ' ))    {
             // 缓存配置参数
             if (options || ! this .retrieve( ' load:options ' ))     this .set( ' load ' , options);
             // 缓存Request.HTML对象
             this .store( ' load ' , new Request.HTML( this .retrieve( ' load:options ' )));
        }
         // 返回缓存的Request.HTML对象
         return this .retrieve( ' load ' );
    }

};

// 为Element增加load方法
Element.implement({
     // 加载远程页面节点到当前Element内
    load: function ()    {
         // 上面的准备工作合取load能得到Request.HTML实例,然后发送
         // 注意Array.link的使用,使send的两个参数可以任意排列,并且可选
         this .get( ' load ' ).send(Array.link(arguments, {data: Object.type, url: String.type}));
         return this ;
    }
});

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-34.html