JSONP需要完成的任务包括两个方面:
获取第三方服务器上的数据;
通过本地的JS代码对第三方的数据进行处理和渲染
浏览器虽然限制了Ajax的跨域通信,但允许在页面中插入动态的脚本元素。
所以可以通过第三方服务器生成动态的js代码来回调本地的js方法,而方法中的参数则由第三方服务器在后台获取,并以JSON的形式填充到JS方法当中,这也就是“JSON with Padding”中“padding”的真正意义。
应用过程当中,请求方(本地)向第三方服务器请求动态JS脚本,并将获取数据后需要回调的函数名以约定好的参数名(如callback等)发送给第三方服务器。
第三方服务器需要为JSONP请求开发相应的API,API中先获取JSONP请求需要的数据,然后以JSON的形式封装,再与请求方的回调函数名拼接在一起,动态生成请求方需要调用的JS代码。
要自己书写一个jsonp的方法,是要实现以下几个模块:
生成script标签
注册callback函数
返回一个Promise
移除script标签
移除callback函数