使用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);
}
本文链接：http://task.lmcjl.com/news/10795.html