JS跨域交互(jQuery+php)之jsonp使用心得

下面我为你讲解一下“JS跨域交互(jQuery+php)之jsonp使用心得”的完整攻略。

什么是跨域？

跨域（cross-origin）是指在当前请求资源（如 javascript、css、json、xml 等）的文档或脚本所属窗口（window、iframe 或 frame）与请求资源所在文档的域（domain）不同情况下的访问。

JSONP 原理

JSONP，全称是 JSON with Padding，是 JSON 的一种“使用模式”，可以让数据从服务器端传到客户端，以便客户端像使用本地 JSON 数据一样使用它。JSONP 是通过动态创建 script 标签的方式来实现的。

JSONP 的实现原理是在前端代码中声明一个新的函数，该函数在页面加载时就会立即执行，该函数的名称与后端接口返回数据时所执行的回调函数名称一致。当拿到服务器返回的数据时，服务器端会将数据包裹在调用该函数的函数调用语句（即，该函数加上一对小括号）中一并返回给前端。这样，前端页面就能获取到服务器端返回的数据了。

JSONP 的使用

使用 JSONP，首先需要一个回调函数，该回调函数的名称需要与后端接口返回数据时所执行的回调函数名称一致。

下面是一个简单的使用示例代码：

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

// 动态创建 script 标签，并设置 src 属性
var scriptNode = document.createElement('script');
scriptNode.src = 'http://example.com/api/getData?callback=jsonpCallback';

// 将 script 标签插入到页面中
document.body.appendChild(scriptNode);

其中，http://example.com/api/getData 是我们想要请求的后端接口，jsonpCallback 是我们定义的回调函数名称。后端接口返回的数据应该类似于这样：

jsonpCallback({
  status: 200,
  data: {...}
});

返回的数据会被包裹在回调函数中，并且作为参数传入该函数。之后就可以在回调函数中处理数据了。

jQuery 中 JSONP 的使用

在 jQuery 中，使用 JSONP 更为方便。只需要设置 dataType 为 jsonp，并且在 data 中设置回调函数名称即可。

下面是一个使用 jQuery 实现的 JSONP 示例代码：

$.ajax({
  url: 'http://example.com/api/getData',
  dataType: 'jsonp',
  jsonpCallback: 'jsonpCallback',
  success: function(data) {
    // 处理返回的数据
  },
  error: function() {
    // 处理错误
  }
});

其中，url 是我们想要请求的后端接口，jsonpCallback 是我们定义的回调函数名称。当请求成功时，success 回调函数会被执行，并且返回的数据会作为参数传入该函数。

PHP 中 JSONP 的使用

在 PHP 中，实现 JSONP 的关键是在输出内容前需要打印出回调函数的名称和括号。

下面是一个简单的实现 JSONP 的 PHP 示例代码：

<?php
$data = array('status'=>200, 'message'=>'Hello, World!');

// 获取回调函数名称
$callback = $_GET['callback'];

// 输出 JSONP 数据
echo $callback . '(' . json_encode($data) . ')';
?>

当该 PHP 文件被访问时，将返回类似这样的数据：

jsonpCallback({"status": 200, "message": "Hello, World!"})

其中，jsonpCallback 就是前端定义的回调函数名称，JSON 数据应该通过 json_encode 方法进行编码。

示例一：获取天气数据

下面是一个简单的示例，通过使用 JSONP 获取天气数据：

// 定义回调函数
function weatherCallback(data) {
  $('#city').html(data.city); // 显示城市名称
  $('#condition').html(data.condition); // 显示天气情况
}

// 获取天气数据
$.ajax({
  url: 'http://example.com/api/getWeather',
  dataType: 'jsonp',
  jsonpCallback: 'weatherCallback',
  error: function() {
    $('#city').html('获取失败'); // 显示错误信息
    $('#condition').html('获取失败'); // 显示错误信息
  }
});

示例二：获取豆瓣电影数据

下面是一个简单的示例，通过使用 JSONP 获取豆瓣电影数据：

// 定义回调函数
function movieCallback(data) {
  var html = '';
  $.each(data.subjects, function(index, subject) {
    html += '<li>';
    html += '<img src="' + subject.images.medium + '">';
    html += '<h2>' + subject.title + '</h2>';
    html += '<p>' + subject.year + ' / ' + subject.directors[0].name + ' / ' + subject.genres.join('、') + '</p>';
    html += '</li>';
  });
  $('#movie-list').html(html); // 显示电影列表
}

// 获取豆瓣电影数据
$.ajax({
  url: 'http://api.douban.com/v2/movie/top250',
  dataType: 'jsonp',
  jsonpCallback: 'movieCallback',
  error: function() {
    $('#movie-list').html('获取失败'); // 显示错误信息
  }
});

以上就是“JS跨域交互(jQuery+php)之jsonp使用心得”的完整攻略，希望对你有所帮助。