相信使用爱码哥的小伙伴们对原生控件已经很熟悉了,在app开发中,原生控件能够帮助开发人员完成一个个精美的页面,给app奠定一个好的基础。然而,完成这些美观的静态页面只是开发app的开始,页面的交互和调用程度、用户体验和流畅的性能才是app的重中之重。这些与脚本功能息息相关,比如界面数据都是来自数据库的动态数据,用户输入的数据能够以同步和异步的方式入库,这些都需要JavaScript脚本来完成。
下面我们一起学习iMAG客户端访问后台数据库的两种方式。
通过后台程序读取数据库数据,再用JSP(需要部署Java本地开发环境http://www.imagapp.com/doc/envjava),ASP(需要部署.Net本地开发环境http://www.imagapp.com/doc/envnet)等脚本输出iMAG标签,这种方式类似于动态网页。如:
<?xml version="1.0" encoding="utf-8"?>
<imag>
<page>
<title>
<center><label><%=title%></label></center>
</title>
<content>
<list>
<%for (int i = 0; i < items.length; i++) {%>
<item accessory="indicator" href="<%=items[i][0]%>">
<label><%=items[i][1]%></label>
</item>
<%}%>
</list>
</content>
</page>
</imag>
上面的例子通过JSP输出iMAG页面,title和items都是来自数据库的数据。
另一种方式是通过$http.get() http://www.imagapp.com/doc/http和$http.post()方法来获取服务器端的数据,这种方式类似于Ajax。
<imag>
<script>
<![CDATA[
$page.onload = function() {
$http.get('http://www.imagapp.com/download/data/ajax_test.json', function(data) {
var obj = JSON.parse(data);
$('title').text = obj.title;
var listXml = '<list>';
for (var i = 0; i < obj.items.length; i++) {
listXml += '<item accessory="indicator" href="' + obj.items[i][0] + '">' +
'<label>' + obj.items[i][1] + '</label>' +
'</item>';
}
listXml += '</list>';
$('data_list').update(listXml);
});
}
]]>
</script>
<page>
<title>
<center><label id="title"></label></center>
</title>
<content>
<list id="data_list">
</list>
</content>
</page>
</imag>
上面的例子通过http请求方式加载数据,obj.title和obj.items都是来自远程服务器的JSON数据。JSON数据可以在云平台的模拟数据中创建。
爱码哥http://www.imagapp.com/邀你一起智造app!