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>

上述就是利用

相关文章
|
3月前
|
前端开发
|
3月前
|
JSON JavaScript 前端开发
JSONP 教程
JSONP 教程
64 7
|
7月前
|
JSON 安全 JavaScript
jsonp 的优缺点
jsonp 的优缺点
145 0
|
JSON 前端开发 JavaScript
跨域问题的解决方案 jsonp cros原理
当浏览器端运行了一段ajax代码(无论是使用XMLHttpRequest还是fetch api),浏览器会首先判断它属于哪一种请求模式
跨域问题的解决方案 jsonp cros原理
|
前端开发
前端学习案例1-jsonp实现跨域方式
前端学习案例1-jsonp实现跨域方式
69 0
前端学习案例1-jsonp实现跨域方式
|
前端开发
前端学习案例4-jsonp实现跨域方式4
前端学习案例4-jsonp实现跨域方式4
82 0
前端学习案例4-jsonp实现跨域方式4
|
前端开发
前端学习案例3-jsonp实现跨域方式3
前端学习案例3-jsonp实现跨域方式3
82 0
前端学习案例3-jsonp实现跨域方式3
|
前端开发
前端学习案例5-jsonp实现跨域方式5
前端学习案例5-jsonp实现跨域方式5
86 0
前端学习案例5-jsonp实现跨域方式5
|
前端开发
前端学习案例2-jsonp实现跨域方式2
前端学习案例2-jsonp实现跨域方式2
67 0
前端学习案例2-jsonp实现跨域方式2
|
前端开发 JavaScript 安全
【Ajax进阶】跨域和JSONP的学习
跨域和JSONP的学习
191 0
【Ajax进阶】跨域和JSONP的学习