Dojo之调用数据源（json、xml等）页面自动解析显示

　　首先是一个简单的调用json实例：

　　json数据源：data.json

{
    count: 4,
    people: [
        {
            first_name: "Joe",
            last_name: "Lennon",
            age: 25        
        },{
            first_name: "Darragh",
            last_name: "Duffy",
            age: 33
        },{
            first_name: "Jonathan",
            last_name: "Reardon",
            age: 30
        },{
            first_name: "Finian",
            last_name: "O'Connor",
            age: 23
        }
    ]
}

　　然后dojo中调用json数据源的方法：

dojo.xhrGet({
                url: "data.json",
                handleAs: "json",
                load: function(data) {
                    var table = "<table border=\"1\">";
                    table += "<tr><th>Name</th><th>Age</th></tr>";
                    dojo.forEach(data.people, function(person) {
                        table += "<tr><td>";
                        table += person.first_name+" "+person.last_name;
                        table += "</td><td>";
                        table += person.age;
                        table += "</td></tr>";
                    });
                    table += "</table>";
                    dojo.place(table, dojo.body());
                }
            });

　　上面代码调用数据后对数据进行了出来，在页面创建了一个表单，具体效果如下图：

 

 

现在我们研究结合store数据源的形式将获取的json数据自动处理显示：

首先XML形式的数据：

可以建一个xml的文件，代码如下：

<continents>
    <continent>
        <name>Africa</name>
        <population>900 million</population>
        <area>30,221,532 sq km</area>
    </continent>
    <continent>
        <name>Asia</name>
        <population>1 billion</population>
        <area>25,428,192 sq km</area>
    </continent>
    <continent>
        <name>Oceania</name>
        <population>21 million</population>
        <area>15,928,294 sq km</area>
    </continent>
    <continent>
        <name>Europe</name>
        <population>56 million</population>
        <area>25,928,294 sq km</area>
    </continent>
    <continent>
        <name>North America</name>
        <population>100 million</population>
        <area>90,928,294 sq km</area>
    </continent>
    <continent>
        <name>South America</name>
        <population>102 million</population>
        <area>78,928,294 sq km</area>
    </continent>
    <continent>
        <name>Antarctica</name>
        <population>998</population>
         <area>102,928,294 sq km</area>
    </continent>
</continents>

然后在JS中调用：

var xmlStore = new dojox.data.XmlStore({  
            url: 'data.xml',  
            label: 'name'  
        });

当然，不要忘了引用：

dojo.require('dojox.data.XmlStore');

dojo.require('dijit.form.ComboBox');

页面显示可以有两种方式去显示，第一种为table的形式：

<table jsid="grid" store="xmlStore" query="{name:'*'}" dojoType="dojox.grid.DataGrid" class="claro">
        <thead>
            <tr>
                <th field="name" width="auto">Name</th>
                <th field="population" width="auto">Population</th>
                <th field="area" width="auto">Area</th>
            </tr>
        </thead>
    </table>

第二种可以用下拉框的形式

<input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="name"></input>
<input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="area"></input>

这就完成dojo自动加载数据源的调用显示了，很方便吧；

下面看看json的，只需要改变store引用方式就行：

json文件：

{
    identifier: 'id',
     label: 'name',
    items:  [
        { "id": "AF", "name":"Africa", "type":"continent",
          "population":"900 million", "area": "30,221,532 sq km" },
        { "id": "AS", "name":"Asia", "type":"continent",
          "population":"1 billion", "area": "25,428,192 sq km" },
        { "id": "OC", "name":"Oceania", "type":"continent",
          "population":"21 million", "area": "15,928,294 sq km" },
        { "id": "EU", "name":"Europe", "type":"continent",
          "population":"56 million", "area": "25,928,294 sq km" },
        { "id": "NA", "name":"North America", "type":"continent",
          "population":"100 million", "area": "90,928,294 sq km" },
        { "id": "SA", "name":"South America", "type":"continent",
          "population":"102 million", "area": "78,928,294 sq km" },
        { "id": "AN", "name":"Antarctica", "type":"continent",
          "population":"998", "area": "102,928,294 sq km" }
]}

然后store引用  这里采用比较简单的ItemFileReadStore；（ItemFileReadStore比较适合于处理数据量较小的数据源，数据源可以是一个JSON文件或者象本例一样直接指定到客户端内存中的一组数据。当你使用更加大型的JSON数据集时，可以使用JsonRestStore，采用Rest服务来进行数据提供。下次讨论！）

//这个是引用json文件
var jsonStore = new dojo.data.ItemFileReadStore({url:"data2.json"});
//这个是引用页面中的json数据
var jsonStore2 = new dojo.data.ItemFileReadStore({data:data});

引用加上：dojo.require('dojo.data.ItemFileReadStore');

页面代码：

<table jsid="grid" store="jsonStore" query="{name:'*'}" dojoType="dojox.grid.DataGrid" class="claro">
        <thead>
            <tr>
                <th field="name" width="auto">Name</th>
                <th field="population" width="auto">Population</th>
                <th field="area" width="auto">Area</th>
            </tr>
        </thead>
    </table>

<input dojoType="dijit.form.ComboBox" store="jsonStore" searchAttr="area"></input>

对比之前的页面代码，发现了吧  其实只是改变的store的引用值而已，相当方便吧！