一、认识Jsonp

  JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法,以活动为中心,一连串的活动的顺序组合成一个完整的工作进程。

  之所以会有跨域这个问题的产生根本原因是浏览器的同源策略限制,理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

  解决这个限制的一个相对简单的办法就是在服务器端发送请求,服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。

  另一个办法就是使用框架(frames),将第三方站点的资源包含进来,但是包含进来的资源同样要受到同源策略的限制。

  有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候,同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败,幸运的是,我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

二、Jsonp工作原理

  jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌. 
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,
我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数

三、注意点

  首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

四、不分代码展示

  这是我自己新建的俩个mvc项目,端口号分别是2415和100,在2415View通过jsonp去请求100下的Controller:

 public ActionResult Jsonp(string Ecom_User_ID, string Ecom_Password)
{
//string callback = Request.Params["jsoncallback"].ToString();
//return Json(new { status = "admin" });
string success = "success";
string jsoncallback = Request.QueryString["jsoncallback"];
if (string.IsNullOrEmpty(jsoncallback))
{
success = "fail";
return Json(success, JsonRequestBehavior.AllowGet);
}
// return Json(new { jsoncallback = data });
return Content(string.Format("{0}({1})", jsoncallback, success.ToString().ToJson()), "text/plain", System.Text.Encoding.UTF8);
} public static class JsonHelper
{
public static string ToJson(this object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
} public static string ToJson(this object obj, int count)
{
string template = "\"total\":{0},\"rows\":{1}";
if (count == )
{
return "{" + string.Format(template, , "[]") + "}";
}
else
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return "{" + string.Format(template, count, serializer.Serialize(obj)) + "}";
}
}
}
 <script type="text/javascript">
$(function () {
var userName = "admin";
var password = "zyxx..000";
var mydata = { Ecom_User_ID: userName, Ecom_Password: password };
$.ajax({
async: true,
url: 'http://localhost:100/Account/Jsonp', // 跨域URL
type: 'get',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
data: mydata, //{ data: "abc" },
timeout: 5000,
beforeSend: function () {
},
success: function (json) {
if (json == "success") {
window.location.href = "http://www.baidu.com";
}
alert(json); },
complete: function (XMLHttpRequest, textStatus) {
// $.unblockUI({ fadeOut: 10 });
},
error: function (xhr) {
//jsonp 方式此方法不被触发
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
})
</script>

  

 

MVC+Jsonp实现跨域交互的更多相关文章

  1. js跨域交互之jsonp - 看完就能让你了解jsonp原理 (原)

    跨域? 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 同源策略? 一般来说 a.com 的网页无法直接与 b.com的服务器沟通, 浏览器的同源策略限制从一个源加载的文档或脚本 ...

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

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  3. 转(JSONP处理跨域事件)

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  4. jsonp实现跨域访问

    要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...

  5. JSONP解决跨域问题,什么是JSONP(转)

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  6. jsonp 实现跨域

    为什么会出现跨域问题 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面 ...

  7. ASP.NET MVC中设置跨域

    ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我 ...

  8. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  9. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

随机推荐

  1. 第六课——UIDynamicAnimator

    今天我们要学习UIDynamicAnimator 仿真物理学 . UIKit 力学(Dynamics) 和动态效果(Motion Effects) . 创建力学基本流程: 创建运动管理 创建运动行为( ...

  2. css布局多列等高

    css .content{margin:0 auto;width: 600px;border: 3px solid #00c;overflow: hidden;} .left{float: left; ...

  3. MIPAV - Talairach ACPC transform

    源地址:http://blog.sina.com.cn/s/blog_64cfe24f0100h358.html 1.打开MIPAV软件,File>open image from disk> ...

  4. 重构Web Api程序(Api Controller和Entity) 续篇(1)

    经过一系列重构,你眼明的话,还是可以看到还有重构的地方,如: string newFileName = "~/Temp/" + Guid.NewGuid().ToString() ...

  5. iOS开发 传感器(加速计、摇一摇、计步器)

    一.传感器 1.什么是传感器传感器是一种感应\检测周围环境的一种装置, 目前已经广泛应用于智能手机上 传感器的作用用于感应\检测设备周边的信息不同类型的传感器, 检测的信息也不一样 iPhone中的下 ...

  6. topshelf包装redis为windows服务

    topshelf包装redis为windows服务 Redis服务端目前用的是控制台程序运行,部署的时候能作为windows服务后台运行感觉更好.找到一篇文章Running Redis as a Wi ...

  7. 命令行下 mysql 不是内部或外部命令排查方法

    首先确定你没有更改过MySQL的安装目录.如果你进行过改名或者更改了你的路径,那么要在相应的配置文件中更改你的你路径.找到C:\Windows\my.ini文件,更改你配置的文件路径,改成你修改后的路 ...

  8. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  9. javascript 位运算

    位运算博大精深,本文总结下基本的位运算的概念. 1.整数的二进制码 位操作符用于在最基本的层次上,即按内存中表示数值的位来操作数值.ECMAScript中的所有数值都以IEEE-754 64位格式存储 ...

  10. FPGA中的INOUT接口和高阻态

    除了输入输出端口,FPGA中还有另一种端口叫做inout端口.如果需要进行全双工通信,是需要两条信道的,也就是说需要使用两个FPGA管脚和外部器件连接.但是,有时候半双工通信就能满足我们的要求,理论上 ...