AppCan 网络数据通讯.docx

AppCan 网络数据通讯.docx

《AppCan 网络数据通讯.docx》由会员分享，可在线阅读，更多相关《AppCan 网络数据通讯.docx（9页珍藏版）》请在冰豆网上搜索。

AppCan网络数据通讯

简介

移动互联网应用中，网络通讯是应用的重中之重。

如何处理好网络通讯的设计，将会对提高用户体验减少应用流量起到极大的作用。

在进行移动应用开发中，HTTP/HTTPS协议是广泛采用的通讯协议，浏览器更是完全依赖于HTTP/HTTPS协议来完成所有的网络交互。

而浏览器中对HTTP协议的使用更多的是按照访问互联网网页的使用场景进行优化的，对于移动应用开发并不是完全贴合，直接使用浏览器引擎提供的访问接口在处理离线数据上将会由很大的限制。

我们首先对HTTP协议和浏览器的Cache做一个简单的讲解。

1、HTTP/HTTPS协议

标准HTTP协议遵循请求响应机制，即一个请求对应一个响应。

如下图

上图中可以看到，客户端浏览器发送一个请求到服务器，服务器收到请求后处理并返回响应数据给浏览器，这一次交互就是一个HTTPSession。

浏览器中所有的数据获取都依赖于此机制，包括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判断本地对应资源是否有变更，如果没有变更，则直接返回304NotModified给浏览器，注意这次并不返回数据内容。

浏览器收到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对象或字符串。

例如

functionsuccess_callback（res）

c数据类型json或text,当设定为json时，成功后调用的回调函数的参数为json对象，如果为text,参数为字符串

d操作失败后的回调函数

eHTTP协议请求类型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缓存。

范例

简单的数据获取范例

varurl=/*服务器JSON数据接口地址*/;

$.getJSON（url,function（json）{

//在此处理json数据

}）;

数据提交范例

varj=[{'key':

'post_title','type':

'0','value':

'title'},

{'key':

'post_content','type':

'0','value':

'这是一个范例'},

{'key':

'async-upload','type':

'1','value':

'wgt:

//photo/1.png'}];

varurl=/*服务器JSON数据接口地址*/;

$.getJSON（url,function（data）{

//处理数据提交后返回的数据

},'json',//返回类型为json

function（err）{

//处理提交异常

},

'POST',//以POST方式提交

j）;//提交的参数键值对对象

数据缓存范例

varurl=/*服务器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（）来清除所有离线存储数据。

我们制作一个范例来演示如何使用离线缓存机制.中国天气网提供了开放的天气信息获取接口,例如

这个接口可以用来获取北京六天内的天气预报，我们知道这个数据是不需要每次查看时都去服务器取一次的，只需要每天更新一次或者用户强制更新时再更新即可。

我们使用IDE构建一个新的工程。

在index_content.html中引入zy_json.js文件，我们将使用getJSON接口来演示。

在index_content.html文件中，我们创建两个函数refresh和loadWeather。

refresh用于强制更新最新的天气，loadWeather用来处理天气请求任务。

functionrefresh（）{

$.clearLS（'

loadWeather（）;

}

functionloadWeather（）{

$.getJSON（'

{

},'json',

function（e）{

},'GET','',true）;

}

上述代码中，refresh接口开始时调用$.clearLS（'

然后，我们在uexOnload函数里加入loadWeather的调用，使界面一打开就去请求数据。

我们可以通过模拟器跟踪一下看看。

数据获取完后我们把它展示在屏幕上，这里我们使用了模板技术，具体模板接口的使用在后面的章节中进行讲解。

完整的代码如下在这个代码里完整的加入了判断数据过期和数据缓存的处理。

效果图：

5、离线存储之zy_icache.js

网页中不光包含JSON数据，图片、音乐等也是必不可少的元素。

一般网页编程下，我们先用getJSON接口获取数据，并转换返回的数据为JSON格式，通过JS代码我们把JSON格式数据转化为网页HTML代码添加到页面里进行显示。

而图片常用为

标签或者元素的background-image属性。

在这种处理机制下，图片是由浏览器负责下载并进行缓存。

而在常见移动应用中，图片下载到本地后，由应用负责管理，通过代码逻辑判断是否需要更新，与浏览器的缓存机制并不相同。

为了提高应用的执行效率降低与服务器通讯的频率，我们封装了zy_icache.js，通过这个接口文件我们帮助开发者完成图片资源由应用进行管理的功能。

接口

接口：

zy_imgcache（sel,key,url,cb,err,dest,ext）

参数

sel此图片所属父元素。

如果没有指定cb函数进行处理，则直接为此元素设定背景图

key图片唯一标识，用于标明此图片资源，来完成图片资源的管理。

这个KEY可以是服务器回传的图片资源ID或者图片URI，只要能够完成图片跟踪即可。

url图片下载路径

cb图片下载成功回调函数。

functioncb（domobject,url）

domobjectsel所指定的对象

url下载后的本地全局路径，可以用于设定img的src属性或者用于设定dom对象的背景图片。

err图片下载失败回调函数

dest由开发者为图片指定的文件名。

如果不指定，则由接口自动分配。

ext当开发者不指定文件名，而使用接口自动分配文件名时，为图片指定的扩展名，如果开发者不指定，默认为jpg

范例

#EEE;width:

200px;height:

200px'>