jsonp原理及使用

JSONP原理及使用攻略

什么是JSONP？

JSONP（JSON with Padding）是一种跨域请求数据的方式，原理是利用 script 标签没有跨域限制的特性来进行数据传输。JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。数据就是传入回调函数中的JSON数据。

JSONP的实现原理

JSONP通过动态创建 script 标签来实现跨域请求数据的目的。代码如下：

let script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);

function handleResponse(response) {
  console.log(response);
}

以上代码会生成如下的 script 标签并插入到页面中：

<script src="http://example.com/data?callback=handleResponse"></script>

请求的数据会在服务器上通过参数名为 callback 的 GET 参数传入一个函数名，该函数就是我们在页面中定义的回调函数。服务器接收到请求后根据参数名处理出要返回的数据，并将数据作为该函数的参数传入函数内部，直接在页面中调用回调函数，从而实现跨域数据的传输。

如何使用JSONP

要使用JSONP，我们需要在服务器端上提供一个支持JSONP的API。该API需要接收一个名为 callback 的GET参数，作为响应回调函数的名称。

在客户端上，我们需要定义一个回调函数来接收响应的数据，并将该回调函数名作为GET参数传给服务器端API。代码示例：

function handleResponse(response) {
  console.log(response);
}

let script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

以上代码会生成如下的 script 标签并插入到页面中：

<script src="http://example.com/api?callback=handleResponse"></script>

服务器收到请求后会将响应数据作为参数传递给 handleResponse 函数，从而实现跨域数据的传输。

示例1：使用百度地图API获取定位信息

下面我们通过一个例子来演示如何使用JSONP。这个例子是利用百度地图API获取定位信息。代码如下：

function handleResponse(response) {
  let address = response.content.address;
  console.log('你所在的地址是：' + address);
}

let script = document.createElement('script');
script.src = 'http://api.map.baidu.com/location/ip?ak=yourak&callback=handleResponse&coor=bd09ll';
document.body.appendChild(script);

其中 yourak 是你在百度地图开发者平台上申请的密钥，该示例请求的API地址为：

http://api.map.baidu.com/location/ip?ak=yourak&callback=handleResponse&coor=bd09ll

该API会返回一个JSON对象，例如：

{
  "status": 0,
  "content": {
    "address": "北京市海淀区中关村",
  }
}

示例2：使用豆瓣API获取图书信息

下面我们再来看一个豆瓣API获取图书信息的例子。代码如下：

function handleResponse(response) {
  let books = response.books;
  for (let i = 0; i < books.length; i++) {
    let book = books[i];
    console.log(book.title + ' - ' + book.author[0].name);
  }
}

let script = document.createElement('script');
script.src = 'https://api.douban.com/v2/book/search?q=javascript&callback=handleResponse';
document.body.appendChild(script);

该示例请求的API地址为：

https://api.douban.com/v2/book/search?q=javascript&callback=handleResponse

该API会返回一个JSON对象，例如：

{
  "books": [
    {
      "title": "JavaScript高级程序设计",
      "author": [
        {
          "name": "Nicholas C. Zakas"
        }
      ]
    },
    {
      "title": "JavaScript权威指南",
      "author": [
        {
          "name": "David Flanagan"
        }
      ]
    },
    // ...
  ]
}

总结

JSONP是一种简单易用的跨域请求数据的方式，它的原理是利用 script 标签没有跨域限制的特性来进行数据传输。要使用JSONP，我们需要在服务器端上提供一个支持JSONP的API，该API需要接收一个名为callback的GET参数作为响应回调函数的名称。客户端上我们需要定义一个函数来接收响应的数据，并将该函数名作为GET参数传给服务器端API。