AJAX（Asynchronous JavaScript and XML）是一種現代化的前端技術，可以在不刷新整個網頁的情況下與服務器進行數據交互。本文將介紹如何使用AJAX創建信息并將其新增到數據庫中。

假設我們正在開發一個網頁應用程序，用戶可以在頁面上輸入一些個人信息，并點擊“提交”按鈕將這些信息保存到數據庫中。我們可以使用AJAX來實現這一功能，以提供更好的用戶體驗。

首先，我們需要在HTML文件中創建一個表單，用于接收用戶輸入的信息。例如，在一個注冊頁面上，我們可以讓用戶填寫用戶名、密碼和郵箱等信息。表單的結構可以像這樣：

<form id="registrationForm"><label for="username">用戶名:</label><input type="text" id="username" name="username"><br><label for="password">密碼:</label><input type="password" id="password" name="password"><br><label for="email">郵箱:</label><input type="email" id="email" name="email"><br><button type="button" onclick="submitForm()">提交</button></form>

在上述代碼中，我們使用了一個button元素，并給它添加了一個onclick事件來調用名為submitForm的JavaScript函數。接下來，我們需要在JavaScript文件中實現這個函數。

function submitForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求的處理函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功處理邏輯
console.log("信息已成功添加到數據庫中。");
} else if (xhr.readyState === 4 && xhr.status != 200) {
// 請求失敗處理邏輯
console.error("無法將信息添加到數據庫中。");
}
};
// 設置請求方法和URL
xhr.open("POST", "add-to-database.php", true);
// 設置請求頭
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 構造請求參數
var params = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password) + "&email=" + encodeURIComponent(email);
// 發送請求
xhr.send(params);
}

在上述代碼中，我們首先定義了三個變量，分別存儲了用戶輸入的用戶名、密碼和郵箱。然后，我們創建了一個XMLHttpRequest對象，用于與服務器進行通信。這個對象的onreadystatechange事件處理函數會在請求狀態發生變化時被調用。當請求狀態為4（請求已完成），并且狀態碼為200（請求成功）時，我們輸出“信息已成功添加到數據庫中。”；否則，輸出“無法將信息添加到數據庫中。”。

然后，我們使用open方法設置請求的方法（POST）和URL（add-to-database.php）。此外，我們還通過setRequestHeader方法設置了請求頭，以指明發送的數據類型。最后，我們使用send方法將請求發送到服務器，并傳遞了用戶輸入的信息作為請求參數。

在服務器端，我們可以使用PHP或其他服務器端語言來接收并處理這個請求。假設我們使用PHP，我們可以在add-to-database.php文件中編寫以下代碼：

// 連接到數據庫
$connection = mysqli_connect("localhost", "username", "password", "database");
// 檢查連接是否成功
if (mysqli_connect_errno()) {
die("無法連接到數據庫: " . mysqli_connect_error());
}
// 獲取POST參數
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
// 插入數據到數據庫
$query = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')";
if(mysqli_query($connection, $query)){
// 請求成功響應
http_response_code(200);
} else{
// 請求失敗響應
http_response_code(400);
}
// 關閉數據庫連接
mysqli_close($connection);

在上述代碼中，我們首先使用mysqli_connect函數連接到數據庫。然后，我們獲取了通過POST方法傳遞過來的參數，并將它們插入到名為users的數據庫表中。如果插入操作成功，則返回狀態碼200；否則，返回狀態碼400。最后，我們使用mysqli_close函數關閉了與數據庫的連接。

通過以上步驟，我們實現了一個使用AJAX創建信息并將其新增到數據庫的功能。這樣，用戶在填寫表單并點擊提交按鈕時，不會發生頁面的刷新，而是通過AJAX將信息發送到服務器，然后在后臺將其保存到數據庫中。這種方式既提升了用戶體驗，又提高了網頁的性能。