jsonp请求原生实现

最新推荐文章于 2025-03-23 12:22:26 发布

山外人家

最新推荐文章于 2025-03-23 12:22:26 发布

阅读量2.6k

点赞数

分类专栏：日常总结文章标签： jsonp js

本文链接：https://blog.youkuaiyun.com/liyujia6636/article/details/79123704

版权

日常总结专栏收录该内容

23 篇文章

订阅专栏

本文介绍了JSONP的工作原理，通过HTML script标签的跨域特性，利用前端传递的回调函数名，由服务器端PHP动态生成并返回JavaScript代码，从而实现数据交互。文中详细阐述了前端的JSONP请求过程，服务器端的实现方法，以及如何处理超时和避免影响后续数据返回的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp原理

通过html中的script标签的跨域能力实现与服务器端的数据交互，解决ajax不能跨域的缺点。后端使用php编程，前端传输一个回调函数的名字，php中通过echo这个函数，可以实现在前端执行这个回调函数。

前端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>
    <script>
        window.callback_jsonp = function (flag) {
            clearTimeout(window.jsonp_timer);
            console.log('请求成功');
        };
        // 3s超时处理,避免服务器端出错
        window.jsonp_timer = setTimeout(function () {
            window.callback_jsonp = function () {
                console.log('jsonp请求超时后返回数据');
            };
            console.log('jsonp请求超时');
        }, 3000);
        var new_script = document.createElement('script');
        new_script.src = "//localhost/index.php?callback=window.callback_jsonp";
        document.body.appendChild(new_script);
        console.log('jsonp请求');
    </script>
</body>
</html>

服务器端实现

<?php
    $data = true;
    $callback = $_GET['callback'];
    sleep(10);
    echo $callback.'('.json_encode($data).')';
?>

结果

首先输出“jsonp请求”，说明请求是异步的，不会阻塞线程
然后输出“jsonp请求超时”，说明超时处理有效
最后输出“jsonp请求超时后返回数据”，说明可以通过重置回调函数避免超时处理后，服务器成功返回数据，依然有回调函数中的代码执行