AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上通過異步方式發送和接收數據的技術。它的原生方法主要包括XMLHttpRequest對象和fetch函數。數據庫連接是在網站開發中常見的一種操作，通過連接數據庫，我們可以實現數據的存儲、查詢、更新和刪除等功能。本文將探討如何使用AJAX的原生方法與數據庫進行連接，并且通過舉例子來加深理解。

首先，我們來看一下使用AJAX的XMLHttpRequest對象和數據庫連接的實例。假設我們有一個表單頁面，用戶可以在這個表單中輸入姓名和郵箱，提交后將數據保存到數據庫中。以下是實現的示例代碼：

var xhr = new XMLHttpRequest();  // 創建XMLHttpRequest對象
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {  // 請求成功
alert("數據保存成功！");
}
};
xhr.open("POST", "save_data.php", true);  // 打開一個POST請求，請求的URL是save_data.php
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 設置請求頭
var name = document.getElementById("name").value; // 獲取姓名輸入框的值
var email = document.getElementById("email").value; // 獲取郵箱輸入框的值
var data = "name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email); // 構建請求的數據
xhr.send(data);  // 發送請求

在上面的示例代碼中，我們首先創建了一個XMLHttpRequest對象，然后通過addEventListener方法注冊了一個狀態改變的回調函數。當請求狀態變為4（請求已完成）且響應狀態碼為200（成功）時，彈出一個提示框。接下來，我們使用open方法打開一個POST請求，并設置請求的URL為save_data.php。使用setRequestHeader方法設置請求頭信息，指定發送的數據為表單數據的編碼形式。最后，我們通過getElementById方法獲取了姓名和郵箱的輸入值，并使用encodeURIComponent方法對值進行編碼。最后，使用send方法發送請求。

另一種使用AJAX原生方法連接數據庫的方式是使用Fetch函數，它是ES6中新增的一個網絡請求的API。以下是Fetch函數和數據庫連接的實例代碼：

var name = document.getElementById("name").value; // 獲取姓名輸入框的值
var email = document.getElementById("email").value; // 獲取郵箱輸入框的值
fetch("save_data.php", {  // 發送POST請求
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"  // 設置請求頭
},
body: "name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email)  // 構建請求的數據
})
.then(function(response) {
if (response.ok) {  // 響應狀態碼為200（成功）
alert("數據保存成功！");
}
})
.catch(function(error) {
console.log(error);
});

在上面的例子中，我們使用fetch函數發送一個POST請求，請求的URL是save_data.php。通過設置method為"POST"，headers中的Content-Type為"application/x-www-form-urlencoded"，body中包含了需要發送的數據。使用.then方法處理響應結果，如果響應狀態碼為200，顯示一個提示框；否則，通過.catch方法捕獲錯誤并打印到控制臺。

總結來說，AJAX的原生方法提供了連接數據庫的能力，我們可以使用XMLHttpRequest對象和fetch函數來發送異步請求并接收響應數據。通過編寫相應的服務器端代碼，我們可以將數據保存到數據庫中，實現數據的存儲和查詢等功能。希望本文的舉例能夠幫助讀者更好地理解AJAX原生方法與數據庫連接的使用。