JSONP的工作原理


同源策略

跨域的集中方法:

1、服務器端發送請求,服務器作為中繼代理(此方法不理解)

2、iframe

3、script標簽

  通過動過動態生成script標簽,並將src指向目標源的方式(img標簽同樣具有src屬性,用img實現不行嗎?)

原生實現方式示例:

var url="www.xxx.baidu.com/aa.js",

  scriptTag=document.createElement("script");

scriptTag.src=url;

document.getElementByTagName("head")[0].appendChild(scriptTag);

function showSth(data){

  alert(data.a);

}

////////////aa.js

var aa={"a":"A"};

showSth(aa);

 

jsonp:

使用script標簽實現跨域訪問、可在url中指定回調函數、獲取json數據並在指定的回調函數中執行

jQuery實現jsonp

//$.getJSON

var url="wwwa.xxx.baidu.com/aa.js?callback=?"

$.getJSON(url,function(data){

  alert(data.a);

});

//$.ajax;

var url="www.xxx.baidu.com/aa.js"

$.ajax({

  url: url,

  dataType: jsonp,

  success:function(data){

    alert(data.a);

  }

});

jQuery 只支持get方式的jsonp實現

jsonp的缺點:

如果返回的數據格式有問題或返回失敗了,並不會報錯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM