在網頁開發中，我們經常需要使用Ajax技術來實現頁面的異步更新，以提升用戶的交互體驗。而在實際應用中，我們通常將Ajax代碼直接寫在網頁的JavaScript部分中，但是是否可以將Ajax代碼寫成一個外部的JavaScript文件呢？答案是肯定的，我們可以將Ajax代碼寫成外部js文件，以便在需要的時候直接引用。下面將通過一些具體的實例來說明這個問題。

假設我們有一個網頁，需要通過Ajax技術來實現用戶輸入框中的內容自動匹配。在傳統的做法中，我們可以將Ajax代碼直接寫在網頁的JavaScript部分中：

function autoMatch() {
var inputText = document.getElementById("input_text").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據返回的內容處理邏輯
// ...
}
}
xhr.open("GET", "match.php?input=" + inputText, true);
xhr.send();
}

然后在用戶輸入框的onkeyup事件中調用此函數：

<input type="text" id="input_text" onkeyup="autoMatch()">

上述代碼可以實現用戶輸入時發送Ajax請求，然后根據返回的數據進行處理。但是，如果我們將這段代碼寫成一個外部的JavaScript文件，例如match.js，具體代碼如下：

// match.js
function autoMatch() {
var inputText = document.getElementById("input_text").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據返回的內容處理邏輯
// ...
}
}
xhr.open("GET", "match.php?input=" + inputText, true);
xhr.send();
}

然后在網頁中引用這個外部的JavaScript文件：

<script src="match.js"></script>
<input type="text" id="input_text" onkeyup="autoMatch()">

通過上述操作，我們成功將Ajax代碼寫成了一個外部的JavaScript文件，實現了代碼的模塊化和復用。這樣做的好處是，我們可以在其他的網頁中也引用這個外部的JavaScript文件，從而實現相同的功能，而不需要重復編寫Ajax代碼。

另外一個例子是，在一個電商網站的商品詳情頁中，我們需要實現用戶點擊“加入購物車”按鈕時，通過Ajax技術向服務器發送請求，并將商品添加到購物車中。傳統的做法是直接寫在網頁的JavaScript部分中：

function addToCart() {
var productID = document.getElementById("product_id").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據返回的內容處理邏輯
// ...
}
}
xhr.open("POST", "add_to_cart.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("product_id=" + productID);
}

然后在“加入購物車”按鈕的onclick事件中調用此函數：

<button onclick="addToCart()">加入購物車</button>

如果我們將這段代碼寫成一個外部的JavaScript文件，例如add_to_cart.js，具體代碼如下：

// add_to_cart.js
function addToCart() {
var productID = document.getElementById("product_id").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據返回的內容處理邏輯
// ...
}
}
xhr.open("POST", "add_to_cart.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("product_id=" + productID);
}

然后在網頁中引用這個外部的JavaScript文件：

<script src="add_to_cart.js"></script>
<button onclick="addToCart()">加入購物車</button>

通過上述操作，我們同樣成功將Ajax代碼寫成了一個外部的JavaScript文件，以實現代碼的模塊化和復用。

綜上所述，我們可以將Ajax代碼寫成外部的JavaScript文件，以實現代碼的模塊化和復用。這樣做的好處是，可以方便地在多個網頁中引用同一份外部的JavaScript文件，而不需要重復編寫Ajax代碼。當然，在使用外部JavaScript文件時，需要注意路徑的問題，確保瀏覽器能夠正確地加載這個外部文件。在實際開發中，我們可以將這些外部的JavaScript文件放在一個專門的目錄中，然后通過相對路徑或者絕對路徑進行引用。