本文探讨了跨域和同源策略，详细解释了JSONP（JSON with Padding）的工作原理及其与JSON的区别。JSONP通过动态添加script标签来规避同源策略，实现跨域数据获取，尤其适用于GET请求。文章还通过示例展示了JSONP在实际应用中的实现，强调JSONP是一种非官方协议，而非数据格式。
一. 跨域和同源策略
- 为什么会跨域？因为不同源。
- 什么是"源(origin)"直接看一张图
很明显看到三部分:
- http:// 协议
- localhost 域名
- 8080 端口
所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域
二. 什么是JSONP?
JSONP(JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】
三. JSON和JSONP有什么什么区别?
JSON虽然和JSONP仅有一个字母的差别，但他们完全不是一回事；JSON是一种交换格式，而JSONP是一种非官方的数据交互协议
四. JSONP的背景
- 受同源策略的影响，ajax请求的文件如果存在跨域就无权限访问
- 不过我们发现凡是有src的标签都可以跨域访问，例如
- iframe
- script
- img
- 恰巧JSON可以用字符数据格式描述复杂的数据，而且JSON被JS原生支持。
- 于是JSONP的核心是动态添加script标签来调用服务器提供的js脚本
- 而客户端对JSON文件调用成功后，就可以按照自己的需求进行处理了。
- 所以JSONP仅仅只是一种非官方协议，而不是数据格式
- 尽管强大的JQuery把JSONP加到了dataType的选项中，也不能说明JSONP就是一种数据格式。(下面会有详细介绍)
五. JSONP应用
下面请求的api采用的是菜鸟教程当中的。
首先看一下前端ajax请求会如何
- 前端代码在localhost域下，访问域https://www.runoob.com
<script src="./jquery.js"></script>
<script type="text/javascript">
window.onload = function 
最低0.47元/天 解锁文章
1815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
