Atitit Server Side Include ssi服务端包含规范 csi esi

一、CSI (Client Side Includes) 1

1.1. 客户端包含1

1.2. AngularJS 包含1

二、SSI（Server Side Includes）2

1.3. 跨域包含； 2

1.4. ESI（Edge Side Includes） 2

一、CSI (Client Side Includes)
含义：通过iframe、javascript、ajax等方式将另外一个页面的内容动态包含进来。
原理：整个页面依然可以静态化为html页面，不过在需要动态的地方则通过iframe,javascript或ajax来动态加载！
例子：<iframe src='http://abroad.e2bo.com/index.php' border='0'></iframe>
优点：相对比较简单，不需要服务器端做改变和配置；
缺点：不利于搜索引擎优化(iframe方式), javascript兼容性问题，以及客户端缓存问题可能导致更新后不能及时生效！对于客户体验也不够好！

1.1. 客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过使用 innerHTML 写入到 HTML 元素中。

1.2. AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

实例

<body>

</body>

二、SSI（Server Side Includes）
含义：通过注释行SSI命令加载不同模块，构建为html，实现整个网站的内容更新；
原理：通过SSI调用各模块的对应文件，最后组装为html页面，需要服务器模块支持(具体配置本文不做详述)，比如：apache服务器需要开启mod_include模块；
例子：

Html代码

1.

2.

3.

优点：不受具体语言限制，比较通用，只需要Web服务器或应用服务器支持即可，Ngnix、Apache、IIS等对此都有较好的支持。
缺点：SSI只能在当前服务器上包含加载，不能够直接包含其他服务器上的文件，即不能跨域包含；

1.3. 跨域包含；

1.4. ESI（Edge Side Includes）

含义及原理：通过使用简单的标记语言来对那些可以加速和不能加速的网页中的内容片断进行描述，每个网页都被划分成不同的小部分分别赋予不同的缓存控制策略，使Cache服务器可以根据这些策略在将完整的网页发送给用户之前将不同的小部分动态地组合在一起。通过这种控制，可以有效地减少从服务器抓取整个页面的次数，而只用从原服务器中提取少量的不能缓存的片断，因此可以有效降低原服务器的负载，同时提高用户访问的响应时间。与SSI不同的是，ESI多在缓存服务器或代理服务器上执行！
例子：

Html代码

1. <html>

2. <head><title>ESI Demo</title></head>

3. <body>

4. <esi:include src="login.php" />

5. <div><h3>这中间是可静态化html内容</3></div>

6. </body>

7. <html>

优点：可用于缓存整个页面或页面片段，比较适合用于缓存服务器上；
缺点：目前支持ESI的软件还比较少，官方更新也略显缓慢，因此使用不是很广！

参考资料

· Apache mod_include Reference

AngularJS 包含 _ 菜鸟教程.html

动态缓存技术之CSI,SSI,ESI - 猫头哥（朴海林）_QQ_85977328 - ITeye技术网站.html

Server Side Includes - Wikipedia.html