Hcode网站的搭建日记（四）Ajax实现阅读量统计

HcodeBlogger

发布于 2020-07-14 10:46:46

5900

发布于 2020-07-14 10:46:46

文章被收录于专栏：Hcode网站Hcode网站

前言

Hcode网站已经正式运行，本网站由Himit_ZH和Howie协同合作搭建，网站的主旨是“记录编程技术，实现在线功能”

简单介绍一下Ajax技术，顺便讲讲在本网站阅读量统计方面Ajax技术的运用。

什么是Ajax？

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Ajax的实际运用场景

在静态网页可以不刷新重载网页实现以下功能，特别是有设置缓存的静态网站，可以动态执行所需要的更新，避免一些不必要资源的再次加载，可以增加浏览器的访问速度，增加客户浏览体验度。 Ajax技术的一些运用实例如下：

页面下拉加载更多
页面搜索框
统计阅读量
实现点赞和统计点赞量
......

具体运用

统计博文浏览量

为了提高网页加载速度，本网站设置了缓存，这也导致了不能实时更新网页数据，于是为了统计阅读量，应用了Ajax技术。

在主页方面

由于是静态网页设置了缓存，所以不可能实时更新浏览量数据，所以在网站主页获取各博文的浏览量时得向后端发送Ajax的异步请求，获取此时各博文的浏览量，动态更新到各博文框。

获取当前页面各博客的id，形成id数组。
利用Ajax异步请求，将数据传到Django后端。
之后获取Django后端查询数据库获取各id对应博文的浏览量。
最后分别将浏览量数据写入每篇博文框里面。

请求的内容如下：

获取的数据数组如下：

前端

COPY//Jquery版本
 <!-- 阅读量统计 -->
    <script>
        var postarray = new Array();
        //根据Django模板语言获取当前页面的各博文的id，形成id数组。
        {% for article in perpage_data %}
            postarray.push({{ article.id}});
        {% endfor %}
        //利用Ajax请求数据，获取数据。
        $.ajax({
            type: "post",//请求的类型
            url: "/ajax/home", //请求的后端处理路径
            contentType: "application/json; charset=utf-8",//请求的数据类型
            //请求的数据
            data: JSON.stringify({
                post_ids: postarray, 
            }),
            dataType: "json",
            //如若请求成功，返回200状态码，执行以下函数。
            success: function (results) {
            //遍历返回的数据数组，分别对应写入博文框
                for (var result in results) {
                    $('#' + result).text(results[result]); 
                }
            },
        })
    </script>


//Js版本
<!-- 阅读量统计 -->
    <script type="text/javascript">
        var postarray = new Array();
        //根据Django模板语言获取当前页面的各博文的id，形成id数组。
        {% for article in perpage_data %}
            postarray.push({{ article.id}});
        {% endfor %}
        var xhr = new XMLHttpRequest(); //new一个ajax对象
        xhr.open("post", "/ajax/home"); //请求的后端处理路径
        xhr.setRequestHeader("Content-Type", 'application/json');//请求的数据类型
        xhr.send(JSON.stringify({post_ids: postarray}));//将数据变成JSON格式，发送请求数据。
        //当请求成功，返回200结果，onload加载执行。
        xhr.onload = function () {
            results = JSON.parse(xhr.responseText);
            //遍历返回的数据数组，分别对应写入博文框
            for(var result in results)
            {
                var html = document.getElementById(''+result);
                html.innerHTML = results[result];
            }
    }
    </script>

后端

COPYimport json
from django.http import JsonResponse
from article.models import Article

def ajaxOFhome_view(request):
    # 获取请求的json格式数据
    receive_data = json.loads(request.body.decode())['post_ids']
    results = {}
    #根据获取的博文id数组，查询数据库，获取对应博文的阅读量，
    #形成数据数组JSON格式返回给前端。
    for id in receive_data:
        article = Article.objects.filter(id=id).defer('body').first()
        results['views' + str(id)] = article.views
    return JsonResponse(results)

在博文页面

每次进入该页面都要执行一次对该博文的阅读量+1，道理跟首页的一样，只不过只请求一个id数据，后端的数据查询数据库后需要更新数据（阅读量+1）

Ajax的POST请求的内容如下：

返回的数据如下：

前端

COPY<script>
        $.ajax({
            type: "post",
            url: "/ajax/article",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                post_id: {{ article.id }}, //只请求当前博文页面的id
            }),
            dataType: "json",
            //请求成功，将最新的阅读量写入博文页的阅读量。
            success: function (results) {
                $('#views').text(results['views' + {{ article.id }}]);
            },
            error: function (results) {
                alert('错误提示:' + results.status + '!\n阅读量统计出错！请联系管理员QQ:372347736！');
            }
        })
    </script>

后端

COPYimport json
from django.http import JsonResponse
from article.models import Article

def ajaxOFarticle_view(request):
    receive_id = json.loads(request.body.decode())['post_id']
    results = {}  # 储存返回json信息
    #查询该id对应的文章，阅读量+1，然后返回更新后的阅读量
    article = Article.objects.defer('body').get(id=receive_id)
    article.views += 
    article.save()
    results['views' + str(receive_id)] = article.views
    return JsonResponse(results)