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" alt=""> -->
    <!-- <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>

 

posted @ 2019-09-10 17:09  菜鸟小何  阅读(193)  评论(0)  编辑  收藏  举报