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

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

首先看一下前端ajax请求会如何
  • 前端代码在localhost域下,访问域https://www.runoob.com
<script src="./jquery.js"></script>

<script type="text/javascript">
  window.onload = function 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值