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>