方法1.通過PHP設定響應頭允許跨域(CORS方式)
CORS(跨域資源共享,Cross-Origin Resource Sharing)定義一種跨域通路的機制,可以讓AJAX實作跨域通路。CORS 允許一個域上的網絡應用向另一個域送出跨域 AJAX 請求。實作此功能非常簡單,隻需由伺服器發送一個響應頭即可
header(“Access-Control-Allow-Origin:*”); // 允許任何來源
header(“Access-Control-Allow-Origin:http://local.com”); //隻允許來自域名http://local.com的請求
代碼如下:
local.com域名檔案:
請求其他域名native.com:
請求的結果:成功
方法2.使用php做代理去請求第三方api接口
php是可以跨域的,我們利用ajax請求本域名中的php檔案,php再去請求第三方接口檔案,進而達到跨域目的。
php做代理請求:
ajax請求本域名php代理檔案:
請求結果:成功
将資料取出:
結果:
方法3.jsonp方法 隻能get
浏覽器隻對XHR(XMLHttpRequest)請求有同源請求限制,而對script标簽src屬性、link标簽ref屬性和img标簽src屬性沒有這這種限制,利用這個“漏洞”就可以很好的解決跨域請求。JSONP就是利用了script标簽無同源限制的特點來實作的,當向第三方站點請求時,我們可以将此請求放在<script>标簽的src屬性裡這就如同我們請求一個普通的JS腳本:
<script src="http://www.abc.com/index.php/?param1=1&callback=fnName">
</script>
JSONP實作跨域請求的原理簡單的說,
就是動态建立<script>标簽,然後利用<script>的src 不受同源政策限制來跨域擷取資料。
JSONP 由兩部分組成:
回調函數和資料。
回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而資料就是傳入回調函數中的 JSON 資料。
本站并提供一個回調函數來接收資料(函數名可約定,或通過位址參數傳遞)。
第三方網站産生的響應為json資料的包裝(故稱之為jsonp,即json padding),形如:
callback({“name”:“fegnjie”,“age”:“18”}),這樣本站浏覽器會調用callback函數,并傳遞解析後json對象作為參數。
第1步:動态建立<script>标簽,設定其src,回調函數在src中設定:
第2步:在頁面中,傳回的JSON作為參數傳入回調函數中,我們通過回調函數來來操作資料。
了解了JSONP的基本使用方法,我們在實作上面通過ajax調用豆瓣接口的需求,實作代碼如下:
在控制台,我們可以檢視到傳回的response資料格式為JSON對象格式的,具體需要取出哪些參數,可以根據自己的需要: