为什么会有JSONP?因为我们使用AJAX,使用AJAX可能就会遇到跨域的需求,如何解决呢,对,就是JSONP。

  这里注意下JSON和JSONP不是一类,虽然他们只是一个字母只差,但是实际差别很大。这里简单介绍下:

  •   JSON:JSON(JavaScript Object Notation)是一种基于文本的数据交换方式,或者叫做数据描述格式。

    • JSON的优点:

        1、基于纯文本,跨平台传递极其简单;

        2、Javascript原生支持,后台语言几乎全部支持;

        3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

        4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

        5、容易编写和解析,当然前提是你要知道数据结构;

        JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。

    • JSON的格式或者叫规则:

        JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。

        1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。

        2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。

        3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。

        4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号”",以便于不同语言的解析。

        5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。

  • JSONP:JSONP(JSON with Padding)实现跨域交换数据。

  AJAX的核心是通过XmlHttpRequest获取非本页内容,而JSONP的核心则是动态添加<script>标签来调用服务器提供的js脚本,允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jQuery实现JSONP:

客户端:

$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET是合法的
data: {
'action': 'aaron'
}, // 预传参的数组
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名,与服务器端接收的一致,并回传回来
})

查看代码

服务端:(mvc的,protected,给其他需要返回JSONP的调用,在父类中)

        protected ActionResult Jsonp(object data)
{
string jsoncallback = Request.QueryString["jsoncallback"];
if (string.IsNullOrEmpty(jsoncallback))
{
return Json(data, JsonRequestBehavior.AllowGet);
} var jsc = new JavaScriptSerializer();
return Content(string.Format("{0}({1})", jsoncallback, jsc.Serialize(data)), "text/plain", System.Text.Encoding.Default);
}

查看代码

  只要你了解其原理,使用原生js实现也是一样了。请注意,JSONP和AJAX不是一回事哦,两者的原理也不一样。
  至此,我们已经了解JSONP的原理以及如何实现了,博客写的不是很好,忘指正。谢谢。

JSONP的原理与实现(基于jQuery)的更多相关文章

  1. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  2. 基于jQuery的Jsonp跨域[Get方式]

    由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...

  3. 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  4. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  5. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  8. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  9. 基于jQuery的视频和音频播放器jPlayer

    jPlayer见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下.据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF.做到全兼容,这一点很 ...

随机推荐

  1. 判断UNITY版本号

    代码示例: #if (UNITY_5_3 || UNITY_5_4 || UNITY_5_5 || UNITY_5_6 || UNITY_5_7 || UNITY_5_8 || UNITY_5_9)u ...

  2. TZOJ 4839 麦森数(模拟快速幂)

    描述 形如2^P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P-1不一定也是素数.到1998年底,人们已找到了37个麦森数.最大的一个是P=3021377,它有9 ...

  3. 基于快速排序的数组划分:2组 3组 K组(sort color)大小写排序 · Partition Array

    2组: [抄题]: 给出一个整数数组 nums 和一个整数 k.划分数组(即移动数组 nums 中的元素),使得: 所有小于k的元素移到左边 所有大于等于k的元素移到右边 返回数组划分的位置,即数组中 ...

  4. swift textfield 和 textview 实时获取 输入内容

    textfield : func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replac ...

  5. 35-面试:如何找出字符串的字典序全排列的第N种

    http://www.cnblogs.com/byrhuangqiang/p/3994499.html

  6. .net core webapi 部署windows server 2008 r2 笔记

    WebAPI部署文档 安装dotnet-dev-win-x64.1.0.4 安装DotNetCore.1.1.0-WindowsHosting 安装vc_redist.x64 安装Windows6.1 ...

  7. CF 1023D Array Restoration - 线段树

    题解 非常容易想到的线段树, 还可以用并查集来. 还有一位大神用了$O(n)$ 就过了Orz 要判断是否能染色出输入给出的序列,必须满足两个条件: 1. 序列中必须存在一个$q$ 2. 两个相同的数$ ...

  8. 594. Longest Harmonious Subsequence

    方法一:用一个map来辅助,代码简单,思路清晰 static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }( ...

  9. 2018.07.22 洛谷P2986 伟大的奶牛聚集(树形dp)

    传送门 给出一棵树,树有边权和点权,若选定一个点作为中心,这棵树的代价是所有点权乘上到根的距离的和.求代价最小. 解法:一道明显的换根dp" role="presentation& ...

  10. phalApi框架打印SQL语句

    http://demo.phalapi.net/?service=User.getBaseInfo&user_id=1&__sql__=1