Javascript的jsonp原理

时间：2023-11-19 09:04:50
Javascript的jsonp原理
首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式
当一个网页在请求JavaScript文件时则不受是否跨域的影响，凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
所以我们这里运用了script标签的跨域能力，让它用一个callback函数包裹着一段JSON格式的数据，当该数据返回到前端页面的时候，我们再执行这个函数就可以把数据读取出来
前端代码
jsonp.html
<html>

    <head>

        <meta charset="UTF-8">

        <title>Wsscat's jsonp</title>

    </head>

    <body>

        <button onclick="jsonpServer('jsonp.php')">JSONP</button>

    </body>

    <script>

        function jsonpServer(url) {

            var script = document.createElement("script");

            script.setAttribute("type", "text/javascript");

            script.setAttribute("src", url);

            document.body.appendChild(script);

        }

        function JSON_CALLBACK(data) {

            console.log(data);

        }

    </script>

</html>

　　

后端代码
jsonp.php
<?php

$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';

$data = "JSON_CALLBACK(" . $data . ")";

echo $data;

?>

　　

jQuery的jsonp方法
type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数
js代码
$.ajax({

            url:'index.php',

            type:'get',

            dataType:'jsonp',

            //jsonp:'JSON_CALLBACK',

            jsonpCallback:'JSON_CALLBACK',

            success:function(data){

                console.log(data)

            }

        })
php代码
<?php

    $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';

    $data = "JSON_CALLBACK(" . $data . ")";

    echo $data;

?>

　　

相关文章