PhoneGap下纯HTML5与服务器交互,基于jQuery
来源:互联网 发布:淘宝客会推新店铺吗 编辑:程序博客网 时间:2024/05/16 17:23
第一次使用PhoneGap,想到的与服务器交互有两种方案,一种是使用默认的本地HTML方式(当然也可以把HTML放在服务器端,但是这样还不如使用第二种方案),一种是全程使用服务器脚本,比如JSP页面,当然这些页面肯定是放在服务器端,客户端只需要在初始化的时候引用这个页面即可,Android客户端,代码如下:
public class MyActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); //super.loadUrl("file:///android_asset/login.html");super.loadUrl("http://220.166.32.204:8080/test/login.jsp");super.setIntegerProperty("loadUrlTimeoutValue", 15000);}}
注释掉的代码为PhoneGap默认的本地HTML方案,下面的http请求即为服务器脚本解决方案
各有各的好处,本地HTML方案可以把代码和服务器端的代码隔离开,维护只需要维护客户端,无需修改服务器端,并且因为是本地读取,可以在无网络情况下使用应用程序(可以把资源保存在本地sqlLite数据库中);服务器脚本解决方案好处是代码简单,和开发普通web页面几乎无差别,甚至可以直接使用之前针对PC写好的web页面,JS识别设备动态更换一下CSS样式即可。
我使用的是本地HTML5解决方案,在数据交互上,使用的是ajax,因为jQuery Mobile库为基础,所以使用jQuery的ajax方法,JS代码如下:
function pullNoticeList(){$.ajax({url:addr+"notice_list.action",type:"POST",dataType:"jsonp",data:{"start":"0","limit":"8","sort":"effectiveDate","dir":"DESC"},beforeSend: function(){$("#content").html("<p>数据拉取中,请稍后...</p>").trigger("create");},success:function(response){var startHtml = '<ul id="listview" data-role="listview" data-theme="c">';var endHtml = "<li id='more'><p style='text-align:center' onClick='pullMoreNoticeList(9,8)'>查看更多</p></li></ul>";$.each(response.noticeList,function(index,item){startHtml+="<li><a href='javascript:showDetail("+item.noticeId+");'><p>"+item.noticeTitle+"<span class='ui-li-aside'>"+item.effectiveDate+"</span></p></a></li>";});$("#content").html(startHtml+endHtml).trigger("create");},error:function(){showReConnConfirm();}});}
HTML代码:
<body> <div id="notice" data-role="page" data-theme="b"> <div data-id="myheader" data-role="header" data-theme="b" data-position="fixed"> <img src="css/images/logo.jpg" alt="logo"> <a href="index.html" rel="external" class="ui-btn-right">返回首页</a> </div> <!-- header end --> <div id="content" data-role="content"> </div> <!-- content end --> <div data-id="myfooter" data-role="footer" data-position="fixed" data-theme="b"><h6>技术支持<a rel="external" href="http://www.scjx.com/">四川久信网络技术有限公司</a></h6></div><!-- footer end --> </div> <!-- notice page --> <div id="noticeDetail" data-role="page" data-theme="b"> <div data-id="myheader" data-role="header" data-theme="b" data-position="fixed"> <img src="css/images/logo.jpg" alt="logo"> <a href="#notice" data-rel="back" data-role="button" class="ui-btn-right">返回</a> </div> <!-- header end --> <div id="detail-content" data-role="content"> </div> <!-- content end --> <div data-id="myfooter" data-role="footer" data-position="fixed" data-theme="b"><h6>技术支持<a rel="external" href="http://www.scjx.com/">四川久信网络技术有限公司</a></h6></div><!-- footer end --> </div></body>
简单说明一下数据交互流程:进入html触发页面事件->执行JS的ajax方法访问服务器的struts下的Action->Action中执行一系列操作然后得到数据库返回的值->struts的json插件封装并把对象数据以json格式返回到js的callback函数中->js的ajax获取callback的返回值,在success函数中获取到该值,处理到html页面->html页面显示数据
必须使用jsonp格式,不然无返回值,其次,注意返回的json格式,一定要符合jQuery的json格式,可以通过firedug查看调试json,服务器端使用的struts,可以使用struts的json插件,可以很智能把对象封装成json格式,具体参考struts api。
- PhoneGap下纯HTML5与服务器交互,基于jQuery
- phonegap+HTML5完全静态页面跨域与服务器进行交互的方法
- 在Html5中与服务器交互
- Dynatable – 基于 HTML5 & jQuery 的交互表格插件
- 基于SOAP与服务器进行数据交互
- 使用PhoneGap开发基于Html5应用一:PhoneGap简介
- PhoneGap 跨平台应用:HealthWorking (2) 通过REST Service与服务器交互实现登陆
- (TCP模式下)客户端与服务器交互
- phoneGap--jQuery Mobile--Html5的一些总结
- PHP与HTML5交互
- Android与Html5交互
- android与html5交互
- native与html5交互
- Native与html5交互
- Android与Html5交互
- android与phonegap的相互交互
- android与phonegap的相互交互
- 与基于udp协议的tracker服务器进行交互
- 静态链接库、动态链接库、MFC的联系和区别
- glibc--memcpy源码分析
- winjs.xhr的认识
- WaitForSingleObject的用法
- 理解Java中的hashmap
- PhoneGap下纯HTML5与服务器交互,基于jQuery
- Android dumpsys 命令解析
- 如何实现360手机卫士自动连接数据网络的功能
- 请不要再用老土的销售对白了
- 自己创业的八个提高生产力的方法 为自己干活可不能偷懒
- 事件处理
- string对象和C字符串之间的转换
- linux tomcat jvm内存优化
- AC自动机 fail树 线段树维护