摘要:跨域服务器文件代码本地得到航班信息查询结果后的回调函数你查询的航班结果是票价元,余票张。三那么服务器到底做了什么呢说到底,就是拼接字符串。数据接收函数名称输出四与的区别是什么和本质上是不同的东西。
一、JSONP的诞生
首先,因为ajax无法跨域,然后开发者就有所思考
其次,开发者发现, 标签的src属性是可以跨域的
把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了?
json刚好被js支持(object)
调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码)
这种获取远程数据的方式看起来非常像ajax,但其实并不一样
便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP。
传递一个callback参数给跨域服务端,然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
二、老板,来一斤栗子。
【栗子一】
跨域服务器
文件:remote.js
代码:
alert("我是远程文件");
本地
这边做的就是直接引入一个js,页面将会弹出一个提示窗体,显示 我是远程文件。
【栗子二】
跨域服务器
文件:remote.js
代码:
localHandler({"result":"我是远程js带来的数据"});
本地
这边做的是
1、本地定义一个函数
2、引入一个js
3、被引入的js里面,调用这个函数页面将会弹出一个提示窗体。显示本地函数被跨域的远程js调用成功,并且还接收到了 我是远程js带来的数据。
新问题出现了:让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?
【栗子三】
跨域服务端提供的js脚本动态生成,这样调用者可以传一个参数过去告诉跨域服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是跨域服务器就可以按照客户端的需求来生成js脚本并响应了。
跨域服务器
文件:flightResult.php
代码:
flightHandler({ "code":"CA1998", "price": 1780, "tickets": 5 });
本地
这次我们做的是
1、动态创建脚本
2、url中传递了一个code参数,服务器去做查询CA1998次航班的信息,callback参数告诉服务器,我的本地回调函数叫做flightHandler
3、跨域服务端调用这个函数flightHandler 页面将会弹出一个提示窗体。把票价、余票以及张数给传递回来了。
三、那么服务器到底做了什么呢? 说到底,就是拼接字符串。
// 数据 $data = [ "name":"anonymous66", "age":"18", "like":"jianshu" ]; // 接收callback函数名称 $callback = $_GET["callback"]; // 输出 echo $callback . "(" . json_encode($data) . ")";
四、与AJAX的区别是什么?
ajax和jsonp本质上是不同的东西。
ajax的核心是通过XmlHttpRequest获取非本页内容
jsonp的核心则是动态添加标签来调用服务器提供的js脚本。
五、结语
本篇文章是对JSONP的原理扫盲,一般很多开发者会使用却不知道原理,这在学习和成长的路上不算好事。so,知道jsonp原理,你又可以加50块工资了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86682.html
摘要:因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用。这个是跨域服务器取数据的接口,参数为回调函数的名字,返回的格式为原理首先在客户端注册一个然后把的名字传给服务器。 一、同源策略 同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略。 为什么需要同源策略,这里举个例子: 假设现在没有同源策略,会发生什么事...
摘要:是一种协议,为了解决客户端请求服务器跨域的问题,但是并非是正式的传输协议。结果明明请求回来数据,结果还是报错。是一种使用数据的方式,返回的不是对象,是包含对象的脚本。 1、什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的 元素是一个例外。利用 元素的这个开放策略,网页可以得到...
摘要:因为有同源策略,而在实际开发中又常常会有跨域的需求,早期开发者为了解决跨域问题而搞出来这样一个颇为奇怪的东西。安全早期的浏览器处于安全层面的考量,制定同源策略,限制了一个源中加载文本或脚本与来自其它源中资源的交互方式。 AJAX、JSON、JSONP 在 WEB 开发中,经常见到诸如 AJAX、JSON、JSONP 这些名词。三者看起来很像,很多同学尤其是没有系统了解过前端技术体系的同...
阅读 1082·2021-11-25 09:43
阅读 1545·2021-10-25 09:47
阅读 2451·2019-08-30 13:46
阅读 741·2019-08-29 13:45
阅读 1270·2019-08-26 13:29
阅读 2976·2019-08-23 15:30
阅读 1089·2019-08-23 14:17
阅读 1314·2019-08-23 13:43