JavaScript用JSONP跨域请求数据实例详解

2023年6月11日上午8:03 • JavaScript

接下来我会为您详细讲解“JavaScript用JSONP跨域请求数据实例详解”的完整攻略。

一、什么是JSONP

JSONP(即JSON with Padding)是一种跨域数据请求的解决方案，它是基于script标签的异步请求来实现的，它并不是一种新的数据格式，而是一种用来解决浏览器跨域数据请求的数据处理技术。

JSONP的实现原理比较简单，就是通过一个script标签的src属性来请求一个带有callback参数的URL，该URL的返回值是一个JavaScript函数调用，调用的参数就是需要获取的数据，因为JavaScript函数可以跨域调用，所以JSONP可以顺利解决跨域的问题。

二、JSONP的实现步骤

下面我们来详细介绍一下JSONP的实现步骤，以及一个JSONP跨域请求数据的实例。

1. 创建一个回调函数

在客户端（浏览器）定义一个回调函数，来处理服务器返回的数据。回调函数的名称可以自定义，比如我们定义了一个名称为jsonpCallback的函数。

function jsonpCallback(data){
  //处理返回的数据
}

2. 构造动态script标签

在客户端通过JavaScript动态生成一个script标签，标签的src属性指向需要获取数据的URL，同时在URL的末尾加上callback参数，其值为我们定义的回调函数名。

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=jsonpCallback';
document.getElementsByTagName('head')[0].appendChild(script);

3. 在服务器端返回数据

服务器端通过获取callback参数的值，并将返回的数据以JavaScript函数调用的方式返回，回调函数名就是callback参数的值。以下是服务器端返回JSONP数据的PHP代码示例：

$data = array('name'=>'Tom','age'=>18);
$jsonp = $_GET['callback'] . '(' . json_encode($data) . ')';
header('Content-Type:application/javascript');
echo $jsonp;

4. 处理返回的数据

最后，当服务器返回数据时，回调函数就会自动执行，将返回的数据作为参数传递给回调函数，我们就可以在回调函数中处理返回的数据了。

function jsonpCallback(data){
  console.log(data);
}

三、JSONP跨域请求数据的示例

以下是一个简单的JSONP跨域请求数据的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSONP跨域请求示例</title>
  <script>
    function jsonpCallback(data){
      console.log(data);
    }

    function getData(){
      var script = document.createElement('script');
      script.src = 'http://example.com/api?callback=jsonpCallback';
      document.getElementsByTagName('head')[0].appendChild(script);
    }
  </script>
</head>
<body>
  <button onclick="getData()">获取数据</button>
</body>
</html>

该示例中定义了一个名为jsonpCallback的回调函数和一个名为getData的函数，当点击按钮时，会调用getData函数，该函数会动态生成一个script标签，标签的src属性指向http://example.com/api接口，并带上callback参数，接口返回数据时会自动调用jsonpCallback函数，将返回的数据传递给它。最后控制台会输出接口返回的数据。