像很多網站一樣,我們也可能需要從不同的域名獲取數據。但是,由于瀏覽器的同源策略,我們無法直接訪問從其他域名獲取的數據。使用jQuery的Ajax可以幫我們解決這個問題。
jQuery的Ajax跨域請求需要在服務器上進行一些設置。我們可以在客戶端使用以下代碼發送跨域請求:
$.ajax({ url: 'http://example.com/data.json', dataType: 'jsonp', success: function(data) { console.log(data); } });
在服務器端,我們需要在響應頭中添加以下代碼:
Access-Control-Allow-Origin: *
這將允許我們的網頁從任何域名獲取數據。在PHP中,我們可以這樣實現:
header('Access-Control-Allow-Origin: *');
當我們發送跨域請求時,jQuery將使用JSONP技術代替標準Ajax。這將創建一個用于裝載數據的script標簽,并添加一個callback參數。服務器返回一個JavaScript函數調用,其中的數據作為參數傳遞給回調函數。我們可以這樣設置JSONP回調函數的名稱:
$.ajax({ url: 'http://example.com/data.json', dataType: 'jsonp', jsonpCallback: 'myCallback', success: function(data) { console.log(data); } });
當我們發送請求時,jQuery將使用myCallback作為回調函數的名稱。服務器應該返回以下JavaScript代碼:
myCallback({"name": "John", "age": 30});
這將調用myCallback函數,并傳遞一個對象作為參數。我們可以在myCallback函數中處理返回的數據。
上一篇外鏈式css