利用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项目

  1. /**
  2.  * Created by 幻想家 on 2015/7/2.
  3.  * ajaxInclude方法。
  4.  * 版本更新：201509230909（采用jquery插件的方式写）
  5.  * 使用方法：
  6.  <script id="ieAlert" type="text/javascript">
  7.     $('#ieAlert').ajaxInclude('inc_ieAlert.html');
  8.  </script>
  9.  * 更新须知：之前的版本会导致页面因为load方法，多次触发页面中$(document).ready();导致其内部的方法被多次触发，那个带按钮的计算价格的
  10.  * 输入框组件就是例证，这次的更新不知道能不能解决该问题，有待验证！（猜测还是解决不了）2015.9.23.9:23
  11.  * add：问题已解决，不知道是这个方法插件化，还是那个计算价格组件的方法插件化搞好的。
  12.  *
  13.  * 版本：v201509111553
  14.  * 模拟php的include功能，通过ajax load()实现。
  15.  * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
  16.  * scriptID:代表当前script节点的id
  17.  * includeFile:代表引入的文件，可以包括路径
  18.  * 使用方法：
  19.  * <head>中引入：
  20.  <script type="text/javascript" src="js/jquery.ajaxInlcude.js"></script>
  21.  * 需要的位置写它：(id可以自定义，但不能重复哦)
  22.  <script id="CustomIDNotSame" type="text/javascript">
  23.  $(document).ready(
  24.  ajaxInclude('CustomIDNotSame','head.html')
  25.  );
  26.  </script>
  27.  * 代码可以更简单一点：
  28.  <script id="CustomIDNotSame" type="text/javascript">
  29.  $(ajaxInclude('CustomIDNotSame','head.html'));
  30.  </script>
  31.  * 在需要引入的地方，书写上面的代码。
  32.  * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
  33.  * 2、一个页面多次应用，id一定不要重复。
  34.  * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
  35.  *    但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
  36.  *    子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
  37.  *
  38.  */
  39.  
  40. ;
  41.  
  42. (function($) {
  43.     $.fn.ajaxInclude = function(includeFile) {
  44.         var scriptID = $(this).attr('id');
  45.         //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
  46.         $(this).before('<div id='+scriptID+'-tempWrap'+'></div>');
  47.         //在创建的div中，通过ajax load()引入指定html文件
  48.         //添加回调函数，处理一些问题并捕捉异常
  49.         $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
  50.             if(statusTxt=="success") {
  51.                 //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
  52.                 $(this).next().remove();
  53.                 //没错，这就是传说中的去壳大法！
  54.                 $(this).children().unwrap();
  55.             }else if(statusTxt=="error") {
  56.                 $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>");
  57.                 console.log("ajaxInclude.js执行错误————"+xhr.status + "：" + xhr.statusText);
  58.             }
  59.         });
  60.     };
  61. })(jQuery);
  62.  
  63. //;
  64.  
  65. //function ajaxInclude(scriptID,includeFile){
  66. //    //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
  67. //    $("#"+scriptID).before('<div id='+scriptID+'-tempWrap'+'></div>');
  68. //    //在创建的div中，通过ajax load()引入指定html文件
  69. //    //添加回调函数，处理一些问题并捕捉异常
  70. //    $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
  71. //        if(statusTxt=="success") {
  72. //            //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
  73. //            $(this).next().remove();
  74. //            //没错，这就是传说中的去壳大法！
  75. //            $(this).children().unwrap();
  76. //        }else if(statusTxt=="error") {
  77. //            $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>");
  78. //            alert("Error: " + xhr.status + ": " + xhr.statusText);
  79. //        }
  80. //    });
  81. //}

-------更新2015.7.2

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

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

  1. /**
  2.  * Created by 幻想家 on 2015/7/2.
  3.  * ajaxInclude方法。
  4.  * 模拟php的include功能，通过ajax load()实现。
  5.  * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
  6.  * a:代表当前script节点的id
  7.  * b:代表引入的文件，可以包括路径
  8.  * 使用方法：
  9.  * <head>中引入：
  10.  * <script src="js/jquery.ajaxInlcude.js" type="text/javascript"></script>
  11.  * 需要的位置写它：(id可以自定义，但不能重复哦)
  12.  * <script id="include-header" type="text/javascript">
  13.  *   $(document).ready(
  14.  *     ajaxInclude('include-header','head.html')
  15.  *   );
  16.  * </script>
  17.  * 在需要引入的地方，书写上面的代码。
  18.  * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
  19.  * 2、一个页面多次应用，id一定不要重复。
  20.  * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
  21.  *    但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
  22.  *    子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
  23.  *
  24.  */
  25.  
  26. ;
  27.  
  28. function ajaxInclude(a,b){
  29.     //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
  30.     $("#"+a).before('<div id='+a+'-wrap'+'></div>');
  31.     //在创建的div中，通过ajax load()引入指定html文件
  32.     //添加回调函数，处理一些问题并捕捉异常
  33.     $("#"+a+'-wrap').load(b,function(responseTxt,statusTxt,xhr){
  34.         if(statusTxt=="success") {
  35.             //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
  36.             $(this).next().remove();
  37.             //没错，这就是传说中的去壳大法！
  38.             $(this).children().unwrap();
  39.         }else if(statusTxt=="error") {
  40.             $(this).html("<h1 style='font-size: 50px'>此处组件加载失败！</h1>");
  41.             alert("Error: " + xhr.status + ": " + xhr.statusText);
  42.         }
  43.     });
  44. }

--------2015.7.2之前

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

直接看代码

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

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

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

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

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

为什么不用iframe？

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

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

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

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

[前端引用] 利用ajax实现类似php include require 等命令的功能的更多相关文章

  1. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  2. 5月17 利用AJAX查询数据库

    利用AJAX查询数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. 利用ajax短轮询+php与服务器交互制作简易即时聊天网站

    主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...

  4. javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断

    和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...

  5. 前端基础之AJAX

    AJAX 什么是AJAX,简单来说就是利用JavaScript天生异步的特性,使用异步请求后台数据,从而达到不刷新网页也能局部更新页面的效果. 原生AJAX JavaScript中的AJAX依赖于XM ...

  6. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  7. Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

    原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...

  8. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  9. Struts2 利用AJAX 导出大数据设置遮罩层

    Struts2 利用AJAX 导出大数据设置遮罩层 需求背景: 每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面, ...

随机推荐

  1. sysbench 安装

    sysbench源代码可以在https://launchpad.net/sysbench找到.也可以从本文件附件中下载. 先安装好mysql,记录下安装目录.默认为 /usr/local/mysql ...

  2. JSONP实例

    JSONP实例 package sus.app; import java.io.IOException; import java.util.Map; import javax.servlet.http ...

  3. NoSQL--非关系型的数据库是什么？

    NoSQL,指的是非关系型的数据库.NoSQL,意即反SQL运动,是一项全新的数据库革命性运动,早期就有人提出,发展至2009年趋势越发高涨.NoSQL的拥护者们提倡运用非关系型的数据存储,相对于目前 ...

  4. 对 HTTP 304 的理解

    最近和同事一起看Web的Cache问题,又进一步理解了 HTTP 中的 304 又有了一些了解. 304 的标准解释是: Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提 ...

  5. 通过DDOS攻击流程图来浅谈如何预防Ddos攻击与防御

    DDOS攻击流程图 站长之家配图(来源:ppkj.net) 一 背景 在前几天,我们运营的某网站遭受了一次ddos攻击,我们的网站是一个公益性质的网站,为各个厂商和白帽子之间搭建一个平台以传递安全问题 ...

  6. 【LR】安装LR11后遇到的问题

    (1)问题:录制脚本时无法弹出IE浏览器 解决方法: 正确的是C:\Program Files (x86)\Internet Explorer\iexplore.exe 错误是:C:\Program ...

  7. Windows上的的神技能，你知道几个？（Windows技巧大全，已更新）

    不用借助任何第三方软件,其实Windows也大有可为——比你目前了解得至少要多得多,强大技能快来get起来! 1.文件隐藏谁的电脑里没点小秘密?东藏西藏到最后自己都找不到了有木有?今天教大家个隐藏文件 ...

  8. 闲谈Future模式-订蛋糕

    一. Future模式简介 Future有道翻译:n. 未来:前途:期货:将来时.我觉得用期货来解释比较合适.举个实际生活中例子来说吧,今天我女朋友过生日,我去蛋糕店准备给女朋友定个大蛋糕,超级大的那 ...

  9. java 代码如何生成 chm

    由于要把一个框架的东西打成 chm, 今天在网上找了几篇文章 http://blog.sina.com.cn/s/blog_5d31611a0100gqwp.html 李顺利 首先第一步,从eclip ...

  10. PHP相关图书推荐

    PHP和MySQL Web开发(原书第4版) 作      者 [澳] Luke Welling,[澳] Luke Welling 著:武欣 等 译 出 版 社 机械工业出版社 出版时间 2009-0 ...