关键词

通过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);
}

本文链接:http://task.lmcjl.com/news/10795.html

展开阅读全文