JSONP Ajax请求

JSONP允许异步加载数据,即使是从其他域中的服务器也是如此


JSONP用于从另一个域中的服务器异步请求数据:

其原理是借助script标签无视域名限制,可以从任何域名加载js文件的特性,来实现了数据的跨域访问。 首先需要在全局注册一个回调函数,如response, 该函数需要在window的作用域下,可以在全局使用方法名直接调用, 然后使用script标签,并把回调函数的方法名传递给跨域的服务器。 跨域的服务器接收到参数后,会将数据拼接为一个js文件返回给浏览器。 js文件类容大致为response(data), data就是服务器返回的数据,其实就是调用了response。 浏览器得到返回的js文件后就会去执行javascript代码, 就会去执行response函数,从而将流程串联起来,达到跨域请求数据的功能


// define a callback function, which accepts the returned JSON data as its only argument
function response(data) {
    // JSON data in form of a JavaScript object
    console.log(data);
}

// create a script tag with the external request URL
// include "response" as value of the GET param "callback" in the URL
var script = document.createElement('script');
script.src = 'https://foo.bar/api/?callback=response';
document.body.appendChild(script);
      

成功检索数据后,将立即调用功能“响应”。 它接受从服务器返回的已解析JSON数据作为其第一个也是唯一的参数。