本文將介紹使用Ajax和JSONP技術實現跨域請求的方法。跨域請求是在瀏覽器中從一個域名下的頁面請求另一個域名下的數據，由于同源策略的限制，普通的Ajax請求無法實現跨域請求。而JSONP是一種繞過同源策略的方式，可以在不同域名之間進行數據通信。

在理解JSONP之前，首先需要了解同源策略。同源策略是瀏覽器對不同源之間的限制，它要求不同域名之間的JavaScript代碼不能進行直接的訪問。舉個例子，在網站A的頁面上的JavaScript代碼不能直接通過Ajax請求網站B的數據。

然而，使用JSONP技術可以繞過這個限制。JSONP是JSON with Padding（填充式JSON）的簡稱，它利用了<script>標簽的跨域特性來實現數據請求。具體來說，當我們在網站A的頁面中通過<script>標簽引用網站B上的一個URL時，瀏覽器會向網站B發送一個GET請求，并把返回的數據包裹在一個JavaScript函數中。這樣網站A就可以獲取到這個函數執行的返回值。

<script src="http://example.com/api?jsonp=callback"></script>

在上面的例子中，我們通過URL參數指定了一個名為jsonp的回調函數，服務器會在返回的結果中調用這個函數，并傳入數據作為參數。網站A需要在頁面中定義這個回調函數，以接收服務器返回的數據。

為了更好地理解JSONP的原理，我們以一個實際的例子來解釋。假設我們正在開發一個天氣預報的應用，在頁面上需要顯示某個城市的天氣信息，而我們的天氣數據接口位于weather-api.com。由于我們的應用部署在另一個域名下，無法直接訪問weather-api.com的接口。在這種情況下，我們可以使用JSONP來獲取天氣數據。

<script>
function displayWeather(data) {
var temperature = data.temperature;
var description = data.description;
document.getElementById('temperature').innerHTML = temperature;
document.getElementById('description').innerHTML = description;
}
</script>
<script src="http://weather-api.com/api?jsonp=displayWeather"></script>
<p>當前溫度：<span id="temperature"></span></p>
<p>天氣描述：<span id="description"></span></p>

在上面的代碼中，我們定義了一個名為displayWeather的回調函數，在此函數中將天氣信息顯示在頁面上。在<script>標簽中，我們通過jsonp參數指定了回調函數的名稱，weather-api.com在返回數據時會自動調用此函數。在頁面中，我們使用一個<span>標簽來展示實時溫度和天氣描述。

通過JSONP，我們成功地在網站A和網站B之間實現了跨域請求。當然，為了保證安全性，我們仍然需要謹慎處理從服務器返回的數據。行業中也經常使用CORS（跨來源資源共享）和代理服務器等技術來解決跨域請求的問題，這些內容將在以后的文章中繼續介紹。

總結起來，JSONP是一種通過<script>標簽實現跨域請求的技術，可以繞過同源策略的限制。通過指定回調函數的方式，JSONP允許我們獲取到不同域名下的數據，并在頁面中進行處理和展示。盡管JSONP有一定的局限性，但在特定的場景下它仍然是一種有效的跨域請求解決方案。