在我們使用Javascript的過程中，經(jīng)常會遇到跨域訪問返回數(shù)據(jù)的問題。跨域的本質(zhì)是瀏覽器同源策略的限制，它違反了瀏覽器的同源策略，所以在跨域請求時，會受到瀏覽器的限制，有時候無法直接獲取到需要的數(shù)據(jù)。那么我們該如何解決這個問題呢？

舉例來說，我們可以在A頁面中通過ajax方式去請求B頁面的數(shù)據(jù)。然而，由于B頁面路徑與A頁面路徑不同（而且同源策略未被放寬），瀏覽器會采取防范措施，拒絕A對B的請求，從而導(dǎo)致跨域錯誤。這時，我們可以利用Javascript中的JSONP（JSON with Padding）技術(shù)來解決跨域請求數(shù)據(jù)的問題。

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method, url, true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//完成0-4五階段
if (xhr.status == 200) {
success && success(xhr.responseText); 
} else {
alert('出錯了！錯誤代碼：' + xhr.status + '，錯誤信息：' + xhr.statusText);
}
}
};
}

實現(xiàn)JSONP需要以下幾個步驟：

1. 在本地網(wǎng)頁中創(chuàng)建一個script元素，該元素的src屬性值可為跨域的url地址，同時該請求的callback參數(shù)值為一個全局函數(shù)名。

2. 服務(wù)器接收到該JSONP請求后，將數(shù)據(jù)傳遞給指定的callback函數(shù)，在函數(shù)內(nèi)部對數(shù)據(jù)進行處理，并將處理后的數(shù)據(jù)作為參數(shù)調(diào)用callback函數(shù)并返回給前臺頁面。

3. 前臺頁面接收到該JSONP請求后，執(zhí)行全局函數(shù)callback并將數(shù)據(jù)作為參數(shù)傳遞給該函數(shù)，從而完成數(shù)據(jù)請求和處理的過程。

示例代碼：

function getJsonData(jsonUrl,callback) { 
var script = document.createElement('script');
script.src   = jsonUrl + '?callback='+callback;
document.body.appendChild(script);
} 
function processData(data) { 
console.log(data); 
}
getJsonData('https://api.github.com/users/kvnlay', 'processData');

在請求URL后面加上參數(shù) ?callback=processData，這樣就會在返回結(jié)果的最后加上processData相應(yīng)的回調(diào)函數(shù)。

總之，在JavaScript中有很多實現(xiàn)跨域的方式。而JSONP是其中一種很好的跨域解決方案。本文簡單介紹了JSONP的基本原理，并通過代碼實例向讀者闡述了 JSONP 的使用技巧。希望讀者可以通過本文掌握 JavaScript 中跨域返回數(shù)據(jù)的技巧，使其在實際開發(fā)中能夠更好地實現(xiàn)業(yè)務(wù)需求。