Jsonp跨域请求服务端之动态替换页面数据

html页面代码

<a id='downloadAndroid' class="button-text " href="http://tqy.res.***.com/freeapk/tqy.apk" target="_bank"><img src="http://www.tqy.com/images/android_08ced5b.png"/> Android 下载</a>

<script>
   function queryAppVersion(obj){
       if(obj.code==200){
           document.getElementById('downloadAndroid').setAttribute('href',obj.url);
       }else{
           console.log(obj.message);
       }
   }
   window.onload = function(e){
       var script = document.createElement('script');
       script.src = 'https://tqy.***.com/v3/app_version/get?callback=queryAppVersion';
       script.onerror = function(e){
           console.log(e.responseText);
       };
       document.body.insertBefore(script,document.body.firstChild);
   }
</script>

原理

1、利用script标签可以跨域访问 2、script标签中定义了一个queryAppVersion方法，window.onload使得页面  一加载的时候就执行该函数，在html中增加了“<script src="https://tqy.***.com/v3/app_version/get?callback=queryAppVersion"></script>”，其中src请求服务端的Controller 3、以上请求返回的结果是queryAppVersion({"code":200,"releaseNote":"","url":"http://tqy.res.***.com/apk/tqy-release-v3.2.4-c25-160707_signed.apk","versionName":"3.2.4.c1607070934u"}); 4、由于     在 script标签中已经定义了queryAppVersion方法，冰球返回的结果存放在script里面，相当于执行了window.queryAppVersion方法,其中传入的参数就是{"code":200,"releaseNote":"","url":"http://tqy.res.***.com/apk/tqy-release-v3.2.4-c25-160707_signed.apk","versionName":"3.2.4.c1607070934u"} 5、服务端所要做的事就是，将json返回数据包装下，变成queryAppVersion();这种格式，这样才会变成调用方法的格式

服务端代码

@RequestMapping(value = {"/v{version}/app_version/get", "/v3.2/app_versions.jsonp"}, produces = {"text/javascript; charset=UTF-8"})
   @ResponseBody
   public String getLatest(@RequestParam(value = "version_code", required = false, defaultValue = "") String code,
                           @RequestParam(value = "callback", required = false, defaultValue = "queryAppVersion") String callback) {
       AppVersionVo vo = new AppVersionVo();
       callback += "(%s);"; 
       vo.setCode(200);
       vo.setUrl(DEFAULT_URL);
       return String.format(callback, JSON.toJSONString(vo));

}

效果
这样，原先的标签就变成了

<a id="downloadAndroid" class="button-text " href="http://tqy.res.***.com/apk/tqy-tqyrelease-v3.2.4-c25-160707_signed.apk" target="_bank"><img src="http://www.tqy.com/images/android_08ced5b.png">Android 下载</a>