jsonp原理

最新推荐文章于 2022-05-06 11:26:43 发布

子义间

最新推荐文章于 2022-05-06 11:26:43 发布

阅读量2.3w

点赞数

分类专栏： html 基础

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/101346422

版权

基础同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

jsonp原理：动态创建script标签，然后借助script发送请求（有一个callback函数），服务端返回js语句，服务器端将要返回的数据填充进js语句里返回，script接收到js语句之后，执行js语句，最后删除动态创建的script标签

原理基于nodejs做服务端在终端执行node server.js启动服务，

//server.js
var http = require('http');
var url=require("url")
http.createServer(function (request, response) {
    var Url=url.parse(request.url,true)//获取url对象
    var callback=Url.query.callback;//获取url地址栏的？后面名字为callback的参数
    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    var w='hahah'

    // 发送响应数据 "Hello World"
    response.end(`${callback}("${w}")`); //相当于response.end(`show("${w}")`);
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function show(w) {
            alert(w)
        }
    </script>
    <script src=" http://127.0.0.1:8888/?callback=show"></script>
</head>
<body>
</body>
</html>

但是这样子会出现一个问题，就是script是写死在页面上的，也是只执行一次的
所以在html加一个按钮动态添加script标签

html 这里我直接引用了jq，方便操作dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>
    <script>
        $("document").ready(function () {
            $('#btm').click(function () {
                var script =document.createElement("script");
                script.src=" http://127.0.0.1:8888/?callback=show"
                document.body.appendChild(script);
            });

        })
        //回调函数
        function show(w) {
            console.log(w)
            //回调结尾，删除用过的script标签
            $('body>script:last').remove();
        }
    </script>
</head>
<body>
<button id="btm">点我啊</button>

</body>
</html>

每点一次在浏览器都会出现一个script标签用$(‘body>script:last’).remove();删除添加的script标签

以上就是jsonp的原理实现，

下面用ajax进行jsonp跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>
    <script>
        $("document").ready(function () {
            $('#btm').click(function () {
                //var script =document.createElement("script");
                //script.src=" http://127.0.0.1:8888/?callback=show"
                //document.body.appendChild(script);
				//用ajax实现jsonp,只是把其他的几步封装起来了
                $.ajax({
                    url:" http://127.0.0.1:8888/",
                    type:"get",
                    dataType:"jsonp",
                    success:function (data) {
                        console.log(data)
                    }
                })
            });
        })
       //回调函数
       // function show(w) {
       //   console.log(w)
       //   回调结尾，删除用过的script标签
       //   $('body>script:last').remove();
       // }
    </script>
</head>
<body>
<button id="btm">点我啊</button>
</body>
</html>

不安全
JSONP的优缺点
1.优点

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略（解决跨域问题）；
2.它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持（兼容性好）

2.缺点

1.它只支持GET请求而不支持POST等其它类型的HTTP请求
2.它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
3.jsonp在调用失败的时候不会返回各种HTTP状态码。
4.缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的