Ajax学习：解决跨域_JSONP

作者：System 时间：2024年08月21日分类：所有,ajax 字数：970

JSONP（JSON with Padding）是一种跨域请求数据的方式，它通过动态创建<script>标签请求一个带有回调函数的URL来实现。

以下是一个简单的JSONP请求实现：




<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
</head>
<body>
    <div id="content"></div>
    <script>
        // 定义一个回调函数
        function handleResponse(data) {
            // 这里的data是从远程服务器返回的JSON数据
            var content = document.getElementById('content');
            content.innerHTML = "Name: " + data.name;
        }
 
        // 创建script标签，并设置其src属性为包含回调函数的URL
        var script = document.createElement('script');
        script.src = 'http://example.com/api?callback=handleResponse';
        document.head.appendChild(script);
    </script>
</body>
</html>

在上面的例子中，我们假设http://example.com/api是跨域服务的URL，并且它会接受一个名为callback的查询参数，该参数指定了用于包装JSON响应的函数名。服务器端需要按照这种方式返回数据：




handleResponse({"name":"John Doe","age":30});

这样，当<script>标签加载并执行这个响应时，handleResponse函数就会被调用，并且会收到一个包含所需数据的JSON对象。

Ajax学习：解决跨域_JSONP

评论已关闭

推荐阅读