Ajax内容签名技术(减少无谓流量损耗)
UI界面Ajax获取数据内容的时候,一般是直接加载内容填充,不管内容有无变化。自己也是一直这么干,包括定时刷新公告等。
今天在浏览器控制台调试的时候,发现动态刷新内容,其实挺耗费流量的,特别是内容无变化的时候,却一直要传输同样的内容,而部分刷新,加载的是大量的内容。这样就造成了流量的无谓浪费,而且刷新的时候,dom容器也会闪烁一下,用户体验很不好。
所以今天突然想到一个方法,就是把传输内容格式改造一下,返回json格式,格式为:{"value":"","sign":""},value对应的是原来的内容,sign是内容的MD5签名。
ajax获取数据后,把内容的sign值和dom元素的[data-sign]比对:
1.如果是第一次获取,则此时dom元素的[data-sign]为空,所以应该把内容的sign值写入到dom元素的[data-sign]中,并且应用value值。
2.如果不是第一次获取,则把dom元素的[data-sign]作为请求参数,发送给服务端后台,服务端后台根据传入的sign参数的值与内容生成的md5值比对,如果内容签名值与参数sign值不一致,则说明内容有变化,输出内容为:{"value":"内容","sign": $md5_sign},前端则重复第一步操作。如果内容签名值与参数sign值一样,则说明内容没有变化,这时就没必要返回内容值了,输出内容为:{"value":"","sign":$md5_sign},从而节省了无谓的流量消耗。
这个方法,命名为:Su-AjaxContent-Sign (SACS) Ajax内容签名。
Ajax内容签名技术(减少无谓流量损耗)的更多相关文章
- 使用Ajax内容签名,减少流量浪费
前端UI界面用Ajax获取数据内容的时候,一般是直接获取内容数据并填充,不管内容有无变化,不管数据量多大,都是直接重新加载数据,例如定时刷新公告等. 今天在浏览器控制台调试的时候,发现动态刷新内容,其 ...
- Ajax原理,技术封装与完整示例代码
在做项目和学习的时候,经常用到Ajax的相关技术,但是这方面的技术总是运用的不是十分好,就寻找相关博客来学习加深Ajax技术相关. 一.Ajax简介 二.同步.异步传输区别 2.1 异步传输 2.2 ...
- 如何让搜索引擎抓取AJAX内容? 转
越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用 Ajax 技术,根据用户的输入,加载不同的内容. 这种做法的 ...
- 如何让搜索引擎抓取AJAX内容?
越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处 ...
- 基于http的追加协议、构建web内容的技术、web的攻击技术(9,10,11)
第九章 基于http的追加协议 用来提升http的瓶颈,比如Ajax技术,spdy等 第十章 构建web内容的技术 html.css.js等 第十一章 web的攻击技术 比如sql注入攻击.xss等.
- 爬虫实战【6】Ajax内容解析-今日头条图集
Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). Ajax并不是新的编程语言,而是一种使用现有标准的新方法,当然 ...
- 2018-06-25 js表单事件、三个高度和Ajax异步通讯技术
表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- 【学习笔记】AJAX内容拓展
题记——近期回顾<javaScript高级程序设计>ajax章节,发现书中对封装一个ajax库并不完美,结合之前看到博客,对ajax库做一点点的优化. 参考博客:如何去封装一个ajax库 ...
随机推荐
- Selenium的定位元素
1.浏览器操作 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 2.获取标签元素 # 通过ID定位目标元素 dri ...
- 算法87-----DAG有向无环图的拓扑排序
一.题目:课程排表---210 课程表上有一些课,是必须有修学分的先后顺序的,必须要求在上完某些课的情况下才能上下一门.问是否有方案修完所有的课程?如果有的话请返回其中一个符合要求的路径,否则返回[] ...
- eas左树右表基础资料界面引用为左树右表F7的简单方法
age: /** * 加载配件F7(左树右表) * @param F7Filed 要加载的F7控件 * @param ctx 界面上下文 * @单据 ...
- 【剑指Offer】23、二叉搜索树的后序遍历序列
题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 解题思路: 对于后续遍历序列,序 ...
- HTTP 状态码之:301、302 重定向
转自:http://www.cnblogs.com/5207/p/5908354.html 概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用 ...
- 洛谷P1478 陶陶摘苹果(升级版)【水题】
又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力气只剩下s ...
- [poj1325] Machine Schedule (二分图最小点覆盖)
传送门 Description As we all know, machine scheduling is a very classical problem in computer science a ...
- Java基础学习总结(66)——配置管理库typesafe.config教程
Typesafe的Config库,纯Java写成.零外部依赖.代码精简.功能灵活.API友好.支持Java properties.JSON.JSON超集格式HOCON以及环境变量.它也是Akka的配置 ...
- Music in Car
Music in Car time limit per test 1 second memory limit per test 256 megabytes Sasha reaches the work ...
- Merging into a Table: Example
Merging into a Table: Example The following example uses the bonuses table in the sample schema oe w ...