AppCan 网络数据通讯
- 格式：doc
- 大小：125.00 KB
- 文档页数：11
简介 移动互联网应用中，网络通讯是应用的重中之重。如何处理好网络通讯的设计，将会对提高用户体验减少应用流量起到极大的作用。
在进行移动应用开发中，HTTP/HTTPS协议是广泛采用的通讯协议，浏览器更是完全依赖于HTTP/HTTPS协议来完成所有的网络交互。而浏览器中对HTTP协议的使用更多的是按照访问互联网网页的使用场景进行优化的，对于移动应用开发并不是完全贴合，直接使用浏览器引擎提供的访问接口在处理离线数据上将会由很大的限制。我们首先对HTTP协议和浏览器的Cache做一个简单的讲解。
1、HTTP/HTTPS协议 标准HTTP协议遵循请求响应机制，即一个请求对应一个响应。如下图
上图中可以看到，客户端浏览器发送一个请求到服务器，服务器收到请求后处理并返回响应数据给浏览器，这一次交互就是一个HTTP Session。浏览器中所有的数据获取都依赖于此机制，包括HTML/JS/CSS文件的下载、网页中图片的下载、AJAX请求等。HTTP协议主要用来帮助浏览器获取数据和资源，对于数据常用的格式有JSON、XML等，但数据量比较大的时候，这两种格式都会占用很大的空间，造成数据获取时间加长，应用响应慢，尤其在网络情况不好时，数据量的增大将使HTTP任务更加难以完成。为了提高响应速度，减少传输时间，提高HTTP任务完成率，我们经常采用对HTTP内容进行压缩传输的方法来解决这个问题。目前浏览器技术 中采用的是gzip技术。采用压缩技术后，纯文本的数据被压缩为二进制数据，整个大小会减少几倍到十几倍或更多，极大地提高了数据传输的效率。因此，服务器端配置支持内容的gzip压缩是必不可少的选项，而浏览器的请求中包含允许gzip类型的定义也是不可或缺的。
2、HTTP之缓存 由于受HTTP请求响应机制的限制，服务器端内容的更新并不能主动推送到客户端，因此网页经常需要刷新来与服务器进行交互来获取最新数据。同时网页中的很多资源会出现重复使用的情况，例如在一个或多个稳拿工业中使用同一个图片、JS或CSS文件。还会有很多情况要求浏览器被动或主动的去服务器请求数据。如果每一个请求服务器都回传所有数据，即使前面的有同样请求已经获取了同样的数据，那么对于网络流量和响应时间都是不小的影响。因此，浏览器配合HTTP协议提供了缓存机制。如下图
当浏览器向服务器发送HTTP请求获取数据时，如果服务器设定认为这个请求的数据例(如图片等不经常变动的元素)支持缓存，服务器会返回全部数据，同时在返回的协议头里面包含ETag和Last-Modified标签。ETag用来标明此数据的请求的唯一标识，Last-Modified标示此数据的最终修改时间。浏览器收到回复后，会保存此ETag、Last-Modified和返回的数据到本地。当浏览器再次向服务器发送同样请求时，会从本地获取请求对应的Etag和Last-Modified时间，在请求里添加If-Modified-Since和If-None-Match字段，服务器收到请求后根据请求头里的If-Modified-Since和If-None-Match判断本地对应资源是否有变更，如果没有变更，则直接返回304 Not Modified给浏览器，注意这次并不返回数据内容。浏览器收到304返回后，会从本地缓存中直接获取上次保存的数据进行处理。浏览器使用缓存技术，可以极大地降低数据流量，提高浏览器响应速度。 3、浏览器缓存与移动应用开发 通过上面的说明可以看到如果使用浏览器的缓存还是需要与服务器做一次校验。在校验回复之前，浏览器依然不能够从本地获取数据进行显示。这种情况下在一些网络条件不好的情况下，将无法及时快速的展现数据给用户。而在移动应用开发中，客户端处理缓存数据是判断本地是否需要更新，如果不需要则直接使用，如果需要才去服务器重新获取，而浏览器处理缓存数据是先通过服务器判断是否需要更新，如果没有更新，则使用本地，如果有更新则直接使用返回数据，这是浏览器和移动应用客户端数据处理的最大不同点。而我们的目标是使用浏览器技术实现与原生应用相媲美的效果，所以我们的数据处理机制，也必须依照客户端的处理机制来处理。因此我们提供了两个封装的接口来帮助开发者处理数据和资源。
4、离线存储之zy_json.js 按照目前客户端服务器交互最常见的接口按照返回数据分有JSON格式、XML格式等。而JSON格式因为其简单、快捷是我们经常优先采用的接口类型。zy_json.js是AppCan平台提供的用于与服务器进行对接，获取服务器数据或者完成内容资源上传的封装接口。同时其还支持离线存储机制，可以帮助开发者在不改变处理逻辑习惯的基础上，实现与客户端等同的处理机制。
接口 $.getJSON(a,b,c,d,e,f,g) 参数 a 需要访问的目标URL或本地文件路径，支持AppCan扩展路径 。例如 wgt://data/a.txt b 数据获取成功后调用的回调函数， res为返回的数据，根据参数c返回json对象或字符串。例如
function success_callback(res) c 数据类型 json或text,当设定为json时，成功后调用的回调函数的参数为json对象，如果为text,参数为字符串
d 操作失败后的回调函数 e HTTP协议请求类型 GET 或 POST，默认为GET f 当需要使用muti-part方式上传数据时，需要传入的参数。参数以JSON格式存储，例如
[{'key':'post_title','type':'0','value':artTitleEle.value},
{'key':'post_content','type':'0','value':artContentEle.value},
{'key':'async-upload','type':'1','value':artAttachEle.attachment}];
上例中，共有三个参数，每个参数分别定义有key、type和value三个字段。 key代表HTTP协议上传时key值，等同于form表单中各元素的key. type代表数据的类型0代表字符串 1代表文件 value 代表需要上传的数据，当type等于0时，value为需要上传的字符串 当type等于1时，value代表需要上传的文件路径 g 是否使用LocalStorage，当g为true时，请求回先从LocalStorage中查找是否有与请求匹配的离线数据，如有则直接通过b返回，如果没有则向服务器请求，当请求返回后，首先保存数据到LocalStorage，然后通过b返回。
备注： $.getJSON接口中使用了uexXmlHttpMgr.onData和uexWindow.cbError全局回调，因此，当使用$.getJSON时，在网页中，尽量不自定义使用uexXmlHttpMgr.onData和uexWindow.cbError接口避免冲突。
$.getJSON接口中会判断是否是由本地网页访问互联网页面，当用户把网页部署在互联网上时，getJSON会使用标准xmlhttprequest对象进行数据交互，因此可以平滑的把网页部署于互联网或本地，而不需要对数据处理部分进行调整。不属于网端时，暂不支持POST和LocalStorage缓存。
范例 简单的数据获取范例 var url=/*服务器JSON数据接口地址*/; $.getJSON(url,function(json){ //在此处理json数据 }); 数据提交范例
var j =[{'key':'post_title','type':'0','value':'title'}, {'key':'post_content','type':'0','value':'这是一个范例'},
{'key':'async-upload','type':'1','value':'wgt://photo/1.png'}];
var url=/*服务器JSON数据接口地址*/; $.getJSON(url,function(data){ //处理数据提交后返回的数据
},'json',//返回类型为json function(err){ //处理提交异常 }, 'POST',//以POST方式提交
j);//提交的参数键值对对象 数据缓存范例
var url=/*服务器JSON数据接口地址*/; $.getJSON(url,function(data){ //在此处理返回的JSON对象 }, 'json',//数据类型为JSON
null,//未定义错误处理函数 'GET',//使用GET方式获取 '',//无参数 true); //使用LocalStorage缓存数据 对于上面的数据缓存范例，我们了解一下其运行机制。zy_json的数据缓存机制借助于浏览器的LocalStorage来实现，LocalStorage是HTML5的最新机制，它可以按照键值对的方式在本地保存字符串数据，在用户清除前一值保留在系统中，即使网页被关闭、浏览器被关闭甚至终端被关闭。并且，在同一个域中的页面都适用同一个LocalStorage，即LocalStorage可以用于在域中的不同网页间共享数据，这对于我们使用HTML5技术开发本地应用更是一把利器。
首先我们设定getJSON接口最后一个参数为true，即指定此次请求使用离线存储机制。getJSON接口首先从本地LocalStorage中检查当前请求URL是否有对应数据被保存，如果有，则直接调用成功回调函数，并返回本地数据。如果本地没有对应数据被保存，则向服务器发出请求，服务器返回数据后，getJSON接口会自动保存数据到本地LocalStorage中，然后调用成功函数返回数据。如果开发者认为需要从服务器重新获取数据，那么开发者调用$.getJSON函数之前，首先调用$.clearLS(url)来清除存储在LocalStorage中对应URL的键值对，这时$.getJSON接口将会从服务器获取数据，并存储新的数据到本地LocalStorage。
通过上面的介绍可以看到，一般情况下开发者并不需要专门对本地缓存数据进行处理，只需要按照常见的向服务器获取数据的流程进行开发，getJSON接口来帮助开发者自动处理数据，可以极大地减少开发逻辑复杂度降低开发者的工作量，并能够有效地提高应用响应速度。但需要注意的是，如何用好这个接口需要开发者做好应用的设计，保证请求能够匹配离线数据，才能有效地发挥它的作用。
目前浏览器常见离线缓存大小为5M，处理常见应用的JSON数据已经足够庞大。开发者还可以使用$.clearLS()来清除所有离线存储数据。我们制作一个范例来演示如何使用离线缓存机制.中国天气网提供了开放的天气信息获取接口,例如
