本文將介紹Ajax和JSONP這兩種使用原生JavaScript進行數(shù)據(jù)請求的方法。

Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下與服務(wù)器進行數(shù)據(jù)交互的技術(shù)。它可以實現(xiàn)異步加載數(shù)據(jù)，提高用戶體驗。通過使用原生JavaScript提供的XMLHttpRequest對象，我們可以發(fā)送HTTP請求到服務(wù)器，并在請求完成后處理服務(wù)器返回的數(shù)據(jù)。

JSONP（JSON with Padding）則是一種通過動態(tài)創(chuàng)建script標簽，從而繞過瀏覽器的同源策略限制進行跨域請求的方法。通常，在需要跨域訪問數(shù)據(jù)的場景中，我們可以利用這種技術(shù)來獲取遠程服務(wù)器返回的數(shù)據(jù)。

下面我們將通過舉例來說明如何使用原生JavaScript實現(xiàn)Ajax和JSONP。

Ajax示例：

<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 在這里處理服務(wù)器返回的數(shù)據(jù)
} else {
console.error('請求失敗');
}
}
};
xhr.open('GET', 'https://example.com/api/data', true);
xhr.send();
}
loadData();
</script>

上述代碼中，我們首先創(chuàng)建了一個XMLHttpRequest對象xhr，并設(shè)置了其onreadystatechange事件處理函數(shù)。然后，我們使用xhr.open方法指定了請求的方法和URL，并使用xhr.send方法發(fā)送了一個GET請求。最后，在xhr.onreadystatechange事件的處理函數(shù)中，我們根據(jù)xhr.readyState和xhr.status來判斷請求是否完成，如果完成并且成功，我們可以通過xhr.responseText來獲取服務(wù)器返回的數(shù)據(jù)。

需要注意的是，由于Ajax使用了異步加載數(shù)據(jù)的方式，因此需要在請求的時候設(shè)置xhr.open方法的第三個參數(shù)為true，表示異步請求。如果設(shè)置為false，則會變?yōu)橥秸埱螅瑫?dǎo)致頁面的阻塞。

JSONP示例：

<script>
function handleResponse(data) {
// 在這里處理服務(wù)器返回的數(shù)據(jù)
}
function loadData() {
var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);
}
loadData();
</script>

上述代碼中，我們首先定義了一個名為handleResponse的函數(shù)，該函數(shù)用于處理服務(wù)器返回的數(shù)據(jù)。然后，我們創(chuàng)建了一個script標簽，并通過設(shè)置其src屬性來指定請求的URL，將callback參數(shù)設(shè)置為handleResponse函數(shù)的名稱。最后，我們將script標簽添加到頁面的body元素中，瀏覽器會自動加載并執(zhí)行該script標簽內(nèi)的內(nèi)容，從而觸發(fā)handleResponse函數(shù)來處理服務(wù)器返回的數(shù)據(jù)。

需要注意的是，由于JSONP是通過動態(tài)創(chuàng)建script標簽來請求數(shù)據(jù)的方式，因此并不受瀏覽器的同源策略限制。通過在URL中添加callback參數(shù)，服務(wù)器返回的數(shù)據(jù)會被包裹在該函數(shù)的調(diào)用中，從而使得我們可以在本地腳本中獲取到服務(wù)器返回的數(shù)據(jù)。

綜上所述，通過使用原生JavaScript可以輕松實現(xiàn)Ajax和JSONP。Ajax適用于在同一域名下進行數(shù)據(jù)請求，而JSONP適用于跨域場景下通過動態(tài)創(chuàng)建script標簽來獲取數(shù)據(jù)。根據(jù)具體的需求和場景，我們可以選擇適合的方法來實現(xiàn)數(shù)據(jù)交互，提升用戶體驗。