- 本文將探討如何使用 Ajax 打開一個新的網頁界面。通過使用 Ajax 技術，我們可以在不刷新整個頁面的情況下，動態加載并替換部分頁面內容，實現更快速的用戶體驗。接下來，我們將通過幾個示例來演示如何使用 Ajax 打開新的網頁界面。

首先，讓我們看一個簡單的例子。假設我們有一個網頁，其中包含一個列表，點擊列表中的每個項目應該打開一個新的網頁。為了實現這個功能，我們可以使用以下 Ajax 代碼：

function openNewPage(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.open(url, '_blank');
}
};
xhttp.open("GET", url, true);
xhttp.send();
}

在上面的代碼中，我們定義了一個名為 `openNewPage` 的函數，該函數接受一個參數 `url`，表示要打開的新網頁的 URL。然后，我們創建一個 XMLHttpRequest 對象，并設置其 `onreadystatechange` 事件的回調函數。

當 AJAX 請求的狀態發生變化時，回調函數將被觸發。當狀態為 4（即請求已完成）且響應的狀態碼為 200（即成功）時，我們使用 `window.open` 方法打開一個新的瀏覽器窗口或標簽頁，并傳入要打開的網頁的 URL。

讓我們再看一個稍微復雜一些的例子。假設我們有一個網頁，包含一個表單，用戶填寫完表單后，我們需要通過 Ajax 提交表單數據并打開一個新的網頁顯示提交結果。

以下是示例代碼：

function submitForm() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.open('result.html', '_blank');
// 或者使用以下代碼代替打開新網頁的方法：
// location.href = 'result.html';
}
};
xhttp.open("POST", "submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var formData = new FormData(document.getElementById("myForm"));
xhttp.send(formData);
}

在上面的代碼中，我們定義了一個名為 `submitForm` 的函數，該函數用于提交表單數據。首先，我們使用 XMLHttpRequest 對象創建一個請求，并設置其 `onreadystatechange` 事件的回調函數。

當 AJAX 請求的狀態發生變化時，回調函數將被觸發。當狀態為 4（即請求已完成）且響應的狀態碼為 200（即成功）時，我們使用 `window.open` 方法打開一個新的瀏覽器窗口或標簽頁，并傳入要打開的網頁的 URL。您還可以使用 `location.href` 方法將當前頁面的 URL 更改為新網頁的 URL。

在請求之前，我們使用 `xhttp.setRequestHeader` 方法設置請求的 Content-Type 為 `application/x-www-form-urlencoded`，表明請求的數據將以 URL 編碼的形式發送。

同時，我們創建一個 `FormData` 對象，傳入要提交的表單元素的父元素的 ID，以便獲取表單數據，然后使用 `xhttp.send` 方法發送請求。

通過這些簡單的示例，我們可以看到使用 Ajax 打開新的網頁界面并不復雜。這種方式不僅可以提供更快速的用戶體驗，還可以實現動態加載和更新網頁內容。