使用ajax实现页面部分静态化

   案例demo02的目录结构：

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

       接口文件 hot.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

"en">

    "UTF-8">
    新闻中心
    "stylesheet" href="public/css/bootstrap.min.css" type="text/css">
    "public/js/jquery-1.7.min.js">


    class="container">
        class="newslist">
            新闻列表
            class="list-group">
                foreach ($news as $key => $value) { ?>
                class="list-group-item">"#">echo $value['title'];?>

  

        class="hot-rank">  

            

今日排行

  

            "hot_html" class="list-group">  

                  

              

        

  

    

  

    "public/js/hot.js">  

  

  

       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 += '' + value.title + '
            });
            //console.log(html);
            $("#hot_html").html(html);
        } else {
            alert('请求失败');
        }
    }
});

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

       结果如下：

目录结构：

页面显示：