AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行數據交換而不干擾到現有頁面的方法，使得網頁可以在不重新加載整個頁面的情況下更新部分內容。建立服務器的連接是使用 AJAX 的關鍵步驟之一。本文將介紹如何使用 AJAX 建立服務器的連接，并通過舉例說明其用法。

首先，我們來看一個簡單的例子。假設我們有一個簡單的網頁，其中包含一個按鈕，當用戶點擊該按鈕時，網頁會向服務器發送一個請求，并將服務器返回的數據顯示在頁面上。以下是實現這個功能的示例代碼：

<script>
function fetchData() {
var xhr = new XMLHttpRequest();    // 創建一個 XMLHttpRequest 對象
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;    // 將服務器返回的數據顯示在頁面上
}
};
xhr.open("GET", "server.php", true);    // 打開一個與服務器的連接
xhr.send();    // 發送請求
}
</script>
<button onclick="fetchData()">點擊獲取數據</button>
<div id="result"></div>

在上面的代碼中，我們使用了 XMLHttpRequest 對象來建立與服務器的連接。首先，我們創建了一個 XMLHttpRequest 對象（xhr），然后設置了其 onreadystatechange 屬性，當 readyState 的值變為 4（即服務器請求完成）并且狀態碼為 200（即請求成功）時，執行一段代碼，將服務器返回的數據顯示在頁面上。接下來，我們調用 open 方法，通過 GET 請求方式打開與服務器的連接，并將服務器的 URL（server.php）作為參數傳入。最后，我們調用 send 方法發送請求。

上述示例中的服務器端代碼如下：

<?php
echo "Hello, Ajax!";    // 返回一個簡單的字符串
?>

當用戶點擊網頁上的按鈕時，頁面將向服務器發送一個 GET 請求，服務器接收到請求后，返回一個字符串（"Hello, Ajax!"），并將其顯示在頁面上。

除了 GET 請求，我們還可以使用 POST 請求來建立服務器的連接。以下是一個使用 POST 請求的示例：

<script>
function sendData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    // 設置請求頭部
xhr.send("name=John&age=25");    // 發送請求，并傳遞參數
}
</script>
<button onclick="sendData()">點擊發送數據</button>
<div id="result"></div>

在上面的代碼中，我們使用了 send 方法發送了一個 POST 請求，并在 send 方法的參數中傳遞了參數 "name=John&age=25"。服務器可以通過 $_POST 來接收這些參數。

通過以上的例子，我們可以看到使用 AJAX 建立服務器的連接可以非常簡單、靈活地在頁面上獲取和傳遞數據，并實現動態內容更新的效果。這對于實現無刷新加載、動態加載數據等功能非常有用。