当前位置：网站首页 > 热门文章 > 正文

详解前端jquery中的JSONP如何实现跨域请求

bigegpt 2024-10-12 05:55 11 浏览

前言

上一篇文章我们主要聊了一下如何实现一个ajax，但是由于文章篇幅有限并没有聊到JSONP，它也是ajax重要的组成部分，所以这篇文章我们一起来看看如何实现一个JSONP。

为什么需要JSONP？

因为浏览器同源策略的存在，在跨域时，XMLHttpRequest对象发起的请求是不被浏览器允许的，浏览器的控制台会出现一堆错误信息！

那么什么是跨域呢？

当页面请求一个接口，此时页面的地址和接口的协议、域名和端口都相同时就叫做同源，其他情况都是跨域。

那么JSONP的作用就是即使在跨域的情况下，ajax依然能正常发送和接受请求！

JSONP的原理

想一想，咱们维护的网站页面引入的外链js都是同源的吗？

显然不全是，可以翻看一下各大公司的网站，你会发现它们引入的外链静态资源（js、css、img）使用的域名可能都各不一样，但是页面运行正常，这就说明浏览器的同源策略对script标签引入的外链js是不起作用的，所以jsonp的原理就是向页面中动态的插入含有src属性的script标签，从这里可以看出jsonp是一个get请求。

操作具体步骤，请看下图：

页面在发请求之前会先在接口上拼接一个key=value，图1中我们拼接的是callback=callbackname，这个key和value可以随便取，只要和后端rd约定好就可以；
在发请求前还需要做一件事就是以value作为函数名（此处名字是callbackname）定义一个全局方法，挂在window上主要是为了容易获取，当然你也可以把函数挂在其他对象上；
请求到达后端，后端会解析出key和value，比如图1事例，先前你需要告诉后端rd你的key是callback，value不需要告之；
rd通过key拿到value，将会以value(data)的形式返回给页面，页面将会把它当做js执行，好在我们在发请求之前已经定义了以value为函数名的方法，只要js被加载就能执行成功，这样我们就可以在value函数中拿到后端的数据了；
最后一步就是删掉script标签，并且重置value方法。

JSONP的具体实现

既然已经清楚原理了，我们就接着上篇文章的ajax代码继续补充jsonp的具体实现逻辑。

如上图，首先判断是否开启jsonp，如果开启就执行ajaxJSONP方法，是否开启这个能力就看接口是否跨域。

接下来我们实现一下ajaxJSONP方法，如下图：

图3 代码简写了一下为了容易看懂，首先就是拼接url，然后定义全局函数，其次插入script标签发起请求，等请求响应成功，js执行完成，图3中的responseData就可以获取到后端的数据了，待load事件触发，我们就执行外部传进来的钩子，最后做一些重置收尾工作。

很显然jsonp也需要加入超时逻辑，下面我们加一下：

如图4，超时逻辑和普通ajax的超时逻辑类似，此处就不再嗷述了！

JSONP相关的面试

1、阐述jsonp的原理或者手写一个jsonp？

看到这里我想应该没问题了！

2、jsonp如果超时了，ajax会怎么处理？

当然是进入error函数了！

总结

这篇文章主要补充了ajax实现中的jsonp部分，为了更容易懂，有几处代码不是很严谨，如果直接用的话需要先优化一下！另外jsonp主要是为了解决跨域问题，但是它不是唯一的解决办法，后面有机会我会专门写一篇文章总结跨域的方法。下一篇文章我将聊一下服务器推送！

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！

jquery跨域

上一篇：利用jQuery实现JSONP跨域请求 jquery跨域cors
下一篇：「融职培训」Web前端学习第6章 jQuery Ajax 4 跨域请求

详解前端jquery中的JSONP如何实现跨域请求

前言

为什么需要JSONP？

JSONP的原理

JSONP的具体实现

JSONP相关的面试

总结

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解