[前端引用]利用ajax实现类似phpincluderequire等命令的功能

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› PHP›PHP编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

利用ajax实现类似php中的include、require等命令的功能

最新文件下载：

https://github.com/myfancy/ajaxInclude

建议去这里阅读readme-2.0.md。

后续这里不再更新。

下面的都是之前写的，没必要读了。

-------更新2015.9.28

这才是真正的jquery插件的写法。

分析：假设当前页面index.hlml 通过ajaxInclude引入了 inc_yd.html。inc_yd.html需要jquery代码支持。并且是在相应的dom加载完毕后才能执行。

那么如果该代码写在common.js中，一般调用方法都是这样写的:$(document).ready(function(//相关代码){});

common.js和ajaxInclude.js都在index.html中引入。

最终结果是不执行的。因为$(document).ready()在index.html的自身的dom加载完成之后，ajaxInclude()方法执行之前就加载了。

第一次想到的解决办法是：在inc_yd.html中引入相关common.js。这样看似可以解决了，但是如果common.js还在index.html中有引入。那么就会引入两份common.js接入到页面。如果common.js中的方法没有通过js插件的方法书写，有可能会导致相同的方法执行两次，比如一个alert事件弹多次窗，一个数字加按钮点击后，加2个数。

第二个方法（现在刚刚想到的一个办法）就是想inc_yd.html中需要的js直接想到它的页面上，其他的地方不在出现。这样可以完美解决问题？

第三个想到的办法是：通过不通过$(document).ready()来调用inc_yd.html的方法，而是通过$(window).load()来调用方法，那么就会等到整个页面完全加载完毕之后才会触发该方法。此方法不适合网站开发使用，只适合前端开发使用。后台开发通过后台的方法引入了inc_yd.html后应该将该调用方法改为$(document).ready()触发，不然每次等整个页面包括图片下载完成之后在执行，有点太慢了。

总结：

第一个方法不推荐，被引用页面的js和其他的js混合在一起导致页面代码各种重复执行，各种奇葩bug，

第二个方法其实是将相应代码抽出来单独放置了。

第三个后台开发还要让人家修改代码。

所以推荐第二个方法，直接将js代码写入到被引用页面中，而不是通过<script src="">来引入

如果特殊时刻，可以通过第三个方法来快速解决问题。

如果觉得不好管理js的话，可以将对应的方法插件化，然后将调用方法写到被应用页面中。

参考hhkx项目

/**
 * Created by 幻想家 on 2015/7/2.
 * ajaxInclude方法。
 * 版本更新：201509230909（采用jquery插件的方式写）
 * 使用方法：
 <script >
    $('#ieAlert').ajaxInclude('inc_ieAlert.html');
 </script>
 * 更新须知：之前的版本会导致页面因为load方法，多次触发页面中$(document).ready();导致其内部的方法被多次触发，那个带按钮的计算价格的
 * 输入框组件就是例证，这次的更新不知道能不能解决该问题，有待验证！（猜测还是解决不了）2015.9.23.9:23
 * add：问题已解决，不知道是这个方法插件化，还是那个计算价格组件的方法插件化搞好的。
 *
 * 版本：v201509111553
 * 模拟php的include功能，通过ajax load()实现。
 * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
 * scriptID:代表当前script节点的id
 * includeFile:代表引入的文件，可以包括路径
 * 使用方法：
 * <head>中引入：
 <script type="text/javascript" src="js/jquery.ajaxInlcude.js"></script>
 * 需要的位置写它：(id可以自定义，但不能重复哦)
 <script >
 $(document).ready(
 ajaxInclude('CustomIDNotSame','head.html')
 );
 </script>
 * 代码可以更简单一点：
 <script >
 $(ajaxInclude('CustomIDNotSame','head.html'));
 </script>
 * 在需要引入的地方，书写上面的代码。
 * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
 * 2、一个页面多次应用，id一定不要重复。
 * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
 *    但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
 *    子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
 *
 */

;

(function($) {
    $.fn.ajaxInclude = function(includeFile) {
        var scriptID = $(this).attr('id');
        //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
        $(this).before('<div id='+scriptID+'-tempWrap'+'></div>');
        //在创建的div中，通过ajax load()引入指定html文件
        //添加回调函数，处理一些问题并捕捉异常
        $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success") {
                //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
                $(this).next().remove();
                //没错，这就是传说中的去壳大法！
                $(this).children().unwrap();
            }else if(statusTxt=="error") {
                $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>");
                console.log("ajaxInclude.js执行错误————"+xhr.status + "：" + xhr.statusText);
            }
        });
    };
})(jQuery);


//;

//function ajaxInclude(scriptID,includeFile){
//    //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
//    $("#"+scriptID).before('<div id='+scriptID+'-tempWrap'+'></div>');
//    //在创建的div中，通过ajax load()引入指定html文件
//    //添加回调函数，处理一些问题并捕捉异常
//    $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
//        if(statusTxt=="success") {
//            //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
//            $(this).next().remove();
//            //没错，这就是传说中的去壳大法！
//            $(this).children().unwrap();
//        }else if(statusTxt=="error") {
//            $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>");
//            alert("Error: " + xhr.status + ": " + xhr.statusText);
//        }
//    });
//}

-------更新2015.7.2

把它插件化了，这样使用更加方便：

将下面代码拷贝至新建的js文件中，然后引入页面即可。推荐命名：jquery.ajaxInclude.js

/**
 * Created by 幻想家 on 2015/7/2.
 * ajaxInclude方法。
 * 模拟php的include功能，通过ajax load()实现。
 * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
 * a:代表当前script节点的id
 * b:代表引入的文件，可以包括路径
 * 使用方法：
 * <head>中引入：
 * <script src="js/jquery.ajaxInlcude.js" type="text/javascript"></script>
 * 需要的位置写它：(id可以自定义，但不能重复哦)
 * <script >
 *   $(document).ready(
 *     ajaxInclude('include-header','head.html')
 *   );
 * </script>
 * 在需要引入的地方，书写上面的代码。
 * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
 * 2、一个页面多次应用，id一定不要重复。
 * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
 *    但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
 *    子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
 *
 */

;

function ajaxInclude(a,b){
    //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
    $("#"+a).before('<div id='+a+'-wrap'+'></div>');
    //在创建的div中，通过ajax load()引入指定html文件
    //添加回调函数，处理一些问题并捕捉异常
    $("#"+a+'-wrap').load(b,function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success") {
            //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
            $(this).next().remove();
            //没错，这就是传说中的去壳大法！
            $(this).children().unwrap();
        }else if(statusTxt=="error") {
            $(this).html("<h1 style='font-size: 50px'>此处组件加载失败！</h1>");
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
    });
}

--------2015.7.2之前

需求介绍

在写页面的时候，一个导航可能N页面要用到，每一个页面都需要复制粘贴一份进去，一旦有改动html代码的需求就苦逼了，每个都得改一遍。如果这个需求还很多，反复改，那简直就是折磨人啊（虽然这种情况一般的情况下遇不到，但是偶老是遇到。）

直接看代码

    <script id="ajax-header" type="text/javascript">
        //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
        $("#ajax-header").before('<div >);
        //在创建的div中，通过ajax load()引入
        $(document).ready(function(){
            //添加回调函数，处理一些问题并捕捉异常
            $("#include-head").load("head.html",function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success") {
                    //可以在这里删除有碍观瞻的自身sript节点，表担心，不影响函数执行
                    $(this).next().remove();
                    //没错，这就是传说中的去壳大法！
                    $(this).children().unwrap();
                }else if(statusTxt=="error") {
                    $(this).html("<h1 style='font-size: 50px'>此处组件加载失败！</h1>");
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
                }
            });
        });
    </script>

把头部代码写到 head.html中，这样其他页面直接通过上方代码引用就可以了。我觉得也可以把上面整理成一个方法，此处直接传参调用即可，有空再搞吧。

需要注意的是，head.html中如果只写html结构代码，那么样式是可以应用到这些结构上的，但是如果是动态的，js貌似不行。必须把js一块搞进去。

如果是用前端框架，如amazeUI，实测不行，必须整个页面带<html><head>引入才行

但那样又会重复渲染样式，可以试试将关键性js引入。（待测试）

为什么不用iframe？

忘了。当时不知道考虑了啥，所以没用。以后再说

add：因为，高度宽度等不好处理，效果完全不行。

还是慢慢钻研吧，听说某些前端框架等可以直接支持这个功能，那就好了。

add：只能通过建立站点来实现ajax load方法，不然会报错

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

PHP函数索引-G发布时间：2022-07-10

php返回数组后处理(开户成功后弹窗提示)发布时间：2022-07-10

PacktPublishing/Python-Machine-Learning-

1 CVE-2020-28459

This affects all versions of package markdown-it-decorate. An attacker can add a

阅读：607|2022-07-29

2 kostub/iosMath: Beautiful math equation

kostub/iosMath: Beautiful math equation rendering on iOS and MacOS

阅读：1004|2022-08-18

3 iqiukp/KPCA-MATLAB: MATLAB code for dime

iqiukp/KPCA-MATLAB: MATLAB code for dimensionality reduction, feature extraction

阅读：519|2022-08-17

4 mkyong/spring3-mvc-maven-annotation-hell

mkyong/spring3-mvc-maven-annotation-hello-world: Maven + Spring 3 MVC hello worl

阅读：819|2022-08-17

5 CVE-2022-38625

** DISPUTED ** Patlite NH-FB v1.46 and below was discovered to contain insuffici

阅读：1148|2022-09-18

6 微信小程序公告滚动通知 - 子钦加油

微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中

阅读：1211|2022-07-18

7 lizhuohua/linux-kernel-module-rust

lizhuohua/linux-kernel-module-rust

阅读：535|2022-08-15

8 cmaas/markdown-it-table-of-contents: A t

cmaas/markdown-it-table-of-contents: A table of contents plugin for Markdown-it

阅读：721|2022-08-18

9 CVE-2022-30624

Browsing the admin.html page allows the user to reset the admin password. Also a

阅读：664|2022-07-29

10 hackl/tikz-network: A tool to visualize

hackl/tikz-network: A tool to visualize complex networks in LaTeX

阅读：664|2022-08-12

客服电话

电子邮件

[前端引用]利用ajax实现类似phpincluderequire等命令的功能

请发表评论

全部评论

上一篇：

下一篇：

bradtraversy/iweather: Ionic 3 mobile we

Delphi的类方法不是静态方法

joaomh/curso-de-matlab

断牙刷新位置时间（断牙属性及刷新位置介绍

纸的笔顺,了解纸的笔画,解析纸的部首

PacktPublishing/Python-Machine-Learning-

sussillo/hfopt-matlab: A parallel, cpu-b

鲁东大学一米网:Win7系统USB驱动器RAM的操

emersion/go-ostatus: An OStatus library

CVE-2022-22982

小程序页面高度控制

关于我们

产品与服务

解决方案

139-2527-9053