jsonp 原理和使用

简介: jsonp 原理和使用

原理

主要就是利用了 script 标签的src没有跨域限制来完成的。

执行的过程

(1)前端定义一个解析函数,例如 jsonpCallback=function(res){}
(2)通过params的形式包装script的请求参数,并且声明执行函数(如 cb=jsonpCallback)
(3)后端获取到前端声明的执行函数(jsonpCallback),并以携带参数并且调用执行函数的方式传递给前端
(4)前端zaiscript标签返回资源的时候就回执行jsonpCallback,并以回调函数的方式拿到返回的数据了

优缺点

缺点:只能进行GET请求,需要后台配合
优点:兼容性好,在一些古老的浏览器中都可以运行

简单使用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题栏文档</title>
    </head>
    <body>
        <script type="text/javascript">
            function jsonp(res) {
   
                console.log(res)   // 后台返回的数据
            }
        </script>
        // 这是后台配合 整理出来的文件地址  我们加上callback 回调函数
        <script src="https://xxx.com/aaa/aa/a.js?callback='jsonp'" type="text/javascript"></script>
    </body>
</html>

上述就是利用

相关文章
|
14天前
|
前端开发
|
10天前
|
JSON JavaScript 前端开发
JSONP 教程
JSONP 教程
38 7
|
4月前
|
JSON 安全 JavaScript
jsonp 的优缺点
jsonp 的优缺点
120 0
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
102 0
|
JSON 前端开发 JavaScript
跨域问题的解决方案 jsonp cros原理
当浏览器端运行了一段ajax代码(无论是使用XMLHttpRequest还是fetch api),浏览器会首先判断它属于哪一种请求模式
跨域问题的解决方案 jsonp cros原理
|
前端开发
前端 利用jsonp解决跨域问题
前端 利用jsonp解决跨域问题
|
前端开发 JavaScript 安全
【Ajax进阶】跨域和JSONP的学习
跨域和JSONP的学习
174 0
【Ajax进阶】跨域和JSONP的学习
|
前端开发 JavaScript
ajax,jsonp,axios面试题
ajax,jsonp,axios面试题
|
前端开发 JavaScript API
JSONP原理及简单实现
JSONP原理及简单实现
181 0
JSONP原理及简单实现
|
JSON 前端开发 JavaScript
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
167 0