上回说到：​​PHP实现页面静态化——全部纯静态化​​ 

       这次实现PHP的局部动态化，也就是说静态化的页面存在“动态”过程，结合全部静态化技术+Ajax技术实现局部动态化，局部更新页面。

       在上文的数据库基础上，在创建表 hit，如下：

PHP实现页面静态化——局部动态化_html

       并插入几条数据，如下：

PHP实现页面静态化——局部动态化_ajax_02

       案例demo02的目录结构：

PHP实现页面静态化——局部动态化_局部动态化_03

       为实现局部静态化，需要结合Ajax技术。当访问主页index.php时，根据静态页面的缓存时效，判断是否生成index.shtml静态页面，当静态页面返回后静态页面中的js发起Ajax请求，获取服务器中的数据，进行动态更新。那么这里就需要一个 服务器文件 接口，响应Ajax请求。

       接口文件 hot.php


<?php 
  //排行榜接口数据
  //1、获取数据 2、把我们获取到的数据组装成接口数据提供通信
  
  require_once('../db.php');
  $connect = Db::getInstance()->connect();
  $sql = "SELECT * FROM hit AS a join news AS b ON a.news_id = b.id ORDER BY a.count DESC LIMIT 3";

  $result = mysql_query($sql, $connect);
  while($row = mysql_fetch_assoc($result)) {
    $res[] = $row;
  }
  //print_r($res);
  show(1, 'success', $res);

  function show($code = 0, $message = 'error', $data = array()) {
    $result = array(
        'code' => $code,
        'message' => $message,
        'data' => $data
      );
    echo json_encode($result);
  }
?>

       联表查询数据库，并已json格式返回。

       模板templates/singwa.php


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新闻中心</title>
  <link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">
  <script src="public/js/jquery-1.7.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="newslist">
      <h3>新闻列表</h3>
      <ul class="list-group">
        <?php foreach ($news as $key => $value) { ?>
        <li class="list-group-item"><a href="#"><?php echo $value['title'];?></a></li>
        <?php } ?>
      </ul>
    </div>
    <div class="hot-rank">
      <h3>今日排行</h3>
      <ul id="hot_html" class="list-group">
        
      </ul>
    </div>
  </div>
  <script src="public/js/hot.js"></script>
</body>
</html>

       hot.js 发送Ajax请求，获取动态数据，动态显示数据。 


$.ajax({
  url:'api/hot.php',
  type: 'get',
  dataType: 'json',
  error: function() {
    alert('请求错误');
  },
  success: function(result) {
    if(result.code == 1) {
      var html = '';
      $.each(result.data, function(key, value) {
        //console.log(key + ' ' + value.title);
        html += '<li class="list-group-item"><a href="#">' + value.title + '</a></li>';
      });
      //console.log(html);
      $("#hot_html").html(html);
    } else {
      alert('请求失败');
    }
  }
});


       当第一次访问 index.php （index.php文件不做修改，与上文一致），服务器会根据模板singwa.php生成对应的静态文件index.shtml，将index.shtml文件发回客户端。客户端得到index.shtml文件后，又一次向服务器发送Ajax请求获取动态数据，并进行显示。

       结果如下：

目录结构：

PHP实现页面静态化——局部动态化_ajax_04

页面显示：

PHP实现页面静态化——局部动态化_php_05