通过jsonp获取json数据实现AJAX跨域请求

使用JSONP技术实现AJAX跨域请求的步骤如下：

1.在主页面中定义一个回调函数，函数名保证唯一性。这个回调函数会接受JSON数据作为参数，并对其进行处理。

例如：

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

2.在主页面中创建一个script标签，标签的src属性指向JSON数据请求的网址链接，并且这个链接需要包含一个回调函数参数。

例如：

var scriptTag = document.createElement('script');
scriptTag.src = 'http://otherdomain.com/jsonp.php?callback=handleJsonData';
document.body.appendChild(scriptTag);

3.在JSON数据请求的网址链接中，使用回调函数参数的名称作为JSON数据返回时的函数名称，在JSON数据返回时直接返回相应的数据。

例如，服务器端提供下面的代码：

<?php
$data = array('name'=>'张三', 'age'=>30, 'sex'=>'男');
$json = json_encode($data);
$callback = $_GET['callback'];
echo $callback.'('.$json.')';
?>

这个代码会接收参数callback，并将返回的数据包裹在这个callback函数中。

4.当主页面中的请求响应成功时，handleJsonData函数将会得到JSON数据，并对其进行处理。这样就实现了通过JSONP技术实现AJAX跨域请求。

示例1：使用jQuery发起JSONP请求

$.ajax({
  url: 'http://otherdomain.com/jsonp.php',
  type: 'GET',
  dataType: 'jsonp',
  jsonpCallback: 'handleJsonData',
  success: function(data) {
    console.log(data);
  },
  error: function() {
    console.log('Error!');
  }
});

示例2：原生JavaScript发起JSONP请求

var scriptTag = document.createElement('script');
scriptTag.src = 'http://otherdomain.com/jsonp.php?callback=handleJsonData';
document.body.appendChild(scriptTag);

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