文档章节

小蚂蚁学习页面静态化(3)——页面静态化中局部动态化案例实现

嗜学如命的小蚂蚁
 嗜学如命的小蚂蚁
发布于 2015/10/11 17:34
字数 626
阅读 370
收藏 4

    说白了,其实就用到了一个知识点——ajax。在静态化页面中使用ajax动态获取数据库中的数据,写入到静态化页面中相应的位置即可。虽然这些代码在平时的工作中都写烂了,但我还是决定在博客中重新写一遍,不要问我为什么,周日,不!上!班!呵呵呵呵……

  1. 生成静态化页面的脚本

<?php
//首先判断是否有静态文件,并且文件的最新修改时间到现在是否大于20秒
if(is_file('./text.php') && time()-filemtime('./text.php') <= 20){
    //条件成立,将已经生成的静态文件输出给用户
    include_once('./jingtai.php');
}else{
        //条件不成立,重新走数据库,获取数据,分配模板,输出内容
    $arr    =   array(
            0=>array('title'=>'这里是第一个标题'),
            1=>array('title'=>'这里是第二个标题'),
            2=>array('title'=>'这里是第三个标题'),
            3=>array('title'=>date('Y-m-d H:i:s'))
        );
     
        //缓冲区必须要在输出之前开启
    ob_start();
    //输出模板
    include_once('./template.php');
        //输出内容的同时生成静态文件,注意使用的函数是ob_get_contents();
    file_put_contents('./jingtai.php', ob_get_contents());
}
?>

2.准备一个ajax请求的脚本,用于返回数据

<?php 
	//去数据库中拿到一个二维数组
	$arr	=	array(
			0=>array('title'=>'动态获取的第一个标题'),
			1=>array('title'=>'动态获取的第二个标题'),
			2=>array('title'=>'动态获取的第三个标题'),
			3=>array('title'=>date('Y-m-d H:i:s'))
		);
	//把获取到的数组返回
	show($code=1,$arr);

	function show($code=0,$data=null){
		//拼接成一个数组,code表示状态码,data是数据
		$msg=array(
				'code'=>$code,
				'data'=>$data
			);
		//json化之后返回数据
		echo json_encode($msg);
	}
?>

3.准备一个模板文件,引入jQuery文件,使用jQuery来实现ajax非常的简单,写入ajax代码。

<!doctype html>
<html>
	<head>
		<meta charset='utf-8' />
		<script src="./jquery-1.6.4.min.js" type="text/javascript"></script>		
		<title>
			
		</title>
	</head>
	<body>
		<ul>
			<?php foreach ($arr as $key => $value) { ?>
                <li><?php echo $value['title'] ?></li>
            <?php } ?>
		</ul>
		<ul id='ajax'>
			
		</ul>
		<script>
			//使用ajax
			$.ajax({
				type:'POST',
			    url: "./text.php",
			    dataType:'json',
			    success: function(result){
			    	//根据code的值可以在这里做一些判断,让程序更健壮。	
			    	//准备一个空的字符串
			    	var html='';
			    	//遍历data的值
			    	$.each(result.data,function(key,value){
			    		//拼接出来需要的数据
			    		html +='<li>'+value.title+'</li>';	
			    	});
			    	//把拼接出来的字符串,写入到ul中,这就ok了
			    	$('#ajax').html(html);
			  }
			});
		</script>
	</body>
</html>

OK,搞定    d=====( ̄▽ ̄*)b

© 著作权归作者所有

嗜学如命的小蚂蚁
粉丝 147
博文 161
码字总数 100864
作品 0
郑州
程序员
私信 提问
小蚂蚁学习页面静态化(1)——静态化的原理

关于页面php文件执行阶段 语法分析——》编译——》运行 如何优化页面的响应时间 动态页面静态化 优化数据库 使用负载均衡 使用缓存 页面静态化能够解决的问题 1.减少服务器脚本的计算时间 ...

嗜学如命的小蚂蚁
2015/10/09
262
2
使用Varnish+ESI实现静态页面的局部缓存

页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化。但在页面静态化后,静态页面之间包含(例如所有的静态页面包含页头、页脚)以及...

晨曦之光
2012/03/09
978
0
(PHP学习笔记)实现页面静态化

当我们在访问各个门户信息网站时,主页都会给我们显示各种头条、导航信息(例如新闻网)。我们可以想象,面对众多的数据库访问等操作,在我们访问这些网页的同时加载速度将会变得很慢。众所周...

w1sw
2016/08/15
0
0
ThinkPHP5中如何实现模板完全静态化

模板完全静态化,也就是通过模板完全生成纯静态的网页,相比动态页面和伪静态页面更安全更利于SEO访问更快。相比前二者各有利弊吧,现在稍微对这三种形式的优缺点对比一下,以及在ThinkPHP5...

北桥苏
10/10
65
0
天猫浏览型应用的CDN静态化架构演变

在天猫双11活动中,商品详情、店铺等浏览型系统,通常会承受超出日常数倍甚至数十倍的流量冲击。随着历年来双11流量的大幅增加,每年这些浏览型系统都要面临容量评估、硬件扩容、性能优化等各...

胡阳
2014/05/07
98
0

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
9分钟前
2
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
11分钟前
2
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
52分钟前
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
98
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部