前端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)国际许可协议进行许可,转载请注明作者及出处。 |