使用Ajax内容签名,减少流量浪费
前端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内容签名,减少流量浪费的更多相关文章
- Ajax内容签名技术(减少无谓流量损耗)
UI界面Ajax获取数据内容的时候,一般是直接加载内容填充,不管内容有无变化.自己也是一直这么干,包括定时刷新公告等.今天在浏览器控制台调试的时候,发现动态刷新内容,其实挺耗费流量的,特别是内容无变化 ...
- 如何让搜索引擎抓取AJAX内容? 转
越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用 Ajax 技术,根据用户的输入,加载不同的内容. 这种做法的 ...
- 如何让搜索引擎抓取AJAX内容?
越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处 ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- 【学习笔记】AJAX内容拓展
题记——近期回顾<javaScript高级程序设计>ajax章节,发现书中对封装一个ajax库并不完美,结合之前看到博客,对ajax库做一点点的优化. 参考博客:如何去封装一个ajax库 ...
- 爬虫实战【6】Ajax内容解析-今日头条图集
Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). Ajax并不是新的编程语言,而是一种使用现有标准的新方法,当然 ...
- 验证loadrunner对Ajax内容的校验
前一阵和开发的同事一起測试某个系统的性能.此系统是发送Ajax请求到后台,再调用第三方的某项服务. 第三方服务的性能由不得我们控制.因此开发者做了一下改进.超时则直接返回. 于是在loadrunner ...
- 防止IE缓存jquery ajax 内容
转自:http://blog.163.com/haijun_huang/blog/static/167591377201201235754763/ 解决办法: 方法一:把type改成post,并随便设 ...
- Android 学习资源
下面这些资源对Android开发来说是很有帮助的! 最常用的: Android开发官方网站:http://developer.android.com/index.html 这个网站应该是Android ...
随机推荐
- Mac系统STF自动化环境搭建及部署踩坑记录
因为公司需要寻找一个免root的自动化测试方案,所以以前做的老方案需要被替代.一阵搜寻找到了这个框架,但是部署起来很是折腾,搞了一下午终于搞定,顺便记录一下过程,有需要的自取. 转载请注明出处:htt ...
- Siki_Unity_2-4_UGUI_Unity5.1 UI 案例学习
Unity 2-4 UGUI Unity5.1 UI 案例学习 任务1-1:UGUI简介 什么是GUI: 游戏的开始菜单 RPG游戏的菜单栏.侧边栏和功能栏(比如背包系统.任务列表等) 设计用来控制移 ...
- python终端计算器,还有没其他方法?
import sysdef lt(a, b, c ): if b == "+": return int(a)+int(c) elif b == "-": ret ...
- python2和python3同时存在如何安装和使用pip
linux下 如果没有pip则需要安装pip python2安装pip sudo apt install python-pip1如果是python3,则如下: sudo apt install pyt ...
- Qt应用程序重启
重启应用程序是一种常见的操作,在Qt中实现非常简单,需要用到QProcess类一个静态方法: // program, 要启动的程序名称 // arguments, 启动参数 bool startDet ...
- Kickstart 安装centos7
以前是怎么安装系统的 光盘(ISO文件,光盘的镜像文件)===>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 U盘:ISO镜像刻录到U盘==>需要每台机器都需 ...
- 月薪45K的Python爬虫工程师告诉你爬虫应该怎么学,太详细了!
想用Python做爬虫,而你却还不会Python的话,那么这些入门基础知识必不可少.很多小伙伴,特别是在学校的学生,接触到爬虫之后就感觉这个好厉害的样子,我要学.但是却完全不知道从何开始,很迷茫,学的 ...
- javascript event对象操作
js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...
- daterangepicker时间段插件
1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...
- 0421--"数字口袋精灵app"二次开发(Blackbriar团队开发)
"数字口袋精灵app"二次开发 目录: 一.项目github总仓库推送 二.开发成员 三.分工与合作 四.各模块成果 五.心得墙 六.团队成员贡献分 内容: 一.项目github总 ...