jsonp跨域请求详解

那么让我们来详细讲解一下“jsonp跨域请求详解”的完整攻略。

什么是jsonp?

JSONP（JSON with padding）是 JSON 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域请求数据，是一种非正式传输协议。

JSONP通过动态插入script标签的方式实现跨域请求，因为从不同域名下请求js文件是被允许的。JSONP传输的是JSON字符串，所以只支持get请求。而且由于是通过script标签请求的，所以服务器端返回的必须是一段有效的JavaScript代码，JSONP才能正确执行。

JSONP请求示例

比如我们要从其他网站获取一段JSON文本数据，则需要使用jsonp方式请求：

<script>
  function handleData(data){
    console.log(data)
  }
  var script = document.createElement('script');
  script.src = 'http://example.com/data.json?callback=handleData';
  document.head.appendChild(script);
</script>

这里我们创建一个handleData()函数来处理返回的数据，并且在script标签中指定了请求的url以及查询参数?callback=handleData。这里的handleData就是作为回调函数名传递到后台，后台处理完成后就会调用这个函数并传递数据。

后端代码示例：

<?php
$jsonData = '{
    "name": "张三",
    "age": 18
}';
$callback = $_GET['callback'];
echo $callback . '(' . $jsonData . ')';
?>

这里我们在php脚本中先定义了需要返回的JSON格式的数据$jsonData，然后通过$callback = $_GET['callback'];获取前端传递过来的回调函数名，并将数据通过echo $callback . '(' . $jsonData . ')'; 的形式输出到前端。此时前端页面中的handleData()函数就会被调用，传递JSON数据作为参数：handleData({"name": "张三", "age": 18})。

JSONP封装函数示例

通常我们为了方便复用，会封装一个JSONP请求的函数：

function jsonp(url,success){
  //1.创建一个随机的函数名，避免被缓存
  var fnName = 'json_' + Math.random().toString().substr(2); 
  //组装查询字符串添加回调函数名称
  var script = document.createElement('script');
    script.src = url + '?callback=' + fnName;
    //定义一个异步的callback函数
    window[fnName] = function(data){
    success&&success(data);
  };
   //请求返回后删除插入的script标签，并将回调函数删除
    script.onload = function () {
      this.remove();
      delete window[fnName];
    };
  document.body.appendChild(script);
}

这里我们定义一个jsonp()函数，它接收两个参数：请求的url和回调函数success。然后我们通过创建一个随机的函数名称，将函数添加到window对象的属性中，然后通过查询字符串将这个函数名称传递给后台。后台返回的数据就会自动调用函数，我们通过success()函数来处理返回数据。

这个jsonp()函数的返回结果就是调用success函数时所传入的data参数。

例如我们要请求服务器的数据：

jsonp("https://api.github.com/search/repositories?q=javascript",function(data){
  console.log(data);
})

这里的https://api.github.com/search/repositories?q=javascript是一个Github API接口，通过查询字符串传递需要搜索的关键词q=javascript，返回的是一段JSON格式的数据。我们在success函数中对这个数据进行处理。

这就是JSONP跨域请求的完整攻略，希望可以帮助你更好的理解和应用JSONP。