当前位置: 首页 > news >正文

【JSON和JSONP】浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

原文:http://m.jb51.net/article/57728.htm
文章从JSON和JSONP区别开始讲起,用实例来对比他们之间的不同之处,然后详细讲解了jQuery中的ajax jsonp的使用并给出了示例及详细参数说明。这里推荐给大家,希望对小伙伴能有所帮助

JSON和JSONP
  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
  JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。
  JSON是一种数据格式,JSONP是一种数据调用方式。

复制代码 代码如下:

 //JSON
 {
 “name”: “sb”
 }
复制代码 代码如下:

 //JSONP
 callback({
 “name”: “sb”
 })

  出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。
例1:

复制代码 代码如下:

 //定义shoPrice函数
 function showPrice(data) {
     ;
 }
复制代码 代码如下:

 //在Web页面中包含showPrice函数和参数

  本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 例2:
  第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。

复制代码 代码如下:

remote.js的内容和之前在标签里写的一样是:
 1 showPrice({symbol: 'IBM', price: 91.42});
  动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。
  那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。
例3:
  动态插入代码,带有callback参数:

复制代码 代码如下:

后端用PHP实现的JSONP服务的代码片段:

复制代码 代码如下:

 $jsonData = getDataAsJson($_GET['symbol']);
 echo $_GET['callback'] . '(' . $jsonData . ');';
 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定义,打包在函数调用中的JSON数据。
以上几个例子来自:
使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup 在jQuery中使用JSONP 
  AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加
json与jsonp区别浅析(json才是目的,jsonp只是手段)
原文:http://www.cnblogs.com/iovec/p/5312464.html

一言以蔽之,json返回的是一串数据;而jsonp返回的是脚本代码(包含一个函数调用);

JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展。简单地讲,json其实就是这倆好基友在那儿你嵌我我嵌你地套上n多层,以此模拟出许多复杂的数据结构。

json易于人阅读和编写,也易于机器解析和生成,相对网络传输速率较高,功能型网站前后端往往要频繁大量交换数据,而json凭借其强大的表现力和高颜值渐渐地成为理想的前后端数据交换语言。那xml前辈呢,我觉得应该会像微软的xp那样功成身退。

同源(不懂同源策略的童鞋请自行百度)下的前后端数据交换格式确定使用json了,那么问题来了,如果我想获取别人网站上提供的数据肿么做到呢?也就是跨域读取数据问题(不要钻牛角说你不需要读取其他网站的数据,相信我,你早晚得需要),json行不行呢?答案是No Way,为什么呢,因为json只是普通的文本格式,能让你这样就轻松拿到那服务端就没有任何安全和保密性可言了,这样的话互联网世界非乱套不可,这个问题那些牛X的规范制定者早就想到了,所以使用了同源策略来限制文件获取。最后的结果就是只有像img、script、iframe这类可以指定src属性的标签有跨域获取别人网站上数据(图片,脚本,源文件其实都是数据)的能力。比如:

看来直接获取json是行不通了,那有没有其他方法能拿到数据呢?于是乎jsonp就这样被聪明的开发者给发现了,为什么说是发现而不是发明呢,因为并没有涉及到任何新技术,就像发现ajax一样。

jsonp原理是这样的,网站A需要获取网站B的数据,网站B说我给你们一个方法,【1. 你们使用

open.js内容

foo({"name":"B","age":23});  

  

网站A脚本须有


}

  

啊!虽然拐了个弯,但数据总算得到了,网站A,网站B都非常高兴,那么问题又来了,网站C说也需要获取网站B的数据,网站B把协议甩给它,网站C拿过来一看,草泥马啊,foo这个名字已经在自己的脚本文件的6868行用过了,而且已经使用在脚本的各个角落,批量替换会导致很多潜在bug啊,网站B情急之下决定把foo改成fool,网站A立马蹦起来,因为自己的网站已经在很多地方使用foo引用了数据。

为了避免上面情况发生,那些牛X哄哄的开发者使用了动态生成js文件的方法,php版本如下:

open.php

							
		
  
喜欢

0

赠金笔
阅读 评论 收藏 转载 喜欢 打印 举报
已投稿到:
排行榜
加载中,请稍候......
前一篇: 【web.xml】web.xml文件的作用和servlet 、servlet-mapping 标签
后一篇: 【JSP、servlet、SQL】JSP、servlet、SQL三者之间的数据传递
评论 重要提示:警惕虚假中奖信息
[发评论]
  • 评论加载中,请稍候...
发评论

登录名:密码:找回密码 注册 记住登录状态

昵   称:

评论并转载此博文

发评论

以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

< 前一篇 【web.xml】web.xml文件的作用和servlet 、servlet-mapping 标签
后一篇 > 【JSP、servlet、SQL】JSP、servlet、SQL三者之间的数据传递

相关文章:

  • 【JSP、servlet、SQL】JSP、servlet、SQL三者之间的数据传递
  • 【Jackson】Jackson和Jackson的用法实例分析
  • 【Spring】Spring 基础,用小例子来理解它(spring boot)
  • 【JQuery】jquery通过ajax方法获取json数据不执行success
  • 【jQuery】jQuery中$.get、$.post、$.getJSON和$.ajax用法的区别
  • 【json序列化】json的序列化、二进制序列化、JSON传输二进制数据方法
  • 【MVC\MVC\MVP】MVC、MVP、MVVM的区别
  • 【三范式】数据库三范式是什么?
  • 【SSH免密码登录】SSH Secure Shell Client用public key认证登录|linux 生成密钥
  • 【div Resize】Javascript中 非Window的DOM的onresize事件解决方案
  • []新浪博客如何插入代码(其他博客应该也可以)
  • 【Jquery绑定事件】jQuery事件绑定on()、bind()与delegate() 方法详解
  • 【web开发】Web工程目录和tomcat目录
  • 【协议】MessagePack, Protocol Buffers和Thrift序列化框架原理和比较说明
  • 【RabbitMQ】RabbitMQ 学习
  • [iOS]Core Data浅析一 -- 启用Core Data
  • 10个确保微服务与容器安全的最佳实践
  • 4. 路由到控制器 - Laravel从零开始教程
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • Angular 2 DI - IoC DI - 1
  • ES6系统学习----从Apollo Client看解构赋值
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • Median of Two Sorted Arrays
  • PHP 小技巧
  • Python学习之路16-使用API
  • Redis的resp协议
  • Spark学习笔记之相关记录
  • vue中实现单选
  • 今年的LC3大会没了?
  • 小程序01:wepy框架整合iview webapp UI
  • 因为阿里,他们成了“杭漂”
  • 06-01 点餐小程序前台界面搭建
  • Prometheus VS InfluxDB
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​2020 年大前端技术趋势解读
  • ​低代码平台的核心价值与优势
  • ​用户画像从0到100的构建思路
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (十六)一篇文章学会Java的常用API
  • (转)socket Aio demo
  • (转)程序员疫苗:代码注入
  • . Flume面试题
  • ./configure,make,make install的作用
  • .NET Reactor简单使用教程
  • .net 逐行读取大文本文件_如何使用 Java 灵活读取 Excel 内容 ?
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • .考试倒计时43天!来提分啦!
  • 。Net下Windows服务程序开发疑惑
  • @AutoConfigurationPackage的使用
  • [ C++ ] STL_list 使用及其模拟实现
  • [ vulhub漏洞复现篇 ] struts2远程代码执行漏洞 S2-005 (CVE-2010-1870)
  • [AIGC] MySQL存储引擎详解
  • [AndroidStudio]_[初级]_[修改虚拟设备镜像文件的存放位置]