为什么会有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(objectdata){string jsoncallback = Request.QueryString["jsoncallback"];if (string.IsNullOrEmpty(jsoncallback)){returnJson(data, JsonRequestBehavior.AllowGet);}var jsc = newJavaScriptSerializer();return Content(string.Format("{0}({1})", jsoncallback, jsc.Serialize(data)), "text/plain", System.Text.Encoding.Default);}

查看代码

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

转载于:https://www.cnblogs.com/moretry/p/3905731.html

JSONP的原理与实现(基于jQuery)相关推荐

  1. Python入门自学进阶-Web框架——8、认识Ajax,与Django交互,基于jQuery

    基于jQuery的Ajax实现: jQquery中创建XMLHttpRequest对象就没有兼容性问题了,而且不需要前面的四个步骤,直接使用$.ajax(),通过设置相关的参数,如提交的方法,url, ...

  2. ajax 随机,基于JQuery及AJAX实现名人名言随机生成器

    基于JQuery及AJAX实现名人名言随机生成器 发布于 2017-05-05 06:56:38 | 137 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQu ...

  3. 基于jQuery实现富文本的拖拽和修改大小

    实现功能 实现富文本编辑器在定义区域内可以拖拽和调整其大小,编辑完成后可将内容生成图片. 由于系统较陈旧,所以选择的是基于jQuery的插件实现. 相关插件 wangEditor jQuery UI ...

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

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

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

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

  6. 【折腾的一个小玩意】基于jquery+百度音乐的音乐外链小工具

    [折腾的一个小玩意]基于jquery+百度音乐的音乐外链小工具 现在百度mp3好像关掉了,虾米的加载又慢,于是我就根据以前发过的百度音乐的代码弄了这个东西.代码托管到百度BAE的,应用还在审核中,不知 ...

  7. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...

  8. 基于jquery的上拉加载更多

    一个简易的基于jquery的上拉加载更多demo,上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度,整个demo还加上了回弹的动效. <!DOCTYPE html& ...

  9. 表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...

最新文章

  1. 51nod 1268 和为K的组合 dfs
  2. 提升开发效率的 Chrome 开发者工具快捷键参考
  3. Kafka 源码解析:Server 端的运行过程
  4. python typing optional_python类型检测最终指南--Typing模块的使用
  5. 正确关闭线程池:shutdown 和 shutdownNow 的区别
  6. ASP.NET之Ajax系列(三)
  7. [唐诗]诗(选二首)-王梵志
  8. 人工智能(一):技术发展史
  9. mysql数据库链接_连接MySQL数据库
  10. Wordpress出现503 Service Temporarily Unavailable
  11. mac 上安装selenium, phantomjs 和 chromedriver
  12. DFS序——树链剖分前驱知识
  13. uva 167 The Sultan's Successors
  14. 直播美颜SDK动态贴纸详解
  15. 连接型智能BPM引擎——雀书
  16. JS:函数中的arguments
  17. request.get乱码解决
  18. docker配置Java环境
  19. 安卓手机google商店的账号切换退出方式
  20. 关于c语言中二维数组及相关指针的理解

热门文章

  1. 张清:你hold住微博实名制吗?
  2. 生活的色彩——摄影作品欣赏
  3. 网络测试及故障诊断方法及工具
  4. the next journal submission for mechanism should be at this journal
  5. matlab Normally distributed random numbers in two columns
  6. 剑桥的商学院硕士的创业项目找我做tech lead,稳得一批
  7. C#抽象类与接口的区别【转】
  8. 用vim 配置javascript
  9. 谷歌开发者工具详解 Network篇
  10. Elasticsearch 简介