AJAX（Asynchronous JavaScript and XML）是一種用于在Web頁面上發送和接收數據的技術，它能夠在不刷新整個頁面的情況下更新頁面部分內容，提升用戶體驗。在本文中，我們將探討如何使用AJAX發送跨域請求來訪問數據庫。跨域請求指的是向不同域名或端口發送請求。

假設我們有一個具有以下結構的網站：一個用于展示商品信息的首頁，用戶可以通過點擊商品鏈接獲取更多詳細信息。商品信息存儲在一個名為"example.com"的數據庫中。我們的目標是在首頁上通過調用AJAX，向數據庫發送請求，并顯示商品詳情，而不需要刷新整個頁面。

$.ajax({
url: "http://example.com/products/123",
type: "GET",
dataType: "json",
success: function(response){
// 在此處更新頁面內容
...
},
error: function(){
alert("請求失敗，請稍后重試。");
}
});

上述代碼中，我們使用了jQuery庫中的ajax函數來發送GET請求。url參數指定了請求的目標地址，type參數指定請求類型為GET，dataType指定了期望的響應數據類型為JSON。當請求成功后，我們可以在success回調函數中處理響應數據，并更新頁面內容。如果請求失敗，則會調用error回調函數。

接下來，讓我們假設網站首頁的URL為"example.net"，我們需要向數據庫的"example.com"發送請求來獲取商品信息。由于跨域請求的限制，直接從"example.net"向"example.com"發送AJAX請求是不被允許的。為了解決這個問題，我們需要在"example.com"上進行一些配置。

一種常見的解決方案是使用CORS（跨域資源共享）。CORS允許服務器在響應中包含一些額外的頭信息，以告知瀏覽器該請求是被允許的。對于"example.com"，我們可以在服務器代碼中添加如下的響應頭信息：

Access-Control-Allow-Origin: http://example.net
Access-Control-Allow-Methods: GET, POST

上述響應頭信息告訴瀏覽器，"example.com"允許來自"http://example.net"域名的GET和POST請求。這樣一來，在"example.net"域名上的JavaScript代碼就可以發送AJAX請求到"example.com"了。

假設商品1的詳情信息的URL為"http://example.com/products/123"，我們可以使用AJAX在"example.net"上發送請求，并根據響應數據更新頁面：

$.ajax({
url: "http://example.com/products/123",
type: "GET",
dataType: "json",
success: function(response){
// 在此處更新頁面內容
...
},
error: function(){
alert("請求失敗，請稍后重試。");
}
});

在上述代碼中，我們只需要在url參數中指定完整的目標地址即可。當請求成功后，我們可以利用response中的數據更新頁面內容，例如更新商品名稱、價格等。

總結來說，通過使用AJAX發送跨域請求，我們可以在不刷新整個頁面的情況下，通過訪問數據庫來獲取所需的數據，并在頁面上進行展示。這提升了用戶的體驗，并使得網站更加動態和流暢。