訪問後臺數據庫有多6，看看這裏便知

相信使用愛碼哥的小夥伴們對原生控件已經很熟悉了，在app開發中，原生控件能夠幫助開發人員完成一個個精美的頁面，給app奠定一個好的基礎。然而，完成這些美觀的靜態頁面只是開發app的開始，頁面的交互和調用程度、用戶體驗和流暢的性能纔是app的重中之重。這些與腳本功能息息相關，比如界面數據都是來自數據庫的動態數據，用戶輸入的數據能夠以同步和異步的方式入庫，這些都需要JavaScript腳本來完成。

下面我們一起學習iMAG客戶端訪問後臺數據庫的兩種方式。

通過後臺程序讀取數據庫數據，再用JSP（需要部署Java本地開發環境），ASP（需要部署.Net本地開發環境）等腳本輸出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.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數據可以在雲平臺的模擬數據中創建。

愛碼哥邀你一起智造app！