# 数据交互和序列化

与所有的js框架一样，EdoJS也拥有自己的Ajax组件：Edo.util.Ajax，用于与服务端的数据交互。

# 一个简单的Ajax例子

我们通过一个简单的Ajax例子，来了解下EdoJS的Ajax组件使用方式：

首先，服务端有一个ajax-json.txt文件，内容如下：

    [
        {name: '谷歌', en_name:'google', site: 'http://www.google.com'},
        {name: '百度', en_name:'baidu', site: 'http://www.baidu.com'},
        {name: '腾讯', en_name:'qq', site: 'http://www.qq.com'},
        {name: '易度', en_name:'edojs', site: 'http://www.edojs.com'}
    ]

然后，我们这样使用Edo.util.Ajax：

    Edo.util.Ajax.request({
        url: 'ajax-json.txt',
        type: 'get',
        onSuccess: function(text){
            //text就是从url地址获得的文本字符串
            alert(text);
        },
        onFail: function(code){
            //code是网络交互错误码,如404,500之类
            alert(code);
        }
    });

Edo.util.Ajax是一个静态类，直接调用request方法，传递一个交互配置对象，就可以与服务端完成一次数据交互操作。

# Edo.util.Ajax的配置对象

Edo.util.Ajax的配置对象注释如下：

    {
        type: "get",            //交互方式:get,post
        url: null,              //数据源地址
        params: null,           //传递参数
        async: true,            //是否异步
        timeout: 0,             //超时设置,为0不设置超时
        nocache: true,          //不缓存
        onSuccess: Edo.emptyFn, //成功回调函数
        onFail: Edo.emptyFn,    //失败回调函数
        onOut: Edo.emptyFn      //超时回调函数
    }

# 使用Ajax发送数据到服务端

我们可以发送很复杂的数据到服务端，服务端可以使用request对象来接收从页面使用ajax发送而来的数据，如果接收的数据是一个复杂的json字符串，在服务端可以使用一些Json序列化组件，将字符串转换为服务端数据对象，从而进行任意操作。

这里，我们可以使用Ajax配置对象的params属性，发送复杂数据对象：

    Edo.util.Ajax.request({
        url: 'dataService.aspx', //发送到一个动态页面地址
        type: 'post',           //使用Post方式,发送的数据可以突破255个字符限制
        params: {               //发送的数据对象,可以是一个复杂对象
            name: 'edojs',
            checked: [1,3,4],
            date: new Date()
        },
        onSuccess: function(text){
            //...
        }
    });

使用HttpWatch工具监听此次Ajax请求，截图如下：

在服务端，我们可以这样接收使用Ajax发送的数据：

    string name = Request["name"];
    string checks = Request["checked"];
    string date = Request["date"];

    //将复杂的json字符串,转换为服务端对象,从而进行任意操作
    ArrayList checklist = Edo.util.Json.decode(checks);

这里演示的是.net的后台接收Ajax数据代码，不同的服务端语言，这种代码是大同小异的。

# Json序列化和反序列化

一般我们使用Ajax时，从后台获得的是一个json字符串。我们需要将这个json字符串转换为JS对象，从而更方便的进行操作，这里我们使用Edo.util.Json组件。

接第一个示例，我们将获得的json字符串，反序列化成JS数组后，打印第2行的name属性：

    Edo.util.Ajax.request({
        url: 'ajax-json.txt',
        type: 'get',
        onSuccess: function(text){
            var obj = Edo.util.Json.decode(text);
            alert(obj[1].name);
        },
        onFail: function(code){
            //code是网络交互错误码,如404,500之类
            alert(code);
        }
    });

当然，我们也可以把从服务端获得的数组数据，设置给某一个表格，从而显示为一个表格的列表数据，如下示例代码：

    Edo.build({
        id: 'tb', type: 'table', width: 300, autoColumns: true,
        columns:[
            { headerText: '公司', dataIndex: 'en_name', editor: {type: 'text'} },
            { headerText: '网址', dataIndex: 'site' },
            { headerText: '中文名称', dataIndex: 'name', width: 150 }
        ],
        render: document.body
    });
    var ajax = Edo.util.Ajax.request({
        url: 'ajax-json.txt',
        type: 'get',
        onSuccess: function(text){
            var json = Edo.util.Json.decode(text);
            var data = new Edo.data.DataTable(json);
            tb.set('data', data);
        }
    });

效果图如下：