1. 程式人生 > >JS的jsonp是什麽?5分鐘學會jsonp跨域請求

JS的jsonp是什麽?5分鐘學會jsonp跨域請求

原生js span 資源 相同 con 服務器 color ucc ces

一、jsonp是什麽?

jsonp是解決跨域請求的一種技術。瀏覽器為了防止CSRF攻擊會采用同源策略(協議/主機/端口均相同)限制,對非同源發起http請求(即跨域請求)會被瀏覽器阻止。

二、jsonp跨域請求的原理?

script標簽的src屬性不受同源策略限制,用此方式對非同源服務器請求資源,返回的JS代碼會調用指定的函數,攜帶的參數就是所需的數據,這樣就完成了跨域請求。

三、原生JS的jsonp跨域請求:

首先聲明一個處理返回數據的函數,返回的JS代碼會調用此函數:
function dosomething(data) {
    console.log(
data)
}

然後創建script標簽添加到頁面,src設為請求地址,請求地址的參數規定了返回的函數名:

<script src="http://example.com/data.php?callback=dosomething"></script>

最後服務端會返回一段JS代碼,它會調用指定的函數,攜帶的參數就是所需的數據,至此跨域請求就完成了。

dosomething({name:"逐逸"});

四、jQuery的jsonp跨域請求:

這裏的success就跟上面的dosomething一樣。

$.ajax({
  url: "http://example.com/data.php",
  type: 
"GET", dataType: "jsonp", //指定服務器返回的數據類型 success: function(data) { console.log(data) } });

五、jsonp的優點與缺點:

優點:它不被同源策略限制,而且兼容性更好,在古董瀏覽器中都可以運行。 缺點:它只支持 GET 請求,而不支持 POST 等其他類型的 HTTP 請求。

JS的jsonp是什麽?5分鐘學會jsonp跨域請求