sencha touch结合webservice读取jsonp数据详解

sencha touch读取jsonp数据主要依靠Ext.data.JsonP组件，在mvc的store文件中定义代码如下：

Ext.define('eparkapp.store.ParksNearby',{
    extend:'Ext.data.Store',
    requires: ['Ext.data.JsonP'],
    config:{
        model: 'eparkapp.model.Park',
        autoLoad: true,
        proxy: {
            type: 'jsonp',
            url: 'http://192.168.1.103/androidserv/PublicAppServ.asmx/ListNearInfo',
            reader:{
                type: 'json',
                rootProperty: 'data'
            },
            extraParams: {
                userId: 'll',
                lng: '123',
                lat: '39',
                key: 'abc123'
            },
            callbackKey: 'callback'
        },
        sorters: [{ property: 'Range', direction: 'ASC'}]
    }
});

其中重要的是url的写法，.asmx后增加webservice的方法名，传给webservice的参数使用extraParams配置项。另外callbackKey一定要加上，值可设置为默认的callback。

webservice的写法

using System;
using System.Configuration;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Web.Script.Services;

namespace MobileServ
{
    /// <summary>
    /// PublicAppServ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
    [System.Web.Script.Services.ScriptService]
    public class PublicAppServ : System.Web.Services.WebService
    {

        #region 服务

        [WebMethod(Description = "获得测试数据的列表")]
        public void ListNearInfo(string userId, string lng, string lat, string key)
        {
            HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
            string jsonCallBackFunName = "callback";
            if (HttpContext.Current.Request.Params["callback"]!=null)
                jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();
            string result = string.Empty;
            if (key == ConfigurationManager.AppSettings["WSKey"])
            {
                List<ParkInfo> lisPark = GetData();
                result = "{success: true,data:[";
                for (int i = ; i < lisPark.Count; i++)
                {
                    result += "{";
                    result += "Name:'" + lisPark[i].Name + "'";
                    result += ",Address:'" + lisPark[i].Address + "'";
                    result += ",Range:" + lisPark[i].Range;
                    result += ",Price:" + lisPark[i].Price;
                    result += ",Count:" + lisPark[i].Count.ToString();
                    result += "}";
                    if (i < lisPark.Count - )
                        result += ",";
                }
                result += "]}";
            }
            HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, new JavaScriptSerializer().Serialize(result)));

        }

        private List<ParkInfo> GetData()
        {
            List<ParkInfo> lisPark = new List<ParkInfo>();
            ParkInfo pinfo1 = new ParkInfo();
            pinfo1.Name = "测试路1";
            pinfo1.Address = "测试地址1";
            pinfo1.Range = "2.5";
            pinfo1.Price = "";
            pinfo1.Count = "";
            lisPark.Add(pinfo1);
            ParkInfo pinfo2 = new ParkInfo();
            pinfo2.Name = "测试路2";
            pinfo2.Address = "测试地址2";
            pinfo2.Range = "3.2";
            pinfo2.Price = "";
            pinfo2.Count = "";
            lisPark.Add(pinfo2);
            ParkInfo pinfo3 = new ParkInfo();
            pinfo3.Name = "测试路3";
            pinfo3.Address = "测试地址3";
            pinfo3.Range = "3.2";
            pinfo3.Price = "";
            pinfo3.Count = "";
            lisPark.Add(pinfo3);
            return lisPark;
        }

        #endregion 服务
    }
}

需要注意的是，webservice通过HttpContext.Current.Request.Params["callback"]来读取sencha touch从客户端发来的跨域请求的回调函数名callback。再把这个函数名加入到返回的json之前。实现客户端的跨域读取。

webservice的web.config配置节system.web下一定要加上如下配置项，否则sencha touch无法读取webservice的数据。

<webServices>
      <protocols>
        <add name="HttpPost"/>
        <add name="HttpGet"/>
      </protocols>
    </webServices>

一切配置完成后，数据就能在view中展现出来。