MVC 定义JsonpResult实现跨域请求

MVC 定义JsonpResult实现跨域请求

1:原理

在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求。具体是定义一个函数,例如jsonp1234,请求不同域的url时带上函数名,例如:http://otherdomain.com/index?callback=jsonp1234,然后服务端根据callback获取这个函数名,然后传入json字符串作为函数参数。

2:实现

http://localhost:62203/home/index页面代码如下

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script>
    function showMessage(result) {
        alert(result.name)
    }
    </script>
    <script src="http://localhost:16308/home/index?callback=showMessage" type="text/javascript"></script>
</head>
<body>
    <div>
    </div>
</body>
</html>

主要是这句

<script src="http://localhost:16308/home/index?callback=showMessage" type="text/javascript"></script>,

可以看到,访问的是不同的站点,并且callback的参数值为showMessage,

http://localhost:16308/home/index代码如下

public ActionResult Index()
        {
            string callback = this.Request["callback"];
            string json="{\"name\":\"server\"}";
            this.Response.Write(callback + "(" + json + ")");
            return new EmptyResult();
        }

根据callback获取函数名,然后将json字符串作为函数参数。

访问页面http://localhost:62203/home/index,效果如下

可见,站点localhost:62203从站点localhost:16308获取到了数据。

但是我们看服务端的实现,这也太不美观,也比较麻烦。

public ActionResult Index()
        {
            string callback = this.Request["callback"];
            string json="{\"name\":\"server\"}";
            this.Response.Write(callback + "(" + json + ")");
            return new EmptyResult();
        }

我们想要的是调用一个方法,就能实现跨域了,那如何实现呢。看到Controller有个this.Json方法,类型是JsonResult,我们可以参考这个类。定义一个类JsonpResult,派生于JsonResult,在ExecuteResult方法根据callback获取函数名,然后传入json字符串作为函数参数。

public class JsonpResult : JsonResult
    {
        public static readonly string JsonpCallbackName = "callback";
        public static readonly string CallbackApplicationType = "application/json";

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }
            if ((JsonRequestBehavior == JsonRequestBehavior.DenyGet) &&
                  String.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))
            {
                throw new InvalidOperationException();
            }
            var response = context.HttpContext.Response;
            if (!String.IsNullOrEmpty(ContentType))
                response.ContentType = ContentType;
            else
                response.ContentType = CallbackApplicationType;
            if (ContentEncoding != null)
                response.ContentEncoding = this.ContentEncoding;
            if (Data != null)
            {
                String buffer;
                var request = context.HttpContext.Request;
                var serializer = new JavaScriptSerializer();
                if (request[JsonpCallbackName] != null)
                    buffer = String.Format("{0}({1})", request[JsonpCallbackName], serializer.Serialize(Data));//首先根据callback获取获取函数名,然后传入json字符串作为函数参数
                else
                    buffer = serializer.Serialize(Data);
                response.Write(buffer);
            }
        }
    }

JsonpResult类有了,但是想在Controller这样使用this.Jsonp,所以为Controller类定义一个扩展方法,

public static class ControllerExtension
    {
        public static JsonpResult Jsonp(this Controller controller, object data)
        {
            JsonpResult result = new JsonpResult()
            {
                Data = data,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
            return result;
        }
    }

这是在Controller就可以直接使用this.Jsonp了,把跨域服务端的代码改下

public ActionResult Index()
        {
            return this.Jsonp(new { name = "server JsonpResult" });
        }

相比上面那个简洁多了

再次打开http://localhost:62203/home/index

同样,站点localhost:62203从站点localhost:16308获取到了数据,和上面的一样

时间: 2024-10-11 13:30:03

MVC 定义JsonpResult实现跨域请求的相关文章

MVC 定义JsonpResult实现跨域请求(转)

1:原理 在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求.具体是定义一个函数,例如jsonp1234,请求不同域的url时带上函数名,例如:http://otherdomain.com/index?callback=jsonp1234,然后服务端根据callback获取这个函数名,然后传入json字符串作为函数参数. 2:实现 http://localhost:62203/home/index页面代码如下 @{ L

ASP.NET MVC 定义JsonpResult实现跨域请求

1:原理 在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求.具体是定义一个函数,例如jsonp1234,请求不同域的url时带上函数名,例如:http://otherdomain.com/index?callback=jsonp1234,然后服务端根据callback获取这个函数名,然后传入json字符串作为函数参数. 2:实现 http://localhost:62203/home/index页面代码如下 @{ L

ASP.NET MVC 实现AJAX跨域请求的两种方法

通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: JQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函

ASP.NET MVC 实现AJAX跨域请求方法《1》

ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.Net MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: jQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为"j

ASP.NET MVC 实现 AJAX 跨域请求

ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求

mvc中使用jsonp进行跨域请求详细说明

在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”的错误提示.该提示信息说明,跨域请求是违反了“同源策略”的.但是在开发中又难免会遇到跨域请求的需求,所以前辈们也是留下了跨域请求数据的方法jsonp跨域请求. 我们以最为典型的Jquery做例子,后台用的asp.net mvc.我们先构造一个action的返回对象,用于返回json

jQuery中Ajax+Spring MVC实现跨域请求

项目开发中,某个可独立.也可集成的子业务模块须要向外开放相关API接口,先说下项目本身使用了jersery来实现RESTful webservice以名词形式公布API.有意思的是在实际的操作中同事却通过Ajax跨域请求的方式去调用该API,先不说成功与否,这样的方式本就是"滑稽"的.和他一起探讨了此种做法的不合理性,之后选择jersey client的方式进行远程调用.只是他在跨域请求中遇到了问题,自己闲暇时间予以解决,这才是此篇文章的由来. jQuery对跨域请求有两种解决方式各自

Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域

JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback)),然后以JavaScript语 法的方式,生成一个function 2.接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端. 3.最后客户端浏览器动态的解析script标签,

Ajax+Spring MVC实现跨域请求(JSONP)

JSONP解释 在解释JSONP之前,我们需要了解下"同源策略"这个概念,这对理解跨域有帮助.基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性.有点绕,说的简单点就是浏览器限制脚本只能和同协议.同域名.同端口的脚本进行交互. JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议.他允许服务端生成script tags返回值客户端,通过javascript call