AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下更新網頁的技術。它通過在后臺與服務器交換數據，實現異步更新頁面的功能。在前端開發中，經常使用AJAX向服務器提交GET請求來獲取數據。本文將討論如何使用AJAX向服務器提交GET請求，并通過舉例說明其用法。

在使用AJAX向服務器提交GET請求之前，需要先創建一個XMLHttpRequest對象。XMLHttpRequest是AJAX的核心，它用于與服務器進行數據交互。創建XMLHttpRequest對象的代碼如下：

var xhr = new XMLHttpRequest();

接下來，需要指定向服務器發送GET請求的目標URL。假設目標URL為https://example.com/data，可以將其作為參數傳遞給open()方法。代碼如下：

xhr.open("GET", "https://example.com/data", true);

然后，我們可以為XMLHttpRequest對象設置一個onreadystatechange事件處理程序。當服務器的響應狀態發生改變時，該事件處理程序將被觸發。代碼如下：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 在此處處理服務器響應的數據
} else {
// 在此處處理錯誤情況
}
}
};

現在，我們已經設置好了XMLHttpRequest對象的基本參數，接下來可以發送GET請求了。發送GET請求的代碼如下：

xhr.send();

當服務器返回響應時，可以在onreadystatechange事件處理程序中獲取服務器響應的數據。例如，如果服務器以JSON格式返回數據，可以使用JSON.parse()方法將其解析為JavaScript對象：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
// 在此處處理服務器響應的數據
} else {
// 在此處處理錯誤情況
}
}
};

通過以上步驟，我們可以通過AJAX向服務器提交GET請求，并從服務器獲取響應的數據。下面我們通過一個實例來說明AJAX向服務器提交GET請求的具體用法。

假設有一個電商網站，我們需要從服務器獲取某個商品的信息。我們可以通過AJAX向服務器提交GET請求來實現。首先，創建XMLHttpRequest對象：

var xhr = new XMLHttpRequest();

然后，指定目標URL：

xhr.open("GET", "https://example.com/products/123", true);

設置onreadystatechange事件處理程序：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var productInfo = JSON.parse(xhr.responseText);
// 在此處使用商品信息更新頁面
} else {
// 在此處處理錯誤情況
}
}
};

最后，發送GET請求：

xhr.send();

當服務器返回商品信息時，我們可以在onreadystatechange事件處理程序中獲取到該信息，并使用它來更新頁面。例如，可以將商品名稱、價格等信息顯示在頁面上。

通過以上示例，我們可以看出，使用AJAX向服務器提交GET請求非常簡單。只需創建XMLHttpRequest對象，設置相關參數，然后發送請求即可。AJAX的優勢在于無需刷新整個頁面，從而提升用戶體驗。我們可以在前端頁面使用AJAX向服務器提交GET請求來獲取數據，并將其展示在頁面上，從而實現動態更新的效果。