ExtJs与WCF之间的跨域访问

在上一篇文章<<ExtJs+WCF+LINQ实现分页Grid>>中用ExtJs与Wcf交互实现了分页Grid,回复中心有灵犀同学希望能采用跨域访问的方式,这个问题其实也困扰了我很久,本来ExtJS用ScriptTagProxy支持跨域访问的,如果服务端是.aspx的页面文件,也非常好实现,但换作WCF,问题就复杂起来。本文尝试解决这个问题,方案不是很巧妙,但是我对多种方案实验中第一个且是唯一有效的办法。

首先看一下如何用ExtJs中的ScriptTagProxy跨域访问服务器.aspx页面,不是重点,但与为何此种方法不适用WCF相关,所以也赘述下,项目是上文中的项目,下面是实现步骤:

第一步:还是向网站中添加Service.aspx页面,然后将其代码更改如下:

Service.aspx代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace ExtJs_Wcf_Linq_PageGrid
{
public partial class Service : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int start = Convert.ToInt32(Request.QueryString["start"]);
int limit = Convert.ToInt32(Request.QueryString["limit"]);
string callback = Request.QueryString["callback"];
ProductsDataContext productDbContext = new ProductsDataContext();
IQueryable<Product> res = productDbContext.Product.Select(product => product);
PageData<Product[]> returnData = new PageData<Product[]>();
returnData.TotolRecord = res.ToArray<Product>().Length;
res = res.Skip<Product>(start);
res = res.Take<Product>(limit);
returnData.Data = res.ToArray<Product>();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(PageData<Product[]>));

using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
{
serializer.WriteObject(ms, returnData);
ms.Position = 0;
System.IO.StreamReader sr = new System.IO.StreamReader(ms);
Response.Write(callback+"("+sr.ReadToEnd()+")");
}
}
}
}

第二步:创建一个htm页面PageGridCrossDomain.htm,然后将其代码更改为:

PageGridCrossDomain.htm
<!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>
<title>ExtJs+WCF+LINQ打造分页Grid</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base.js" charset="gb2312"></script>

<script type="text/javascript" src="ext-all-debug.js" charset="gb2312"></script>

<link rel="stylesheet" type="text/css" href="shared/examples.css" />

<script type="text/javascript" src="shared/examples.js" charset="gb2312"></script>

<script src="ScriptTagReader.js" type="text/javascript"></script>

<script type="text/javascript" src="PageCrossDomain.js" charset="gb2312"></script>

</head>
<body>
<h1>
ExtJs+WCF+LINQ打造分页跨域Grid</h1>
<div id="page-grid">
</div>
</body>
</html>

时间: 2016-12-05

ExtJs与WCF之间的跨域访问的相关文章

再说ExtJs与WCF之间的跨域访问

在前面文章ExtJs与WCF之间的跨域访问已经通过服务端代理的方式解决了 ExtJs与WCF跨域访问的问题,那个方案看起来并不怎么优雅,而当我在写过用 Restful方式调用WCF进行上传下载后,愕然发现原来WCF支持原生数据(Raw)的返 回,这就解决了ExtJs与Wcf之间进行跨域调用中的难题:返回数据必须满足 <script>格式.下面根据ExtJs与WCF之间的跨域访问中实现的项目,通过 Stream和ContentType的联合使用,返回原生数据给Extjs,从而实现跨域调用. 第一

Jquery Ajax访问WCF服务和跨域访问WCF

 代码如下 复制代码 using jquery ajax call wcf service get/post/put/delete http://www.codeproject.com/Articles/254714/Implement-CRUD-operations-using-RESTful-WCF-Servic Using POST Method Retrieve a representation of the addressed member of the collection, in

如何在ASP.NET MVC 3 中利用Jsonp跨域访问

在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就是OAuth.新浪微博这个开放系统做的就很好.但OAuth并非本文讨论范畴.这里主要讨论jQuery1.5 jsonp 在Asp.net MVC3 中的应用. 本文应用场景: 假设您的开发团队欲为某集团公司开发一整套信息管理系统,目前首要开发的就是一套订单系统和一套内部OA系统.前提是这两套系统使用

在liferay中用serveResource解决跨域访问问题

简介: 众所周知,跨域问题是十分常见的需求,比如让客户端的ext-js控件可以渲染来自服务器端的json对象.我们可以用很多很多方法来解决,比如jsonP.但是,在liferay中,我们可以用serveResource方法来优雅的解决跨域访问问题. 白板分析: 以下是摘自我在技术讨论会上的白板: 解决方法: 首先编写一段serveResource方法,让其和远端的json对象打交道,它作为中间层可以封装来在远程的json资源,然后提供给本域内的ext-js代码来渲染. 当然了,这里我们的资源必须

Javascript跨域访问解决方案

由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢? 这里分两类情况: 一.基于同一父域的子域之间页面的访问 参见如下3个domain域: 1.taobao.com 2.jipiao.taobao.com 3.promotion.taobao.com 它们有相同的父域 taobao.com 二.基于不同父域页面之间的访问 参见如下3个domain域: 1.taobao.com 2.baidu.com 3.sina.com

Ajax实现跨域访问的三种方法

本文给大家介绍了ajax实现跨域访问的3种解决方案,非常的实用,个人比较推荐第三种,小伙伴们可以着重看下.     一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的"域". * 不同的域

Ajax实现跨域访问的三种方法_AJAX相关

一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)                www  (子域名)              google (主域名)                8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的"域". * 不同的域之间相互请求资源,就叫&

深入浅析同源策略和跨域访问_javascript技巧

1. 什么是同源策略      理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.     何谓同源:         URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.    同源策略:         浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1])         从一个域上加载的脚本不允许访

Javascript 跨域访问解决方案_javascript技巧

这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox