Jsonp简单认识(后端使用的是asp.net mvc)
一、Jsonp简介：由于浏览器基于安全有同源策略(同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)机制，所以前端无法使用Ajax来获取来获取其他域名下返回的数据，而Jsonp可以实现跨域访问。
Jsonp是基于<script>标签不受同源策略限制，可以加载任意地方的JavaScript文件来实现的。Jsonp实现理念就是，和服务端约定好一个函数名，当请求文件时，服务端返回一段JavaScript。这段JavaScript调用了约定好的函数，并且将数据当做参数传入。
二、简单Demo
1、在visual studio新建项目JsonpDemo和项目OtherDomain，项目结构如下
2、在JsonpDemo项目中新增HomeController及其视图，视图中代码如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<input type="button" id="getJsonpByHand" value="get jsonp by hand" />
</div>
<script type="text/javascript" >
$("#getJsonpByHand").click(function () {
//55157位OtherDomain项目启动后网站的端口
CreateScript("http://localhost:55157/home/somejsonp?");
})
function CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")
}
//myCallBack就是与后端约定好的函数
function myCallBack(data) {
console.log(data);
}
</script>
</body>
</html>
3、在OtherDomain项目中新增HomeController及其视图，HomeController中代码如下：
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace OtherDomain.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
} public ActionResult SomeJsonp()
{
return new ContentResult()
{
//myCallBack为服务端与前端约定好的函数
Content = "myCallBack(" + JsonConvert.SerializeObject(new { Name = "Tom", Age = }) + ")",
ContentType = "text/html"
};
} }
}
4、启动两个项目，点击JsonpDemo项目页面中的按钮，谷歌浏览器控制台下看到
三、对上面Demo做一下简单优化，可以通过前端来指定与服务器约定的函数
1、修改JsonpDemo项目index.cshtml页面中，按钮点击事件下CreateScript方法传入参数为：http://localhost:55157/home/somejsonp?callback=myCallBack 也就是加上一个URL参数
2、修改OtherDomain项目下HomeController.cs中SomeJsonp方法如下：
public ActionResult SomeJsonp()
{
string func = Request.Params["callback"];
return new ContentResult()
{
Content = func+"(" + JsonConvert.SerializeObject(new { Name = "Tom", Age = }) + ")",
ContentType = "text/html"
};
}
四、通过jQuery使用Jsonp实现跨域请求
1、继续沿用上面两个项目，修改JsonpDemo项目index.cshtml页面代码，新增一个按钮，并实现其click事件相关代码，如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<div>
<input type="button" id="getJsonpByHand" value="get jsonp by hand" />
<input type="button" id="getJsonpByJquery" value="get jsonp by jquery" />
</div>
<script type="text/javascript" >
$("#getJsonpByHand").click(function () {
CreateScript("http://localhost:55157/home/somejsonp?callback=myCallBack");
})
function CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")
}
$("#getJsonpByJquery").click(function () {
$.ajax({
// url: 'http://localhost:55157/home/somejsonp?callback=myCallBack',
url: 'http://localhost:55157/home/somejsonp',
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
console.log(data)
var a=123;
var b=2;
var c=35;
}
})
})
//function myCallBack(data) {
// console.log(data);
//}
</script>
</body>
</html>
注意上面ajax参数dataType为jsonp，jsonp为callback
2、OtherDomain下HomeController.cs文件SomeJsonp代码和第三个里面代码一样，如下：
public ActionResult SomeJsonp()
{
string func = Request.Params["callback"];
return new ContentResult()
{
Content = func + "(" + JsonConvert.SerializeObject(new { Name = "Tom", Age = }) + ")",
ContentType = "text/html"
};
}
3、运行两个项目，点击“get jsonp by jquery”按钮，可以在谷歌浏览器控制台下看到同样结果
4、注意：如果前端代码传入callback参数，那么前端也要自己实现相应参数的函数。如果没有传入，其实jQuery自己会默认传入并自己实现。
五、扩展：在OtherDomain项目下，简单自定义JsonpResult类，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace OtherDomain
{
public class JsonpResult : JsonResult
{
private const string CALLBACK_QUERYSTRING = "callback";
//private const string CALLBACK_CONTENTTYPE = "application/x-javascript";
private const string CALLBACK_CONTENTTYPE = "text/javascript"; public override void ExecuteResult(ControllerContext controllerContext)
{
if (controllerContext != null)
{
var request = controllerContext.HttpContext.Request;
object callback = request[CALLBACK_QUERYSTRING];
if (callback == null)
{
controllerContext.RouteData.Values.TryGetValue(CALLBACK_QUERYSTRING, out callback);
} var hasCallback = !string.IsNullOrWhiteSpace(callback == null ? "" : callback as string);
if (hasCallback)
{
SetContentTypeIfEmpty();
var response = controllerContext.HttpContext.Response;
response.Write(callback);
response.Write("(");
base.ExecuteResult(controllerContext);
response.Write(")");
}
else
{
base.ExecuteResult(controllerContext);
}
}
} private void SetContentTypeIfEmpty()
{
if (string.IsNullOrWhiteSpace(base.ContentType))
{
base.ContentType = CALLBACK_CONTENTTYPE;
}
}
} public static class ContollerExtensions
{
public static JsonpResult Jsonp(this Controller controller, object data, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
{
JsonpResult result = new JsonpResult();
result.Data = data;
result.JsonRequestBehavior = behavior;
return result;
}
}
}
JsonpResult及ContollerExtensions
如果想要很好的结合到controller中，需要写如上ContollerExtensions的Controller的扩展方法
在OtherDomain项目下，需要修改SomeJsonp方法：
public ActionResult SomeJsonp()
{
return this.Jsonp(new
{
Name= "Tom",
Age=
}, JsonRequestBehavior.AllowGet);
}
Jsonp简单认识(后端使用的是asp.net mvc)的更多相关文章
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)”
项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可 ...
- ASP.NET MVC防范CSRF最佳实践
XSS与CSRF 哈哈,有点标题党,但我保证这篇文章跟别的不太一样. 我认为,网站安全的基础有三块: 防范中间人攻击 防范XSS 防范CSRF 注意,我讲的是基础,如果更高级点的话可以考虑防范机器人刷 ...
- Asp.net Mvc模块化开发之分区扩展框架
对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发真的支持很好吗?真的有很多复杂系统在使用默认的分区开发的吗?我相信大部分asp.net的技术团 ...
- Asp.net Mvc模块化开发系列(目录)
模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...
- 7 天玩转 ASP.NET MVC — 第 1 天
0. 前言正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET M ...
- ASP.NET MVC学习之模型绑定（1）
一.前言 下面我们将开始学习模型绑定,通过下面的知识我们将能够理解ASP.NET MVC模型的模型绑定器是如何将http请求中的数据转换成模型的,其中我们重点讲述的是表单数据. 二.正文 1.简单类型 ...
- 7 天玩转 ASP.NET MVC - 第 1 天
0. 前言 正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET ...
- AngularJS html5Mode与ASP.NET MVC路由共存
前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门做一个OA系统(想省下几万大洋的费用),第一时间便想到AngularJS ...
随机推荐
- 0.1 hint crack
http://files.cnblogs.com/files/crac/27.rar
- C#+OpenGL编程之再见小桃子(The Tao Framework)
本文基础: C#+OpenGL编程之OpenGL 纹理载入 C#+OpenGL编程之OpenGL 多重纹理 小桃子The Tao FrameworkTao提供的所有库都是完全开源的.其中的多数库都可以 ...
- nginx缓存模块配置总结proxy_cache（未完）
简介:此缓存设置用到了第三方模块purge,使用的时候就在源链接和访问的具体内容之间加入关键字"/purge/"即可. 如:访问http://192.168.0.1/a.png 会 ...
- 关于错误提示：此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决方案
vs上的一个项目,弄了一个aes加密算法.提示说:调用的目标异常.此实现不是 Windows 平台 FIPS 验证的加密算法的一部分.弄了好久一直不行.解决不了.最后找了半天资料终于解决了.估计下来. ...
- Word 文档插入时间日期禁止自动更新
前些天写了点总结并插入时间和日期,记得勾掉了那个自动更新的,但是刚才打开时发现当时的日期和时间变成现在的了,我就纳闷了,然后我去看那插入日期和时间的那个框,里面确实没有勾选自动更新,于是百度, 百度都 ...
- Win7 Qt4.8.5+QtCreator2.8.0+mingw配置过程
1:安装包 百度盘下载链接: Mingw: :安装步骤 1.首先安装qt creator,双击qt-creator-windows-opensource-2.8.0,注意安装目录不要有空格和特殊字符, ...
- 20135220谈愈敏Linux Book_3
第3章 进程管理 进程是Unix操作系统抽象概念中最基本的一种,进程管理是操作系统的心脏所在. 3.1 进程 进程:处于执行期的程序以及相关的资源的总称. 线程:在进程中活动的对象,拥有独立的程序计数 ...
- Linux（9.21-9.27）学习笔记
一.Vim的基本操作. Normal模式下 1.h 键 向左移动光标 2. j 键 向下移动光标 3. k 键 向上移动光标 4. l键 向右移动光标 5.x 键 删除光标所在位置的 ...
- 信息安全系统设计基础第一次实验报告 20135201&&20135306&&20135307
信息安全系统设计基础实验 班级: 201353 姓名:张忻 张嘉琪 黄韧 学号:20135301 20135307 20135306 实验日期:2015.11.10 实验名称: S3C2410的lin ...
- ASP.NET MVC 5 入门教程 (1) 新建项目
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-create-project.html 下一节:ASP.NET ...