聊聊“过时的”的JSONP

一. 跨域和同源策略

• 为什么会跨域？因为不同源。
• 什么是"源(origin)"直接看一张图

很明显看到三部分:

1. http:// 协议
2. localhost 域名
3. 8080 端口

所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域

二. 什么是JSONP?

JSONP(JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】

三. JSON和JSONP有什么什么区别?

JSON虽然和JSONP仅有一个字母的差别，但他们完全不是一回事；JSON是一种交换格式，而JSONP是一种非官方的数据交互协议

四. JSONP的背景

1. 受同源策略的影响，ajax请求的文件如果存在跨域就无权限访问
2. 不过我们发现凡是有src的标签都可以跨域访问，例如

• iframe
• script
• img

3. 恰巧JSON可以用字符数据格式描述复杂的数据，而且JSON被JS原生支持。
4. 于是JSONP的核心是动态添加script标签来调用服务器提供的js脚本
5. 而客户端对JSON文件调用成功后，就可以按照自己的需求进行处理了。
6. 所以JSONP仅仅只是一种非官方协议，而不是数据格式
7. 尽管强大的JQuery把JSONP加到了dataType的选项中，也不能说明JSONP就是一种数据格式。(下面会有详细介绍)

五. JSONP应用

下面请求的api采用的是菜鸟教程当中的。

首先看一下前端ajax请求会如何

• 前端代码在localhost域下，访问域https://www.runoob.com

<script src="./jquery.js"></script>

<script type="text/javascript">
  window.onload = function