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'
,
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
|
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即可。
运行界面如下：
初始化时
换页时
5. 总结
Extjs部分没有什么特别的地方，主要是WCF部分有以下几点需要注意：
- 对于被跨域调用的契约方法，加上[WebGet]atrribute
- 对于被跨域调用的实际类，加上[AspNetCompatibilityRequirements]atrribute
- 对于被跨域调用的服务，配置中必须使用webHttpBinding方式，basicHttpBinding不行。
- 对于被跨域调用的服务，配置中需要关联enableWebScript的behavior。
总体感觉比较麻烦，如果有好的方法，欢迎指出！！
本文转自wang_yb博客园博客，原文链接：http://www.cnblogs.com/wang_yb/archive/2011/08/30/2160139.html，如需转载请自行联系原作者
1303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
