ExtJs与WCF之间的跨域访问

中国IT实验室搜集整理

未知

2008-7-18

保存本文

推荐给好友

收藏本页

欢迎进入.NET社区论坛，与200万技术人员互动交流 >>进入

第三步：在项目中创建一个新的js脚本文件：PageGridCrossDomainWithRow.js

         /*
         * Ext JS Library 2.1
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
         Ext.onReady(function(){
           var proxy = new Ext.data.ScriptTagProxy({
             url:'http://127.0.0.1:50643/PageGridService.svc/GetProductsByPageCorssDomain'
           });
           var reader = new Ext.data.JsonReader(
             {root:'Data',totalProperty :'TotolRecord'},
             [
               {name: 'ProductID'},
               {name: 'Name'},
               {name: 'ProductNumber'},
               {name: 'MakeFlag'},
               {name: 'FinishedGoodsFlag'},
               {name: 'Color'},
               {name: 'SafetyStockLevel'},
               {name: 'ReorderPoint'},
               {name: 'StandardCost'},
               {name: 'ListPrice'},
               {name: 'Size'},
               {name: 'SizeUnitMeasureCode'},
               {name: 'Weight'},
               {name: 'DaysToManufacture'},
               {name: 'ProductLine'},
               {name: 'Class'},
               {name: 'Style'},
               {name: 'Weight'},
               {name: 'ProductSubcategoryID'},
               {name: 'ProductModelID'},
               {name: 'SellStartDate'},
               {name: 'SellEndDate'},
               {name: 'DiscontinuedDate'},
               {name: 'rowguid'},
               {name: 'ModifiedDate'}
             ]
           );
           var store = new Ext.data.Store(
             {proxy:proxy,reader:reader}
           );
           // create the Grid
            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: [
                    {id:'ProductID',header: "编号",width:30, sortable: true, dataIndex: 'ProductID'},
                    {header: "名称", width:75, sortable: true, dataIndex: 'Name'},
                    {header: "产品编码", width:75, sortable: true, dataIndex: 'ProductNumber'},
                    {header: "是否标记", width:75, sortable: true, dataIndex: 'MakeFlag'},
                    {header: "颜色", width:50, sortable: true,dataIndex:'Color'},
                    {header: "数量", width:50, sortable: true,dataIndex:'ReorderPoint'},
                    {header: "单价", width:50, sortable: true,renderer:'userMoney',dataIndex: 'StandardCost'}
                ],
                stripeRows: true,
                autoExpandColumn: 'ProductID',
                height:400,
                width:600,
                title:'产品信息',
                viewConfig:
                {
                  columnsText:'列',
                  sortAscText:'升序',
                  sortDescText:'降序'
                },
                bbar: new Ext.PagingToolbar({
                    pageSize: 25,
                    store: store,
                    displayInfo: true,
                    displayMsg: '总记录数 {0} - {1} of {2}',
                    emptyMsg: "没有记录"
                })
            });
            grid.render('page-grid');
            //载入
            store.load({params:{start:0,limit:25}});
            grid.getSelectionModel().selectFirstRow();
         });

接下来，浏览PageGridCorssDomainWithRow.htm，便可以得到如下运行结果：

两种方案对比：

　　第一种方案要通过服务端WebClient访问WCF服务，然后由ExtJs访问本地代理页面，这样势必造成一些性能损失。而本文的方式，无须架设服务端代理，由ExtJs直接请求WCF，从操作复杂度上，要低一下，理论上也能因此提高一些性能从实现原理上，第一种方式有些背离ExtJs的设计初衷，ExtJS强调用ScriptTagProxy跨域访问数据，但这样对数据格式有一定要求，第一种方案采用绕过拦路虎的方式，通过一个中转将跨域问题化解掉了，虽然效果达到，但毕竟没有充分利用到ExtJs的ScriptTagProxy，而且违背了WCF中的Restful访问方式。
　
　　上面两点都是说明第一种方案的缺点，本文方案的优点，但在现实中，考虑到可用性，还是建议用第一种方式的。本文这种方式虽然有一定优点，却大大破坏了WCF程序结构，使得WCF服务程序开发难度加大，且以后难于维护，因为一个服务，他的使命不光光针对ExtJs一方的调用，他的消费者可能很多，消费方式也不仅仅局限在Restful上，更多需求可能体现在SOAP方式上，他消费者所在平台也可能是linux，这样事情就变的复杂起来，一个返回stream的操作具有普遍性么？对于其他消费者，stream友好么？而且设置了ContentType是不是对其他消费者有致命影响呢？这些问题都是要考虑的，如果是一个面向大众的服务，考虑到上面的问题，纵是有千万种理由，这种方案还是不可取的。相比较一点点的性能，更有些得不偿失！当然具体情况要具体分析，如果是专门为ExtJs或者其他Ajax设计的，那本文方案就比较合理了。

上一页 [1] [2]

【责编:michael】