mvc中使用jsonp进行跨域请求详细说明
在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”的错误提示。
该提示信息说明,跨域请求是违反了“同源策略”的。
但是在开发中又难免会遇到跨域请求的需求,所以前辈们也是留下了跨域请求数据的方法jsonp跨域请求。
我们以最为典型的Jquery做例子,后台用的asp.net mvc。
我们先构造一个action的返回对象,用于返回jsonp数据
#region JsonResult
public class JsonpResult<T> : ActionResult
{
public T Obj { get; set; }
public string CallbackName { get; set; } public JsonpResult(T obj, string callback)
{
this.Obj = obj;
this.CallbackName = callback;
} public override void ExecuteResult(ControllerContext context)
{
var js = new System.Web.Script.Serialization.JavaScriptSerializer();
var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")"; context.HttpContext.Response.ContentType = "application/json";
context.HttpContext.Response.Write(jsonp);
}
} #endregion
写一个供前台调用的action ,callback参数是必须的一个参数
public ActionResult AjaxJsonp(string s, string f,string callback)
{
string result=s+'-'+f;
return new JsonpResult<object>(new { result = result }, callback);
}
然后我们在前台用Ajax跨域调用该方法(如果是在本地测试,在不同的端口号下即可)
$.ajax({
type: "GET",
url: "AjaxJsonp?callback=?",
data: { s: '',f:''},
cache: false,
error: function () {
alert("程序出错,请联系管理员.");
},
dataType: "jsonp",
jsonp: 'callback',
success: function (result) {
if (result) {
//返回对象处理
}
}
});
原理:
类似于使用js创建一个script元素,引用的地址就是我们请求的地址。
既然引用了该地址,而我们的地址输出的是:
callback(data);
这就相当于执行了一个函数:callback,并把data传入了这个函数,所以我们就拿到了data;
介绍Ajax jsonp跨域请求的参数说明
- type:请求的类型(get/post),这里需要注意的是,跨域请求只能是Get方式请求,这是因为限制于实现跨域的原理,但你会发现,将type写为post同样能执行,这是为什么呢?
在仔细查看监控的请求方式,其实还是GET方式,这就说明Jquery在内部已经做了处理,所以跨域请求只能是get请求,请求数据量是很有限的。 - url:url后面的callback=?是必须的,Jquery会将?号生成一个随机的名字,用于回调
- data:传递的参数
- cache:是否开启缓存,如果请求的数据是不变的,那么可以开启缓存提高效率
- dataType:一定是jsonp
- jsonp:callback名一般使用默认callback,可自行修改
- error:请求出错时执行
- success:请求成功回调并返回结果数据
mvc中使用jsonp进行跨域请求详细说明的更多相关文章
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- 使用jsonp进行跨域请求
使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
- 关于使用Jsonp做跨域请求
今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 利用JSONP实现跨域请求
前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- spring-security中的csrf防御机制(跨域请求伪造)
什么是csrf? csrf又称跨域请求伪造,攻击方通过伪造用户请求访问受信任站点.CSRF这种攻击方式在2000年已经被国外的安全人员提出,但在国内,直到06年才开始被关注,08年,国内外的多个大型社 ...
- jsonp原理,跨域请求头处理
一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...
- CORS和jsonp实现跨域请求
同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...
- 来说说SpringMVC + JSONP的跨域请求
先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...
随机推荐
- android 瀑布流(图片浏览)
效果图: 瀑流流实现涉及的知识点 1.ScrollView滚动视图,我们这里用的是自定义ScrollView /** * Created by Spring on 2015/11/2. * 自定义Sc ...
- MSSQL 简单练习回顾
这段时间,报了浦软培训的.NET,现在整理回顾下,算是个小小总结吧 为了便于操作,我没有在多个数据库间切换数据库实例,以一个总的数据库实例 test_demo为源进行的相关操作,代码的注释根据我的理解 ...
- 关于oracle dblink的知识。
create database link WZGLconnect to MMCSG_GX(用户名)using '(description=(address_list=(address=(host=xx ...
- access 2007 vba 开发中学到的知识(三)
打开文件或程序 'API函数声明Public Declare Function ShellExecute Lib "shell32.dll" Alias "ShellEx ...
- 解决secureCRT数据库里没有找到防火墙 '无'问题,转自:http://jingyan.baidu.com/article/9989c74601274bf649ecfe74.html
中文版的secureCRT由于汉化的问题(把null翻译成无了),导致每次打开都会有个防火墙的错误提示:数据库里没有找到防火墙 '无' 此会话将尝试不通过防火墙进行连接.出现这个错误的原因是在secu ...
- Android-第一个Android程序
Android项目的目录结构及功能 目录 功能 gen 自动生成的文件,不要修改 assets 项目中自定义的需要用到的资源,Android平台不能识别 res 工程资源,Android平台能够识别, ...
- DEDE常见的错误(转)
1:dedecms文章录入的时候,如何控制文章重复. 在dede/article_add.php里面,加入该程序就OK了 if($cfg_check_title == 'Y'){ ...
- 64位系统ADB
应该把ADB文件放在C:\Windows\SysWOW64目录下面,而不是System32下.
- 無心插柳的Linux學習者代言人——蔡德明
誰是「蔡德明」恐怕沒有多少人知道,不過提到「鳥哥」這個稱號,在臺灣的Linux社群幾乎是無人不知無人不曉,蔡德明正是鳥哥的本名.鳥哥究竟多有名? 如果你是有意學習Linux的初學者,卻不知如何下手,1 ...
- js只能输入数字
$("#SeatCount, #Charge").on("keyup", function () { if (this.value.replace(/^0|\D ...