AppCan 网络数据通讯.docx

1、AppCan 网络数据通讯简介移动互联网应用中，网络通讯是应用的重中之重。如何处理好网络通讯的设计，将会对提高用户体验减少应用流量起到极大的作用。在进行移动应用开发中，HTTP/HTTPS协议是广泛采用的通讯协议，浏览器更是完全依赖于HTTP/HTTPS协议来完成所有的网络交互。而浏览器中对HTTP协议的使用更多的是按照访问互联网网页的使用场景进行优化的，对于移动应用开发并不是完全贴合，直接使用浏览器引擎提供的访问接口在处理离线数据上将会由很大的限制。我们首先对HTTP协议和浏览器的Cache做一个简单的讲解。1、HTTP/HTTPS协议标准HTTP协议遵循请求响应机制，即一个请求对应一个响应

2、。如下图上图中可以看到，客户端浏览器发送一个请求到服务器，服务器收到请求后处理并返回响应数据给浏览器，这一次交互就是一个HTTP Session。浏览器中所有的数据获取都依赖于此机制，包括HTML/JS/CSS文件的下载、网页中图片的下载、AJAX请求等。HTTP协议主要用来帮助浏览器获取数据和资源，对于数据常用的格式有JSON、XML等，但数据量比较大的时候，这两种格式都会占用很大的空间，造成数据获取时间加长，应用响应慢，尤其在网络情况不好时，数据量的增大将使HTTP任务更加难以完成。为了提高响应速度，减少传输时间，提高HTTP任务完成率，我们经常采用对HTTP内容进行压缩传输的方法来解决这

3、个问题。目前浏览器技术中采用的是gzip技术。采用压缩技术后，纯文本的数据被压缩为二进制数据，整个大小会减少几倍到十几倍或更多，极大地提高了数据传输的效率。因此，服务器端配置支持内容的gzip压缩是必不可少的选项，而浏览器的请求中包含允许gzip类型的定义也是不可或缺的。2、HTTP之缓存由于受HTTP请求响应机制的限制，服务器端内容的更新并不能主动推送到客户端，因此网页经常需要刷新来与服务器进行交互来获取最新数据。同时网页中的很多资源会出现重复使用的情况，例如在一个或多个稳拿工业中使用同一个图片、JS或CSS文件。还会有很多情况要求浏览器被动或主动的去服务器请求数据。如果每一个请求服务器都回

4、传所有数据，即使前面的有同样请求已经获取了同样的数据，那么对于网络流量和响应时间都是不小的影响。因此，浏览器配合HTTP协议提供了缓存机制。如下图当浏览器向服务器发送HTTP请求获取数据时，如果服务器设定认为这个请求的数据例(如图片等不经常变动的元素)支持缓存，服务器会返回全部数据，同时在返回的协议头里面包含ETag和Last-Modified标签。ETag用来标明此数据的请求的唯一标识，Last-Modified标示此数据的最终修改时间。浏览器收到回复后，会保存此ETag、Last-Modified和返回的数据到本地。当浏览器再次向服务器发送同样请求时，会从本地获取请求对应的Etag和Las

5、t-Modified时间，在请求里添加If-Modified-Since和If-None-Match字段，服务器收到请求后根据请求头里的If-Modified-Since和If-None-Match判断本地对应资源是否有变更，如果没有变更，则直接返回304 Not Modified给浏览器，注意这次并不返回数据内容。浏览器收到304返回后，会从本地缓存中直接获取上次保存的数据进行处理。浏览器使用缓存技术，可以极大地降低数据流量，提高浏览器响应速度。3、浏览器缓存与移动应用开发通过上面的说明可以看到如果使用浏览器的缓存还是需要与服务器做一次校验。在校验回复之前，浏览器依然不能够从本地获取数据进行

6、显示。这种情况下在一些网络条件不好的情况下，将无法及时快速的展现数据给用户。而在移动应用开发中，客户端处理缓存数据是判断本地是否需要更新，如果不需要则直接使用，如果需要才去服务器重新获取，而浏览器处理缓存数据是先通过服务器判断是否需要更新，如果没有更新，则使用本地，如果有更新则直接使用返回数据，这是浏览器和移动应用客户端数据处理的最大不同点。而我们的目标是使用浏览器技术实现与原生应用相媲美的效果，所以我们的数据处理机制，也必须依照客户端的处理机制来处理。因此我们提供了两个封装的接口来帮助开发者处理数据和资源。4、离线存储之zy_json.js按照目前客户端服务器交互最常见的接口按照返回数据分有

7、JSON格式、XML格式等。而JSON格式因为其简单、快捷是我们经常优先采用的接口类型。zy_json.js是AppCan平台提供的用于与服务器进行对接，获取服务器数据或者完成内容资源上传的封装接口。同时其还支持离线存储机制，可以帮助开发者在不改变处理逻辑习惯的基础上，实现与客户端等同的处理机制。接口$.getJSON(a,b,c,d,e,f,g)参数a 需要访问的目标URL或本地文件路径，支持AppCan扩展路径 。例如wgt:/data/a.txtb 数据获取成功后调用的回调函数， res为返回的数据，根据参数c返回json对象或字符串。例如function success_callbac

8、k(res)c 数据类型 json或text,当设定为json时，成功后调用的回调函数的参数为json对象，如果为text,参数为字符串d 操作失败后的回调函数e HTTP协议请求类型 GET 或 POST，默认为GETf 当需要使用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.att

9、achment; 上例中，共有三个参数，每个参数分别定义有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返回。备注：$.g

10、etJSON接口中使用了uexXmlHttpMgr.onData和uexWindow.cbError全局回调，因此，当使用$.getJSON时，在网页中，尽量不自定义使用uexXmlHttpMgr.onData和uexWindow.cbError接口避免冲突。$.getJSON接口中会判断是否是由本地网页访问互联网页面，当用户把网页部署在互联网上时，getJSON会使用标准xmlhttprequest对象进行数据交互，因此可以平滑的把网页部署于互联网或本地，而不需要对数据处理部分进行调整。不属于网端时，暂不支持POST和LocalStorage缓存。范例简单的数据获取范例 var url=/*

11、服务器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) /处理提

12、交异常 , POST,/以POST方式提交 j);/提交的参数键值对对象数据缓存范例var url=/*服务器JSON数据接口地址*/; $.getJSON(url,function(data) /在此处理返回的JSON对象 , json,/数据类型为JSON null,/未定义错误处理函数 GET,/使用GET方式获取 ,/无参数 true); /使用LocalStorage缓存数据对于上面的数据缓存范例，我们了解一下其运行机制。zy_json的数据缓存机制借助于浏览器的LocalStorage来实现，LocalStorage是HTML5的最新机制，它可以按照键值对的方式在本地保存字符串数据

13、，在用户清除前一值保留在系统中，即使网页被关闭、浏览器被关闭甚至终端被关闭。并且，在同一个域中的页面都适用同一个LocalStorage，即LocalStorage可以用于在域中的不同网页间共享数据，这对于我们使用HTML5技术开发本地应用更是一把利器。首先我们设定getJSON接口最后一个参数为true，即指定此次请求使用离线存储机制。getJSON接口首先从本地LocalStorage中检查当前请求URL是否有对应数据被保存，如果有，则直接调用成功回调函数，并返回本地数据。如果本地没有对应数据被保存，则向服务器发出请求，服务器返回数据后，getJSON接口会自动保存数据到本地LocalSt

14、orage中，然后调用成功函数返回数据。如果开发者认为需要从服务器重新获取数据，那么开发者调用$.getJSON函数之前，首先调用$.clearLS(url)来清除存储在LocalStorage中对应URL的键值对，这时$.getJSON接口将会从服务器获取数据，并存储新的数据到本地LocalStorage。通过上面的介绍可以看到，一般情况下开发者并不需要专门对本地缓存数据进行处理，只需要按照常见的向服务器获取数据的流程进行开发，getJSON接口来帮助开发者自动处理数据，可以极大地减少开发逻辑复杂度降低开发者的工作量，并能够有效地提高应用响应速度。但需要注意的是，如何用好这个接口需要开发者做

15、好应用的设计，保证请求能够匹配离线数据，才能有效地发挥它的作用。目前浏览器常见离线缓存大小为5M，处理常见应用的JSON数据已经足够庞大。开发者还可以使用$.clearLS()来清除所有离线存储数据。我们制作一个范例来演示如何使用离线缓存机制.中国天气网提供了开放的天气信息获取接口,例如这个接口可以用来获取北京六天内的天气预报，我们知道这个数据是不需要每次查看时都去服务器取一次的，只需要每天更新一次或者用户强制更新时再更新即可。我们使用IDE构建一个新的工程。在index_content.html中引入zy_json.js文件，我们将使用getJSON接口来演示。在index_content.

16、html文件中，我们创建两个函数refresh和loadWeather。refresh用于强制更新最新的天气，loadWeather用来处理天气请求任务。 function refresh() $.clearLS( loadWeather(); function loadWeather() $.getJSON( ,json, function(e) ,GET,true); 上述代码中，refresh接口开始时调用$.clearLS(然后，我们在uexOnload函数里加入loadWeather的调用，使界面一打开就去请求数据。我们可以通过模拟器跟踪一下看看。数据获取完后我们把它展示在屏幕上，这

17、里我们使用了模板技术，具体模板接口的使用在后面的章节中进行讲解。完整的代码如下 在这个代码里完整的加入了判断数据过期和数据缓存的处理。效果图：5、离线存储之zy_icache.js网页中不光包含JSON数据，图片、音乐等也是必不可少的元素。一般网页编程下，我们先用getJSON接口获取数据，并转换返回的数据为JSON格式，通过JS代码我们把JSON格式数据转化为网页HTML代码添加到页面里进行显示。而图片常用为标签或者元素的background-image属性。在这种处理机制下，图片是由浏览器负责下载并进行缓存。而在常见移动应用中，图片下载到本地后，由应用负责管理，通过代码逻辑判断是否需要更新

18、，与浏览器的缓存机制并不相同。为了提高应用的执行效率降低与服务器通讯的频率，我们封装了zy_icache.js，通过这个接口文件我们帮助开发者完成图片资源由应用进行管理的功能。接口接口：zy_imgcache(sel,key,url,cb,err,dest,ext)参数sel 此图片所属父元素。如果没有指定cb函数进行处理，则直接为此元素设定背景图key 图片唯一标识，用于标明此图片资源，来完成图片资源的管理。这个KEY可以是服务器回传的图片资源ID或者图片URI，只要能够完成图片跟踪即可。url 图片下载路径cb 图片下载成功回调函数。function cb(domobject,url)do

19、mobject sel所指定的对象url 下载后的本地全局路径，可以用于设定img的src属性或者用于设定dom对象的背景图片。err 图片下载失败回调函数dest 由开发者为图片指定的文件名。如果不指定，则由接口自动分配。ext 当开发者不指定文件名，而使用接口自动分配文件名时，为图片指定的扩展名，如果开发者不指定，默认为jpg范例window.uexOnload=function(type)if(!type)zy_initcache(function();function createDown()zy_imgcache(testdo,1,.hk/images/srpr/logo3w.png

20、,null,null,null,png);我们讲解一下上面的例子，首先开发者需要在window.uexOnload里面调用zy_initcache接口来初始化本地缓存状态。然后开发者可以调用zy_imgcache来完成图片的缓存操作。上面例子中，zy_imgcache的参数各代表如下意义。testdo代表一个div对象，这个参数不光可以是对象的ID，也可以直接是对象本身。第二个参数代表这个图片的唯一标识，可以是服务器的图片ID或者是图片URL本身都可。第三个参数是图片的下载路径。第四个参数为空，代表需要执行默认处理，即直接把下载的图片设定为testdo对象的背景图片。第5个参数为空，代表不需要

21、进行错误处理，第六个参数为空代表由接口为图片分配名称。第七个参数为png,代表为由接口分配的文件名制定扩展名为png。当我们第一次调用这个接口时，会从google下载图片到本地，并设定这个本地图片为testdo的背景。当我们第二次调用这个接口时，会判断此图片已经存储在本地，则直接设定本地图片为testdo的背景，而不需要向服务器重新获取。由于手机空间有限，开发者在开发应用时，需要提供给用户清除临时数据的功能，我们在zy_icache.js中提供了zy_clearcache接口来帮助开发这清除所有由zy_imgcache接口下载的图片缓存，并清除LocalStorage。注意，这个接口会清除所有

22、LocalStorage数据不仅仅是img cache的数据。我们继续使用Demo026的范例代码，为其加上天气预报图片。我们先通过模拟器分析获取的天气预报的数据格式。上图中我们看到图片共有img1到img12共12张图片代表6天早晚各两张图片，每个图片得数值代表着图片的索引。其中99的意思是与白天的图片使用同一张。我们通过分析网站的代码获知图片的URL地址为其中最后的图片名称中d代表白天n代表夜晚，后面是数字编号。因此我们可以通过数据中的img字段很容易的获得目标图片的路径。我们调整一下模板代码。在每一行插入两个用于存放图片的DIV 上面的代码中我们为每一个DIV设定了ID用于后续设定其背景

23、图片，为DIV设定了背景图片的模板。模板中$cb:img:1代表通过回调函数处理数据。img为字段类型1为附加数值。这种写法可以使img1 img2 img3. img12通过同一段代码进行处理。然后在加入zy_icache.js的引用。之前的范例中，我们在uexOnload函数里执行了loadWeather函数，为了支持图片缓存，我们需要在uexOnload函数里先执行zy_initcache 函数，在这个函数的回调里再执行loadWeather接口，保证在执行图片缓存时，缓存参数已经被初始化。 zy_initcache(function() loadWeather(); );最后我们在处理

24、模板拼接的代码里为img字段添加处理代码case img: var id=img+ar1;/根据$cb:img:n n就是ar1,组合后 img1 img2. var ind=int(aid); /根据img1 img2.得到图片编号 if(ind=99)/如果图片编号为99 则获得前一个图片的索引编号 ind=int(aimg+(int(ar1)-1); var sind=(ind10)?(0+ind):(+ind);/组合图片索引如果小于10则补零 var dn=int(a.fchh)=18?d,n:n,d;/天气每天两次因此要区分早晚 var pname=dnint(ar1)%2+sin

25、d;/根据早晚和图片索引声称目标图片名称 var u = return zy_imgcache(id, pname, u, null, null, pname + .gif);/缓存此图片，缓存成功后或已存在修改id对应dom对象的背景图片 break;述代码中我们看到，我们直接处理了img而不是img1 img2 img3.这样做可以使这些标签使用同一套代码来完成。我们先根据编号拼接关键字imgn，然后通过关键字找到图片索引，对索引进行处理后，根据更新时间确定日夜模式。拼接日夜属性和图片索引为图片名称，最后组合实际的URL。组合完url后，我们调用zy_imgchche接口来处理图片缓存。第一个参数id代表了我们刚才添加的各个DIV的ID。通过这个ID我们可以在图片缓存后为其添加背景图片。pname代表图片的关键字用于区分图片，同时也用于后面校验图片好直接从本地存储的图片获取。第三个参数U代表图片下载路径。第四个参数是缓存成功回调函数，这里为空，zy_imgcache会自动设定id所指向的对象的背景图片。第五个参数也为空，为失败时的错误处理函数。第六个参数为目标图片名称。