日常開發網頁中，時常遇到跨域問題，通常解決辦法：後端提供的接口支持jsonp格式，前端采用dataType：jsonp。

一：Jquery封裝的AJAX，dataType：jsonp格式的方法：

 1 $.ajax({
 2     type : "get",
 3     async:false,
 4     url : "",
 5     dataType : "jsonp",
 6     jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認為:callback)
 7     jsonpCallback:"success_jsonpCallback",//
 
自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名,但是不能為空
 8     success : function(data){
10        console.log(data)     27     },
28     error:function(){
29        alert(‘fail‘);
30     }
31 })

二：使用原生js封裝jsonp接口，同時應用Promise對象，可以鏈式調用

window.STATE_CALLBACK = {
  uid:new Date - 0
}
function jsonp(url,param,callbackName){
  
 
return new Promise(function(resolve,reject){
    callbackName = callbackName || ‘jsonpCallback‘
    var script = document.createElement(‘script‘)
    script.setAttribute(‘async‘,‘async‘)
    var name = [‘ymwangel‘,STATE_CALLBACK.uid++].join(‘‘)
    param[callbackName] = [‘STATE_CALLBACK.‘,name].join(‘‘)
    script.src 
 
= paramConcatUrl(url,param)
    document.body.appendChild(script)
    STATE_CALLBACK[name] = function(data){
      delete STATE_CALLBACK[name]
      document.body.removeChild(script)
      resolve(data)
    }
    script.onerror = function(e){
      reject(e)
    }
  })
}

原生js封裝jsonp的函數，更能體現jsonp實現跨域的原理：在頁面中創建script標簽，設置script的async、src屬性，然後，將script標簽插入到body中，最後當響應請求成功，獲取到返回的數據後，刪除之前插入的script標簽即可。

jsonp解決跨域問題