[前端引用] 利用ajax实现类似php include require 等命令的功能
利用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 id="ieAlert" type="text/javascript">
$('#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 id="CustomIDNotSame" type="text/javascript">
$(document).ready(
ajaxInclude('CustomIDNotSame','head.html')
);
</script>
* 代码可以更简单一点：
<script id="CustomIDNotSame" type="text/javascript">
$(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 id="include-header" type="text/javascript">
* $(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 id="include-head"></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方法，不然会报错
[前端引用] 利用ajax实现类似php include require 等命令的功能的更多相关文章
- 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
- 5月17 利用AJAX查询数据库
利用AJAX查询数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 利用ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
- javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
- 前端基础之AJAX
AJAX 什么是AJAX,简单来说就是利用JavaScript天生异步的特性,使用异步请求后台数据,从而达到不刷新网页也能局部更新页面的效果. 原生AJAX JavaScript中的AJAX依赖于XM ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...
- 利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
- Struts2 利用AJAX 导出大数据设置遮罩层
Struts2 利用AJAX 导出大数据设置遮罩层 需求背景: 每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面, ...
随机推荐
- new tips
老外的一篇文章(原文地址http://stackoverflow.com/questions/6647677/tips-for-efficient-as3-coding),有这么一段描述: Use [ ...
- ios ViewController 页面跳转
从一个Controller跳转到另一个Controller时,一般有以下2种: 1.利用UINavigationController,调用pushViewController,进行跳转:这种采用压栈和 ...
- Symfony2 学习笔记之插件格式
一个bundle类似于其它框架中的插件,但是比插件表现更好.它跟其它框架最主要的不同是在Symfony2中所有东西都是bundle,包括核心框架功能和你写的所有应用程序代码.Symfony2中,bun ...
- Java 与无符号那些事儿
最近在使用 Java 作为 WebSocket 客户端连接 Node.js 的 WebSocket 服务器的时候,由于使用的客户端库比较老,所以遇到了字节符号的问题,上网查了一下,看到这篇文章写的很有 ...
- python与saltstack动态传参变量名的研究
python动态变量名 import sys createVar = locals() listTemp = range(1,10) for i in range(1, len(sys.argv)): ...
- linux grub
grub 是目前使用最广泛的linux引导装载程序,旧的lilo这个引导装载程序很少见了,grub优点: 支持较多哦的文件系统,可以使用grub主程序在文件系统中查找内核文件名 启动的时候,可以自行编 ...
- 禁止Windows安装软件
今天电脑莫名安装上百度杀毒,想永久解决这个问题. 1.卸载百度杀毒 2.运行cmd-->sc delete 'service name' 3.sc delete BDMiniDlUpdate/B ...
- LeetCode Database: Rank Scores
Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...
- css:outline
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- C++学习之路--类的构建以及数据转换存储
注意理解下面的代码,数据的处理与转换. 头文件: #ifndef STACK_H #define STACK_H class Stack { struct Link { void* data; Lin ...