AJAX（Asynchronous JavaScript and XML）即異步的 JavaScript 和 XML 技術，是一種通過使用現有的技術，使網頁與服務器進行異步通信的技術。簡單來說，可以通過 AJAX 技術在不重新加載整個頁面的情況下，以異步的方式與服務器進行數據交互。在開發中，我們經常需要將 JavaScript 代碼和 HTML 代碼分離，以方便代碼維護和閱讀。因此，將 AJAX 相關的 JavaScript 代碼單獨放在一個外部文件中是比較常見的做法。本文將介紹一種關于如何編寫 AJAX 的外部文件的方法。

在編寫 AJAX 的外部文件時，首先我們需要定義一個函數來處理 AJAX 請求。例如：

function handleAJAXRequest() {
// 這里是 AJAX 請求的處理邏輯
}

然后，我們可以在外部文件中使用 XMLHttpRequest 對象來創建一個 AJAX 請求。例如，我們可以使用 GET 方法向服務器發送一個 AJAX 請求，并將返回的數據顯示在頁面上：

function handleAJAXRequest() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("data-container").innerHTML = response.data;
}
};
xhr.send();
}

以上代碼示例中，我們使用 XMLHttpRequest 對象的 open() 方法來指定請求的方法和 URL，然后使用 onreadystatechange 事件處理函數來處理請求的響應。

在外部文件中，我們還可以通過定義全局函數，使其在頁面上的任何位置都可以調用。例如：

function showAlert(message) {
alert(message);
}

有時，我們可能需要在頁面加載完成后立即執行一些 AJAX 請求。為了實現這一點，我們可以使用 window 對象的 onload 事件來調用處理 AJAX 請求的函數。例如：

window.onload = function() {
handleAJAXRequest();
};

在外部文件中，我們還可以利用 AJAX 請求的異步特性來處理復雜的交互邏輯。例如，我們可以通過 AJAX 請求來獲取用戶輸入的數據，并根據輸入的內容動態更新頁面上的某些元素：

function handleUserInput() {
var input = document.getElementById("user-input").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("output").innerHTML = response.output;
}
};
xhr.send(JSON.stringify({ input: input }));
}

在上述示例中，我們通過 AJAX 請求傳輸用戶輸入的數據，并根據服務器返回的數據來更新頁面上的輸出。

總的來說，將 AJAX 相關的 JavaScript 代碼放在外部文件中，可以提高代碼的維護性和閱讀性。通過定義函數和全局變量，我們可以在頁面的任何位置使用這些功能。同時，結合 AJAX 請求的異步特性，我們可以實現更復雜的交互邏輯。