jQuery的JSONP教程

JSONP（JSON with Padding）是一种跨域数据交互的方法，它允许在浏览器和服务器之间进行跨域请求，这种方法的主要优点是它不受同源策略的限制，可以在不同的域名之间进行数据交换，在这篇文章中，我们将学习如何使用jQuery来实现JSONP。

我们需要了解JSONP的基本工作原理，当客户端发送一个跨域请求时，它会在URL中添加一个回调函数参数，服务器会将这个回调函数名作为参数插入到返回的数据中，然后将数据作为脚本返回给客户端，客户端收到数据后，会自动执行这个脚本，从而实现数据的跨域访问。

接下来，我们将使用jQuery来实现一个简单的JSONP请求，我们需要引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我们可以编写一个JSONP请求的函数：

function jsonp(url, data, callback) {
  // 将回调函数名作为参数添加到URL中
  url += (url.indexOf('?') > -1 ? '&' : '?') + 'callback=' + callback;
  // 发送GET请求
  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'jsonp',
    success: function(data) {
      // 执行回调函数，并将返回的数据作为参数传递
      window[callback](data);
    },
    error: function() {
      alert('请求失败');
    }
  });
}

现在，我们可以使用这个函数来发起一个JSONP请求：

// 定义回调函数名
var callbackName = 'myCallback';
// 定义全局变量，用于存储回调函数
window[callbackName] = function(data) {
  console.log(data);
};
// 发起JSONP请求
jsonp('http://example.com/data', {}, callbackName);

在这个例子中，我们首先定义了一个回调函数名myCallback，并将其作为全局变量存储在window对象中，我们调用jsonp函数，传入请求的URL、请求的数据和一个回调函数名，在jsonp函数中，我们将回调函数名添加到URL中，并设置请求类型为GET和数据类型为jsonp，我们使用jQuery的$.ajax方法发送请求，当请求成功时，我们会执行回调函数，并将返回的数据作为参数传递。