2023.04.07 - 用jQuery发起JSONP请求时jsonpCallback和success的回调区别在哪?

发布时间 2023-04-07 20:16:55作者: Yehuda

在使用 jQuery 发起跨域请求时,可以通过指定 dataTypejsonp 来实现 JSONP 跨域请求。此时,jQuery 会自动生成一个回调函数,并将其作为参数发送给服务器。服务器需要将返回数据包装在回调函数中,以便于客户端解析。

以下是一个简单的 jQuery 实现 JSONP 跨域请求的示例:

$.ajax({
  url: 'http://example.com/api/data',
  dataType: 'jsonp',
  jsonpCallback: 'handleData', // 指定回调函数名称
  success: function(data) {
    console.log(data);
  }
});

function handleData(data) {
  console.log(data);
}

其中 url 是需要请求的 URL;dataType 指定请求数据的类型,这里指定为 jsonpjsonpCallback 可以指定回调函数的名称,若不指定则 jQuery 自动添加一个随机生成的名称。

需要注意的是,Ajax 跨域请求需要服务器端支持JSONP格式的数据返回,且需要设置头部支持当前域名。因此服务器端需要设置相应的CORS或者JSONP机制,和前端进行协作。

如果需要发送其他类型的跨域请求,例如 CORS,可以通过 $.ajax() 函数的 crossDomainxhrFields 属性实现。但需要注意的是,CORS 跨域请求需要在服务端进行相应的设置,客户端只能通过 xhrFields 指定额外的属性。

需要注意的是,跨域请求可能会带来安全风险,因此需要在服务端进行一定的安全处理,例如跨域来源的校验等。

在 jQuery 发送 JSONP 请求时,指定的回调函数名称作为请求参数发送到服务器端,并由服务器端返回一段 JavaScript 代码,在浏览器端被解析并执行。

在上面的代码中,jsonpCallback 指定的回调函数名称为 handleData,这意味着 jQuery 会生成类似以下的请求 URL:

http://example.com/api/data?callback=handleData

服务器需要按照 JSONP 的约定,将返回数据包裹在 handleData 函数中,例如:

handleData([
  { text: 'item 1' },
  { text: 'item 2' },
  { text: 'item 3' }
])

当 jQuery 获取到这段 JavaScript 代码时,浏览器会将其当作一段脚本代码执行,在全局环境中定义了名为 handleData 的函数,并执行该函数。同时,该函数的参数值为服务器返回的数据,被传递给了 success 回调函数。

因此,handleDatasuccess 这两个回调函数的作用是类似的,都是用来处理返回的数据的。不同的是,handleData 函数是由服务器端生成的,而 success 回调函数是由客户端定义的。在请求成功后,jQuery 会先执行 handleData 函数,然后才执行 success 回调函数。