不用jquery實作ajax嵌套

AJAX技術是現代Web開發中非常重要的一部分，它允許我們動態載入內容、互動式通訊以及前後端資料交換。但是，隨著技術的不斷發展，越來越多的開發者開始使用不使用jQuery函式庫的原生JavaScript來實作AJAX請求，以避免額外的依賴關係。然而，不少初學者還不太熟悉原生JavaScript實作AJAX請求的方法，因此本文將分享如何不使用jQuery函式庫實作嵌套AJAX請求的技巧。

AJAX介紹

AJAX（非同步JavaScript和XML）是一種基於瀏覽器和伺服器之間非同步互動的技術，可以透過JavaScript發出HTTP請求並處理回應，使得前端頁面實現非同步通訊和局部刷新功能。 AJAX 最大的優點在於它能夠讓頁面的互動變得非常豐富，同時也能提升網站的效能。

使用原生JS實作巢狀AJAX請求

在傳統的Web開發中，我們經常需要使用AJAX技術來實作一些與伺服器的互動。有時候我們需要在第一個AJAX請求完成後再發送第二個請求，但是出於實現和效率等方面的考慮，我們並不想使用jQuery等庫來實現嵌套式的AJAX請求，本文將演示如何使用原生JavaScript實現此功能。

1. XMLHttpRequest對象

在使用原生JavaScript編寫AJAX時，我們需要使用 XMLHttpRequest 對象，也被稱為 “XHR”。 XMLHttpRequest 物件可以向伺服器發送請求並接收來自伺服器的回應。它可以支援多種HTTP方法，如GET，POST，PUT等。

範例程式碼如下：

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'url', true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4 && xhr.status == 200) { 
        console.log(xhr.responseText); 
    }
}; 
xhr.send();

2. Promise物件

Promise是ES6中的重要對象，它可以在非同步操作完成時執行特定的內容，實現了自動化的處理非同步操作的任務。基本的Promise使用方法如下：

const promise = new Promise((resolve, reject) => { 
    // 异步操作
    if (异步操作成功)
        resolve('Success');
    else
        reject('Failure');
}); 
promise.then((value) => { 
    console.log(value); 
}).catch((error) => { 
    console.error(error); 
});

3. 實作嵌套AJAX請求

接下來，我們使用Promise將多個AJAX請求串連起來，實作嵌套式的非同步請求，範例程式碼如下：

function ajax(url) { 
    return new Promise(function (resolve, reject) { 
        var xhr = new XMLHttpRequest(); 
        xhr.open('GET', url, true); 
        xhr.onreadystatechange = function() { 
            if (xhr.readyState === 4 && xhr.status == 200) { 
                resolve(xhr.responseText); 
            } 
        }; 
        xhr.send(); 
    }); 
} 

ajax('url1').then(function(result1) { 
    return ajax('url2' + result1); 
}).then(function(result2) { 
    return ajax('url3' + result2); 
}).then(function(result3) { 
    console.log(result3); 
}).catch(function(error) { 
    console.error(error); 
});

上述程式碼中，我們首先定義了一個ajax函數，該函數使用Promise 封裝了XMLHttpRequest執行非同步請求的過程，然後依序存取url1，存取結果作為存取url2時的參數，依序嵌套存取多個URL位址。

至此，我們成功地使用原生JavaScript實作了巢狀的AJAX請求，實作了優雅的非同步操作，而不依賴jQuery等外部函式庫。此方法在編寫效能最佳化和環境限制等方面都有很大的優勢，也是Web開發中不可忽視的重要技能點。

以上是不用jquery實作ajax嵌套的詳細內容。更多資訊請關注PHP中文網其他相關文章！