Ext4 JSONStore加载webservice返回的json数据【散分】

Go 旅城通票 2013-03-27 04:09:11

加精

　　前几天看到了一个童鞋遇到的问题，今天特别研究了asp.net webservice get/post请求返回json遇到的问题。

　　asp.net framework3.5 webservice增加了检查content-type，如果请求头设置了content-type:'application/json'，就会返回json字符，而不是xml。

　　首先我们要了解一下webservice返回的json结构。返回的json格式是{"d":实际的内容}，实际内容根据webservice方法返回值来确定。

1）如果是字符串字符，那么实际内容就是字符串。如果返回的是一个json格式的字符串，需要注意一下，实际内容不是json对象，具体参考：jQuery通过调用webservice返回json数据的问题

2）如果是List对象，那么实际内容就是一个数组，数组项目包含的内容依据List<T>的T来决定。
　　a）如果T不是对象，普通类型，如string，int，则实际内容为字符串或者数字数组。
　　b）如果T为类，那么实际内容为json数组，项目为json对象，属性包含类定义的公共属性，会还添加一个__type的属性，可以忽略，这个属性值的是webservice的名称和方法，如“"__type":"webservice.test+User"”

3）如果是类，那么实际内容为一个json对象，包含类定义的公共属性

　　通过上面可以知道，ext4的JSONStore要使用webservice作为数据源时，需要注意下面4点

1）webservice可以返回List<类名称>这种类型的数据，reader配置的root为d属性，并且添加proxy的headers，增加"Content-Type": 'application/json'请求头以便返回json数据。

2）需要注意的是，JSONStore默认的请求方式是get请求，而webservice返回json数据需要为post请求或者明确用UseHttpGet=true指定了，这样才能用get方法请求，要不会出现错误，参考：ajax webservice中试图使用 GET 请求调用方法，但不允许这样做

3)当配置JSONStore的proxy为post请求时，默认JSONStore会提交参数limit，page，start 3个参数，如果你的webservice方法没有定义这3个参数，会出现{"Message":"无效的 JSON 基元: page/limit/start。"错误。解决办法就是配置proxy的limitParam，pageParam，startParam为undefined不发送这3个参数.

4）当方法有其他参数时，需要手动调用JSONStore的load方法，增加params配置，不能配置autoLoad，并且不能设置JSONStore proxy的extraParams，这样会extraParams被ext处理成url格式的键值对，导致参数不正确出现{"Message":"无效的 JSON 基元: name。",具体看示例里面的说明

　　示例代码如下

Ext4 JSONStore使用webservice返回的json数据

test.asmx

using System.Web.Script.Services;

using System.Web.Services;

using System.Collections.Generic;

namespace webservice

{

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    [System.Web.Script.Services.ScriptService]

    public class test : System.Web.Services.WebService

    {

        public class User { public string Id, Name;}

        [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)]

        public List<User> Users(string name)//参数测试用

        {

            List<User> l = new List<User>();

            User u = new User(); u.Id = "1"; u.Name = "test1"; l.Add(u);

            u = new User(); u.Id = "2"; u.Name = "test2"; l.Add(u);

            u = new User(); u.Id = "3"; u.Name = "test3"; l.Add(u);

            return l;

        }

    }

}

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ext4 JSONStore使用webservice示例</title>

<link type="text/css" rel="Stylesheet" href="resources/css/ext-all.css" />

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">

    Ext.onReady(function () {

        Ext.define('Student', {

            extend: 'Ext.data.Model',

            fields: ['Id', 'Name']

        });

        var store = new Ext.data.Store({

            model: 'Student',

            //autoLoad: true,//不能配置成自动加载，如果webservice方法有参数时，需要手动调用load方法并且增加params配置

            proxy: {

                type: 'ajax',

/////////////////////////post请求非常重要，要去掉这些参数

                limitParam: undefined,

                pageParam: undefined,

                startParam: undefined,

/////////////////////

                //extraParams:{name:"name"},//有参数时不能配置extraParams，传递的这个值会被编码为name=name，而webservice方法需要的是{name:"name"}这种格式的

                //extraParams: '{name:"name"}', //这样传递也不行，被编码成“0=%7B&1=n&2=a&3=m&4=e&5=%3A&6=%22&7=n&8=a&9=m&10=e&11=%22&12=%7D”，更加离谱，字符中内容全部作为内容了，自动增加从0开始递增的键名称

                actionMethods: {

                    read: 'POST'

                },

                headers: { "Content-Type": 'application/json' },//webservice返回JSON必备

                url: 'test.asmx/Users',

                reader: {

                    root: 'd',

                    idProperty: 'Id'

                }

            }

        });

//如果webservice没有参数，可以不用手动调用load方法，直接配置为autoLoad

        store.load({params:'{name:"name"}'})//在load中设置webservice需要的参数，为json格式的字符串，这样不会被编码

        var gridPanel1 = Ext.create('Ext.grid.Panel', {

            title: '学生信息表',

            store: store,

            width: 500,

            renderTo: document.body,

            id: 'panel',

            columnLines: true,

            columns: [{

                xtype: 'rownumberer', width: 20

            }, {

                text: '学号',

                dataIndex: 'Id', flex: 1,

                editor: {

                    xtype: 'textfield'

                }

            }, {

                text: '姓名',

                dataIndex: 'Name', flex: 1,

                editor: {

                    xtype: 'textfield'

                }

            }]

        });

    });

</script>

</head>

<body></body>

</html>