什么是jsonp?
说到jsonp,你可能最先想到JSON;它还真和JSON有关系;
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
JSONP(JSON with Padding),我更倾向于把最后一个字母P理解为 protocol(协议,约定);
JSON的优点:
1、基于纯文本,跨平台传递极其简单;
2、Javascript原生支持,后台语言几乎全部支持;
3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;
4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;
5、容易编写和解析,当然前提是你要知道数据结构;
JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。
有这么一个故事:
A男和B女居住在不同的国家A国和B国,在一次去C国旅行的途中相遇了,双方聊的比较Happy,旅行结束都回国了;但A男总是会想B女,想联系上B女,无奈当时没有留下B女的电话、邮箱、微信、QQ号码这些可以更加即时的联系方式,只是闲聊间知道B女地址,那就只能写信吧去C国也不太现实;于是就写信把自己的各种即时联系方式都写进去了,一封信寄出去了过了一段时间没有回音又写一封,就是没有收到C友的电话等任何回音;对方收到了没有呢,确定是收到了也看了。
这是为什么呢?C女不想搭理他呗(没有按A男指定的方式回调)!
JSONP就是这么一回事,你知道对方的调用地址,告诉对方你的回调函数名称是什么,但对方如果不配合,就是不调用你约定的回调函数名称,你调用多少次也没用,所以JSONP的关键还是要对方配合你才行。
js跨域交互实现原理
HTML <script> 标签,对就是它,世界因它而美好!
你可以使用这个标签加载任何其它可访问到的网站的js文件试试,我就不多说了;
跨域交互一:jQuery.getScript
这个例子比较简单易懂,使用固定的回调函数名称:fncallback
调用端,也可以说是客户端:
我是在本地测试,跑了多个Web服务,本地页面访问地址:http://localhost:88/
网页中的JS代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">效果:在页面尾部增加一条线,以及:getScript ok! ,后面紧跟被调用端返回的它接收到的请求地址:
getScript ok!/test2.php"http://localhost/test2.php">http://localhost/test2.phptest2.php 文件的内容:
<"var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; echo "fncallback({\"reqUrl\": reqUrl });";浏览器访问:
通过浏览器访问,自然没有后面的参数,除非你自己手动加上;
跨域交互二:jQuery.getJSON
调用端:
<script type="text/javascript"> //注册页面加载完成回调函数(匿名) $(document).ready(function(){ //使用getJSON方法调用跨域脚本;注册匿名回调函数 $.getJSON("http://localhost/test.php", function(data){ $(document.body).append("<hr />getJSON ok!" + data.reqUrl); }); }); </script>注意:我在请求的地址中添加了“"htmlcode">
getJSON ok!/test.php"htmlcode"><"var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; echo $_GET["callback"] . "({\"reqUrl\": reqUrl });";通过 $_GET["callback"] 获取客户端传递过来的回调函数名称;看输出:
var reqUrl = "/test.php"; jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });跨域交互三:jQuery.ajax
调用端:
<script type="text/javascript"> //注册页面加载完成回调函数(匿名) $(document).ready(function(){ //使用ajax方法调用跨域脚本; $.ajax({ url:"http://localhost/test.php", dataType: 'jsonp', success: function(data){ $(document.body).append("<hr />ajax ok!" + data.reqUrl); } }); }); </script>注意:在请求的地址中不需要添加“"color: #ff0000">使用总结
使用 getScript 的方式,你可以自己定义一个回调函数的名称,让服务端响应的时候使用你指定的回调函数名称;
使用 getJSON 的方式关键在于URL后面添加的“callback=?”;
使用 ajax 的方式关键在于参数中的数据类型设置“dataType: 'jsonp',”;
以上所述是小编给大家介绍的JS跨域交互(jQuery+php)之jsonp使用心得,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]