前端UI界面用Ajax获取数据内容的时候,一般是直接获取内容数据并填充,不管内容有无变化,不管数据量多大,都是直接重新加载数据,例如定时刷新公告等。

今天在浏览器控制台调试的时候,发现动态刷新内容,其实挺耗费流量的,特别是内容无变化的时候,却一直要传输同样的内容数据。如果加载的是大量的数据,更造成了流量的白白浪费。而且刷新的时候,dom元素可能也会造成界面闪烁,用户体验很不好。

所以今天突然想到一个方法,就是把传输的数据内容的格式改造一下,返回json格式为:{"content":[],"ajaxsign":""},content对应的是原来传输的数据内容,ajaxsign是新增的,表示数据内容的MD5签名。
例如:原来返回数据:[{},{},...],改造成:{"content":[{},{},...], "ajaxsign":""}

前端UI代码也要配合修改,显示数据内容的dom元素要加上一个[data-ajax-sign]属性,这个属性可以在ajax获取数据内容后动态添加,无需在dom元素上硬编码。
例如:<div id="notices-list"></div>, 改造成:<div id="notices-list" data-ajax-sign=""></div>

Ajax获取到数据后,把数据中的ajaxsign值和dom元素的[data-ajax-sign]比对:
1.如果是第一次获取,则此时dom元素的[data-ajax-sign]为空,所以应该把返回数据的ajaxsign值写入到dom元素的[data-ajax-sign]中,content的数据就是原来传输的数据内容,按以前逻辑解析填充。
2.如果不是第一次获取,则把dom元素的[data-ajax-sign]加入请求参数中,发送给服务端后台,服务端后台接收到传入的ajaxsign参数的值(client_ajax_sign),并与内容生成的md5值(即服务端ajaxsign值:server_ajax_sign)比对,如果服务端内容签名的值与请求参数ajaxsign值不一致,则说明内容有变化,输出内容为:{"content":[],"ajaxsign": $md5_sign},前端则重复第一步操作。如果服务端内容签名的值与参数ajaxsign值一样,则说明内容没有变化,这时就没必要返回内容值了,输出内容为:{"content":null,"ajaxsign":$md5_sign},从而节省了流量的白白消耗。

决定把这个方法,命名为:Su-Ajax-Content-Sign (SACS),简称SACS-Ajax内容签名技术。

引用自己旧博客:http://www.cnblogs.com/sutroon/p/5268848.html
原著时间:2016-03-12 15:33

版权声明:本文采用署名-非商业性使用-相同方式共享(CC BY-NC-SA 3.0 CN)国际许可协议进行许可,转载请注明作者及出处。
本文标题:使用Ajax内容签名,减少流量浪费
本文链接:http://www.cnblogs.com/sochishun/p/7072817.html
本文作者:SoChishun (邮箱:14507247#qq.com | 博客:http://www.cnblogs.com/sochishun/)
发表日期:2017年6月24日

使用Ajax内容签名,减少流量浪费的更多相关文章

  1. Ajax内容签名技术(减少无谓流量损耗)

    UI界面Ajax获取数据内容的时候,一般是直接加载内容填充,不管内容有无变化.自己也是一直这么干,包括定时刷新公告等.今天在浏览器控制台调试的时候,发现动态刷新内容,其实挺耗费流量的,特别是内容无变化 ...

  2. 如何让搜索引擎抓取AJAX内容? 转

    越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用 Ajax 技术,根据用户的输入,加载不同的内容. 这种做法的 ...

  3. 如何让搜索引擎抓取AJAX内容?

    越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处 ...

  4. Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

    Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...

  5. 【学习笔记】AJAX内容拓展

    题记——近期回顾<javaScript高级程序设计>ajax章节,发现书中对封装一个ajax库并不完美,结合之前看到博客,对ajax库做一点点的优化. 参考博客:如何去封装一个ajax库 ...

  6. 爬虫实战【6】Ajax内容解析-今日头条图集

    Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). Ajax并不是新的编程语言,而是一种使用现有标准的新方法,当然 ...

  7. 验证loadrunner对Ajax内容的校验

    前一阵和开发的同事一起測试某个系统的性能.此系统是发送Ajax请求到后台,再调用第三方的某项服务. 第三方服务的性能由不得我们控制.因此开发者做了一下改进.超时则直接返回. 于是在loadrunner ...

  8. 防止IE缓存jquery ajax 内容

    转自:http://blog.163.com/haijun_huang/blog/static/167591377201201235754763/ 解决办法: 方法一:把type改成post,并随便设 ...

  9. Android 学习资源

    下面这些资源对Android开发来说是很有帮助的! 最常用的: Android开发官方网站:http://developer.android.com/index.html 这个网站应该是Android ...

随机推荐

  1. 测试基础-http协议(转)

    HTTP的特性 HTTP构建于TCP/IP协议之上,默认端口号是80 HTTP是无连接无状态的 HTTP报文 请求报文 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规 ...

  2. elasticsearch备份与恢复

    备注:以下代码在kibana插件下运行: # 创建一个备份用的仓库# type:fs文件系统# 支持Shared filesystem, Amazon S3, HDFS和Azure #Cloud# l ...

  3. Open vSwitch for CentOS

    原文发表于cu:2016-06-02 本文属于重发,ovs当前的安装方式可能略有不同. 参考文档: 官方文档: http://openvswitch.org/support/dist-docs-2.5 ...

  4. Python 日志记录与程序流追踪(基础篇)

    日志记录(Logging) More than print: 每次用 terminal debug 时都要手动在各种可能出现 bug 的地方 print 相关信息来确认 bug 的位置: 每次完成 d ...

  5. 记录一次爬虫报错:Message: Failed to decode response from marionette

    由于标题中的错误引发: Message: Tried to run command without establishing a connection 解释: 先说一下我的爬虫架构,用的是firefo ...

  6. windows8和windows server2012不联网安装.net 3.5(包括2.0和3.0)

    安装完win8后 发现系统默认没有安装.net3.5 如果使用在线更新的话需要很久才能完成,特别是当前的网速以及微软的服务器.速度很忙,其实我们利用win8的安装盘就可以不需要联网更新,而且几分钟就搞 ...

  7. Linux下的计算器(bc、expr、dc、echo、awk)知多少?

    linux 其他知识目录 原文链接:http://blog.chinaunix.net/uid-24673811-id-1760837.html linux下的三个命令可以用来作计算,下面一一讲解用法 ...

  8. 冲刺ing-7

    第七次Scrum冲刺 队员完成的任务 队员 完成任务 吴伟华 Leangoo的看板截图,燃尽图 蔺皓雯 编写博客 蔡晨旸 进行测试 曾茜 界面设计 鲁婧楠 界面前后端 杨池宇 界面前后端 项目的发布说 ...

  9. postion一句话很管用

    relative和absolute有本质区别,relative是相对与postion为默认值的时候元素自身位置来定位:而absolute是相对最近position为relative或absolute的 ...

  10. C++寒假计划

    课程 西北工业大学的c++程序设计 理由 这个课程里的内容都比较详细,能比较全面的讲解C++,我们是从C过渡到C++的,所以我之前看了阚道洪的面向对象程序设计的课程,他讲解了两者的差别,还有C++对C ...