使用vs2010+WCF发布json数据，ExtJS4.0进行调用

花了近一天的时间调试解决，希望对有相同需要的朋友有帮助：

1、新建一空网站,添加一个web页面webform1.aspx，添加ExtJs相关引用

2、添加一个启用AJAX的WCF服务Service1.svc，如下图：

3、修改web.config文件，将<enableWebScript />注释掉，换成<webHttp />，这一步很关键，

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="WcfAjaxDemo.Service1AspNetAjaxBehavior">
          
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    <services>
      <service name="WcfAjaxDemo.Service1">
        <endpoint address="" behaviorConfiguration="WcfAjaxDemo.Service1AspNetAjaxBehavior"
          binding="webHttpBinding" contract="WcfAjaxDemo.Service1" />
      </service>
    </services>
</system.serviceModel>

4、WCF中的方法前加上

[WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Json)]，这一步也很关键，如下：

[DataContract]
    public class treenode
    {
        [DataMember]
        public string id;
        [DataMember]
        public string text;
        [DataMember]
        public List<treenode> children = new List<treenode>();
        [DataMember]
        public string cls;
        [DataMember]
        public bool leaf;
    }
    [ServiceContract(Namespace = "WcfAjaxDemo")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1
    {
        // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
        // 要创建返回 XML 的操作，
        //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
        //     并在操作正文中包括以下行:
        //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Json)]
        public treenode[] GetTree()
        {
            // 在此处添加操作实现
            treenode t = new treenode();
            t.id = "noe1";
            t.text = "节点1";
            t.cls = "folder";
            treenode t0 = new treenode();
            t0.id = "noe1_0";
            t0.text = "节点1_0";
            t0.cls = "folder";
            t0.leaf = true;
            t.children.Add(t0);
            treenode t1 = new treenode();
            t1.cls = "folder";
            t1.id = "000";
            t1.text = "节点1";
            treenode t2 = new treenode();
            t2.id = "noe1_1";
            t2.text = "节点1_1";
            t2.cls = "folder";
            t2.leaf = true;
            t1.children.Add(t2);
            List<treenode> nodes = new List<treenode>();
            nodes.Add(t);
            nodes.Add(t1);
            return nodes.ToArray();
        }
        // 在此处添加更多操作并使用 [OperationContract] 标记它们
    }

在IE地址栏里输入http://localhost:18564/Service1.svc/GetTree，测试WCF是否正常，正常会提示文件下载，用记事本打开后显示如下：

[{"children":[{"children":[],"cls":"folder","id":"noe1_0","leaf":true,"text":"节点1_0"}],"cls":"folder","id":"noe1","leaf":false,"text":"节点1"},{"children":[{"children":[],"cls":"folder","id":"noe1_1","leaf":true,"text":"节点1_1"}],"cls":"folder","id":"000","leaf":false,"text":"节点1"}]

如果不正常会出现如下提示，请检查第3、4步

5、客户端使用ExtJs调用生成树TreePanel

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfAjaxDemo.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="ExtJs4.0.7/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs4.0.7/bootstrap.js" type="text/javascript"></script>
    <script type="text/jscript">
        Ext.require(['*']);

        Ext.onReady(function () {
            var store = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: 'Service1.svc/GetTree'
                },
                root: {
                    text: 'Ext JS',
                    id: 'src',
                    expanded: true
                },
                folderSort: true,
                sorters: [{
                    property: 'text',
                    direction: 'ASC'
                }]
            });

            var tree = Ext.create('Ext.tree.Panel', {
                id: 'tree',
                store: store,
                width: 250,
                height: 300,
                viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop',
                        appendOnly: true
                    }
                },
                renderTo: document.body
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

6、运行webform1.aspx如下图：