Ajax 之跨域访问与 JSONP

最新推荐文章于 2021-12-25 00:11:12 发布

转载最新推荐文章于 2021-12-25 00:11:12 发布 · 178 阅读

文章标签：

#Ajax 之跨域访问与 JSONP

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种利用JSONP解决跨域数据访问问题的方法。通过JavaScript与PHP实现了简单的跨域请求示例，并展示了如何使用jQuery简化跨域请求的过程。

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

Ajax 之跨域访问与 JSONP

前言

　　同源策略的限制，使得ajax无法发出跨域请求。在许多情况下，我们需要让ajax支持跨域。以下是其中一种解决方案（JSONP）。JSONP解决了跨域数据访问的问题。

　　在html中，具有src属性的标签支持跨域，例如

实现

使用javascript与php简单实现如下：

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script>
    ajax("http://localhost/province/json.php");
    function ajax(url) {
        var script = document.createElement("script");
        script.src = url + "?jsonp=callback";
        document.getElementsByTagName("head")[0].append(script);
    }
　　// 编写回调函数
    function callback(data) {
        alert(data.msg);
    }
</script>
</body>
</html>

后端代码：

<?php
header("Content-Type", "application/json");
$fun = $_REQUEST["jsonp"]; // 获取调用的方法名
echo "$fun({'msg': 'jsonp'});";

使用jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
    $.ajax({
        url: "http://localhost/province/json.php",
        type: "get",
        data: {},
        dataType: "jsonp",
        jsonp: "jsonp",
        success: function (data) {
            alert(data.msg);
        },
        error: function () {//...}
    });
</script>
</body>
</html>

使用jquery提供的$.ajax可以快速实现跨域请求。首先设置dataType为”jsonp”，表示使用jsonp。参数jsonp是传递将被调用函数名，服务器通过使用该属性的值来获得函数名。使用jquery后也不需要自己写调用函数了，它将由jquery自动生成，正在的json数据将通过success属性回调自定义函数进行传递。