Extjs4 跨域调用WCF

Javascript跨域调用的问题折腾了我好几天，主要参考了博客园大牛jillzhang的两篇博客

 

博客中没有提供工程源码下载，我把其中的代码拷下来运行，extjs部分始终取不到数据。

可能Extjs4和WCF都有了一些变化，而这两篇博客比较老，所以运行不了。

经过一些修改（主要是加了WCF配置文件的部分），终于可以运行下面这个Grid分页的例子了。

 

1. Extjs4 部分的代码

主要有2部分：一部分是html，一部分是js

html部分代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paging Grid-MHZG.NET</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

 

js部分代码，即paging.js的代码。其他js和css文件是Ext框架自带的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
Ext.require([
    'Ext.grid.*',
    'Ext.toolbar.Paging',
    'Ext.data.*'
]);
Ext.onReady(function(){
    Ext.define('MyData',{
        extend: 'Ext.data.Model',
        fields: [
            'title','author',
            //第一个字段需要指定mapping，其他字段，可以省略掉。
            {name:'hits',type: 'int'},
             'addtime'
        ]
    });
     
    //创建数据源
    var store = Ext.create('Ext.data.Store', {
        //分页大小
        pageSize: 50,
        model: 'MyData',
        //是否在服务端排序
        remoteSort: true,
        proxy: {
            type: 'jsonp',
            url: 'http://localhost:4124/Service1.svc/Paging',
             
            reader: {
                root: 'items',
                totalProperty  : 'total'
            },
            simpleSortMode: true
        },
        sorters: [{
            //排序字段。
            property: 'hits',
            //排序类型，默认为 ASC
            direction: 'DESC'
        }]
    });
     
    //创建Grid
    var grid = Ext.create('Ext.grid.Panel',{
        store: store,
        columns: [
            {text: "标题", width: 120, dataIndex: 'title', sortable: true},
            {text: "作者", flex: 200, dataIndex: 'author', sortable: false},
            {text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
            {text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
        ],
        height:400,
        width:520,
        x:20,
        y:40,
        title: 'ExtJS4 Grid 分页示例',
        disableSelection: true,
        loadMask: true,
        renderTo: 'demo',
        viewConfig: {
            id: 'gv',
            trackOver: false,
            stripeRows: false
        },
         
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据"
        })
    })
    store.loadPage(1);
})

 

其中关键部分即：

?
1
2
3
proxy: {
    type: 'jsonp',
    url: 'http://localhost:4124/Service1.svc/Paging',

type设为jsonp，则使用的Ext.data.ScriptTagProxy这个代理。

url为全路径，表示可以跨域调用。

 

2. WCF代码部分

Service1.svc

?
1
<%@ ServiceHost Language="C#" Debug="true" Service="Service1" CodeBehind="Service1.svc.cs" %>

 

Service1.svc.cs

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using System.IO;
using System.ServiceModel.Activation;
 
 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1:IService1
{
    public Stream Paging(string _dc, int start, int limit, int page, string callback)
    {
         
        StringBuilder sb = new StringBuilder();
        sb.Append("{'total':1000, 'items': [ ");
 
        for (int i = start; i < start+limit - 1; i++)
        {
            sb.Append("{ 'title': ").Append("'title").Append(i).Append("',");
            sb.Append(" 'author': ").Append("'author").Append(i).Append("',");
            sb.Append(" 'hits': ").Append(i).Append(",");
            sb.Append(" 'addtime':'2011/1/1'}, ");
        }
 
        sb.Append("{ 'title': ").Append("'title").Append(start + limit).Append("',");
        sb.Append(" 'author': ").Append("'author").Append(start + limit).Append("',");
        sb.Append(" 'hits': ").Append(start + limit).Append(",");
        sb.Append(" 'addtime':'2011/1/1'} ");
        sb.Append("] }");
 
 
        string returnStr = callback + "(" + sb.ToString() + ")";
        var ms = new MemoryStream();
        StreamWriter sw = new StreamWriter(ms);
        sw.AutoFlush = true;
        sw.Write(returnStr);
        ms.Position = 0;
        WebOperationContext.Current.OutgoingResponse.ContentType = "text/plain";
        return ms;
    }
}
 
[ServiceContract(Namespace = "")]
public interface IService1
{
    [OperationContract]
    [WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
    Stream Paging(string _dc, int start, int limit, int page, string callback);
}

 

3. WCF配置部分，即Web.config中system.serviceModel部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<system.serviceModel>
  <behaviors>
    <serviceBehaviors>
      <behavior>
        <serviceMetadata httpGetEnabled="true" httpGetUrl=""/>
        <serviceDebug includeExceptionDetailInFaults="false"/>
      </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
      <behavior name="jsonServiceBehavior">
        <enableWebScript/>
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
  <services>
    <service name="Service1">
      <endpoint binding="webHttpBinding" contract="IService1" behaviorConfiguration="jsonServiceBehavior"/>
    </service>
  </services>   
</system.serviceModel>

 

4. 运行效果

启动上面的WCF服务，根据实际的端口号修改Extjs部分的url，然后打开Extjs部分的html即可。

运行界面如下：

初始化时

image 

换页时

image

 

5. 总结

Extjs部分没有什么特别的地方，主要是WCF部分有以下几点需要注意：

  1. 对于被跨域调用的契约方法，加上[WebGet]atrribute
  2. 对于被跨域调用的实际类，加上[AspNetCompatibilityRequirements]atrribute
  3. 对于被跨域调用的服务，配置中必须使用webHttpBinding方式，basicHttpBinding不行。
  4. 对于被跨域调用的服务，配置中需要关联enableWebScript的behavior。

 

总体感觉比较麻烦，如果有好的方法，欢迎指出！！

posted @   wang_yb  阅读(2183)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛