jsonp

Posted 2022-10-12 hy96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp相关的知识，希望对你有一定的参考价值。

html1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <a href="http://www.baidu.com">123123123</a> -->
    <!-- <img src="https://www.baidu.com/img/dong1_a1c52951c1f40e1496b46b9ae415c121.gif" > -->
    <!-- <link rel="stylesheet" href=""> -->
</body>
<!-- <script src="data/jsonp.txt"></script> -->
<!-- <script src="data/jsonp1.php"></script> -->
<script>
    

    // http://
    // www.baidu.com
    // :80

     ajax无法请求未经允许的跨域资源
     ajax的核心XHR对象

     jsonp不是ajax，没有xhr对象

     jsonp利用的是某些html可以引入外部资源的特点

     script标签会将引入的文本文件作为js代码解析

     引入的php文件:php文件先被服务器解析，解析之后，php返回的字符，被script标签作为js代码解析

    // fn();

    function fn(res)
        console.log(res)
    
</script>
<script src="http://127.0.0.1/jsonp/data/jsonp1.php?user=admin"></script>
</html>

php1：

<?php

    // echo "hello";
    // echo "console.log(‘hello‘)";
    // echo "function fn()console.log(123)";

    $u = @$_REQUEST["user"];

    // $data = "3.1415926";

    $data = "你哈 ".$u;

    echo "fn(‘".$data."‘)";

    

?>

html2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    document.onclick = function()
        var url = "http://127.0.0.1/1908/jsonp/data/jsonp2.php"
        jsonp(url,function(res)
            console.log(res)
        ,
            user:"root"
        )
    

    function jsonp(url,cb,data)

        data = data || ;
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
        

        var script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);

        window.fn = function(res)
            console.log(res)
        

    
</script>
</html>

jsonp2

<?php

    $u = @$_REQUEST["user"];

    $data = "hello ".$u;

    echo "fn(‘".$data."‘)";
    

?>

html3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    document.onclick = function()
        var url = "http://127.0.0.1/jsonp/data/jsonp3.php"
        jsonp(url,function(res)
            alert(res)
        ,
            pass:"root",
            // 5.用来保存，后台接收的回调函数名所在的字段名
            // 为了给自己封装的函数传参，放置多次修改封装好的函数
            columnName:"cb",
            // 6.根据后台要接受的字段名,发送回调函数名,回调函数名，已经无所谓了，随机都行
            cb:"sdfsdfsdf"
        )
    

    function jsonp(url,success,data)
        // 1.处理默认参数
        data = data || ;
        // 2.解析数据
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
        

        // 3.创建script标签，设置src，准备开启jsonp
        var script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);

        // 4.定义全局函数
        // window.asdasdasd = function(res)
        // window["asdasdasd"] = function(res)
        // window[data.callback] = function(res)
        // window[data["callback"]] = function(res)
        window[data[data.columnName]] = function(res)
            success(res);
        

    
</script>
</html>

jsonp3

<?php

    $u = @$_REQUEST["pass"];
    $c = @$_REQUEST["cb"];

    $data = "你好 ".$u;

    echo $c."(‘".$data."‘)";
    

?>

jsonp封装及使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    document.onclick = function()
        var url = "http://127.0.0.1/jsonp/data/jsonp3.php"
        jsonp(url,function(res)
            alert(res)
        ,
            pass:"root",
            // 5.用来保存，后台接收的回调函数名所在的字段名
            // 为了给自己封装的函数传参，放置多次修改封装好的函数
            columnName:"cb",
            // 6.根据后台要接受的字段名,发送回调函数名,回调函数名，已经无所谓了，随机都行
            cb:"sdfsdfsdf"
        )
    

    function jsonp(url,success,data)
        // 1.处理默认参数
        data = data || ;
        // 2.解析数据
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
            console.log(str)
        

        // 3.创建script标签，设置src，准备开启jsonp
        var script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);

        // 4.定义全局函数
        // window.asdasdasd = function(res)
        // window["asdasdasd"] = function(res)
        // window[data.callback] = function(res)
        // window[data["callback"]] = function(res)
        window[data[data.columnName]] = function(res)
            success(res);
        

    
</script>
</html>

以上是关于jsonp的主要内容，如果未能解决你的问题，请参考以下文章