百度
360搜索
搜狗搜索

json原理,jsonp跨域的原理是什么?详细介绍

本文目录一览: 什么是json和jsonp,jQueryjson实例详详细说明_json

什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。 JSON的优点: 1、基于纯文本,跨平台传递极其简单; 2、Javascript原生支持,后台语言几乎全部支持; 3、轻量级数据格式,占用字符数量极少,特别适合互联网传递; 4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的; 5、容易编写和解析,当然前提是你要知道数据结构; JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。 JSON的格式或者叫规则: JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。 1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号”"是定义符。 2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。 3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。 4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号”",以便于不同语言的解析。 5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。 JSON实例: 代码如下: // 描述一个人 var person = { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true } // 获取这个人的信息 var personAge = person.Age; // 描述几个人 var members = [ { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true }, { "Name": "John", "Age": 20, "Company": "Oracle", "Engineer": false }, { "Name": "Henry", "Age": 45, "Company": "Microsoft", "Engineer": false } ] // 读取其中John的公司名称 var johnsCompany = members[1].Company; // 描述一次会议 var conference = { "Conference": "Future Marketing", "Date": "2012-6-1", "Address": "Beijing", "Members": [ { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true }, { "Name": "John", "Age": 20, "Company": "Oracle", "Engineer": false }, { "Name": "Henry", "Age": 45, "Company": "Microsoft", "Engineer": false } ] } // 读取参会者Henry是否工程师 var henryIsAnEngineer = conference.Members[2].Engineer; 什么是JSONP? 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如、 毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。 2、现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。 jsonp.html页面代码如下: 代码如下: var localHandler = function(data){ alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result); }; remote.js文件代码如下: 代码如下: localHandler({"result":"我是远程js带来的数据"}); 运行之后查看结果,页面成功弹出提示窗口,显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。 3、聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。 看jsonp.html页面的代码: 代码如下: // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); 这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。 我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。 OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串): 代码如下: flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 }); 我们看到,传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成! 4、到这里为止的话,相信你已经能够理解jsonp的客户端实现原理了吧?剩下的就是如何把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。 什么?你用的是jQuery,想知道jQuery如何实现jsonp调用?好吧,那我就好人做到底,再给你一段jQuery使用jsonp的代码(我们依然沿用上面那个航班信息查询的例子,假定返回jsonp结果不变): 代码如下: Untitled Page

jsonp跨域的原理是什么?

jsonp其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。
JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
相关信息:
由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。
同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。

如何实现跨域?jsonp实现原理

JSONP的最基本的原理是:动态添加一个是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的)。JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患。
那jquery为什么不支持post方式跨域呢?
虽然采用post+动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用。
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的,万不得已还是不要剑走偏锋。
client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。

springboottreemap转json原理

前后端数据传输方式。JSON是目前主流的前后端数据传输方式。在Boot项目中,只要添加了Web依赖,就可以很方便地实现JSON转换。

使用Vue2.x如何实现JSON树

这篇文章主要给大家介绍了关于利用Vue2.x开发实现JSON树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值前言最近工作中遇到一个需求,由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能,在 GitHub 上也没有找到合适的组件,因此基于 Vue2.X 自己写了一个 JSON 树组件,主要原理是利用 Vue 的递归组件,进行深度优先的先序遍历。该组件不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构,同时可用于抓取某一子树的数据。Github源码Github-Page组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做字符串数据美化功能:特定层级数据抓取功能:
通过 parent-data 传入父亲的数据,data 传入孩子的数据,当子树的数据是简单类型时,不再进入递归,同时该组件提供了一个 click 事件,用于获取特定节点的树数据,而孩子的数据,则通过递归机制不断向上一层级传递,类似于“冒泡机制”。上面是我整理给大家的,希望今后会对大家有帮助。相关文章:在vue中如何使用ueditor使用React Native如何实现自定义控件底部抽屉菜单在vue中使用ref 让父组件调用子组件如何实现web前端页面生成exe如何实现ajax前台后台跨域请求

请问为什么AJAX在传输数据的时候要使用JSON格式?有什么好处吗?别说规定啊 我想知道原理。

ajax传递数据有很多种形式,因为json格式是js的,所以相对来说比较简单,出了json还可以是xml,只不过接受的时候比较麻烦,
用json,一个结构清晰,二是容易转成对象调用,你可以谷歌一下json格式的好处。。自己查询的更加清晰深刻。
ajax一般用xml,字符串,json三种方式
可以参考w3c

jsonp原理是什么,如何实现,请用伪代码描述下

很简单,就是利用标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个元素,地址指向第三方的..

【JSON】JSON在前端和后端传递

后端:我们假定使用的是java语言

前端:毫无疑问是js

java语言:是一种强类型的语言,必须定义类型,然后生成实例;而js却不是,虽然它也是面向对象的,但是它并没有先定义类这一种概念(但是js也有类型),它是基于原型的一种模式,和java完全不同。很显然,二者的原理,机制,语法并不能兼容。二者产生的对象并不能被对方解读。再来看网络传输,通常就是http/tcp协议喽,使用的其实是请求-响应,再说白了即使字符串,不论后台传来的是什么类型的数据,也不论前台传回的什么类型的数据,网络层统统当作字符串处理,它也没有办法来解析类型啊!说到这里,前后台传数据也就只能用字符串了,那也就意味着它们各自都要完成一个转换过程,把要发送的转换成字符串,把要收到的字符串解析成自己的对象。因为传输的字符串会涉及前后台双方的解析和处理,所以双方都必须认识或者知道字符串该怎么转,也就是说,最好能有一种通用的规则来编辑,转换字符串,这个标准或者协议就是JSON,JSON就是用来交换数据的,是一种string,一种独立于平台的数据格式。

这样一来,前台就需要把自己的数据类型转成JSON,然后发给后台,后台在用JSON来解析数据,转换成自己的类型。后台传前台一样。那么,怎么把自己的数据转成JSON呢?

`JSON`对象可以通过JavaScript存取属性!JSON对象封装成JSON字符串经常用于前后台传输数据!

如果在前端使用,那么JSON对象可以通过 对象.属性名 来调用,如果是json字符串,那么只是字符串了!

在数据传输过程中,JSON是以文本、即字符串的形式传递的,而JavaScript操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
JSON字符串:var str = '{ name: 'xmt', sex: 'woman' }';
JSON对象:? ?var str = { name: 'xmt', sex: 'woman' };

阅读更多 >>>  json格式文件怎么打开编辑,json如何用记事本打开

JSON字符串转化为JSON对象:var obj = JSON.parse(str) ;
JSON对象转化为JSON字符串:var str = JSON.stringify(obj);

socket如何传输json数据包

Json是个数据结构,可以转化成字符串
字符串可以转化成二进制
而Socket发送的就是二进制数据。可以将Json转化的二进制数据包含在内,加上数据头什么的一起传输。
解析的同理,根据数据头判断消息内容,然后再解析一段数据转字符串, 字符串转JSON。
原理清楚了就不需要说别的了吧?

少长咸集

← 上一篇: 下一篇:

知识分享相关文章:

更多知识分享 >

网站数据信息

"json原理,jsonp跨域的原理是什么?"浏览人数已经达到19次,如你需要查询该站的相关权重信息,可以点击进入"Chinaz数据" 查询。更多网站价值评估因素如:json原理,jsonp跨域的原理是什么?的访问速度、搜索引擎收录以及索引量、用户体验等。 要评估一个站的价值,最主要还是需要根据您自身的需求,如网站IP、PV、跳出率等!