Extjs4 跨域調用WCF
Javascript跨域調用的問題折騰了我好幾天，主要參考了博客園大牛jillzhang的兩篇博客
博客中沒有提供工程源碼下載，我把其中的代碼拷下來運行，extjs部分始終取不到數據。
可能Extjs4和WCF都有了一些變化，而這兩篇博客比較老，所以運行不了。
經過一些修改（主要是加了WCF配置文件的部分），終于可以運行下面這個Grid分頁的例子了。
1. Extjs4 部分的代碼
主要有2部分：一部分是html，一部分是js
html部分代碼
<!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框架自帶的。
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);
})
其中關鍵部分即：
proxy: {
type: 'jsonp',
url: 'http://localhost:4124/Service1.svc/Paging',
type設為jsonp，則使用的Ext.data.ScriptTagProxy這個代理。
url為全路徑，表示可以跨域調用。
2. WCF代碼部分
Service1.svc
<%@ ServiceHost Language="C#" Debug="true" Service="Service1" CodeBehind="Service1.svc.cs" %>
Service1.svc.cs
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部分
<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。
總體感覺比較麻煩，如果有好的方法，歡迎指出！！
浙公網安備 33010602011771號