對于大部分 web 開發者來說，AJAX 是非常常用的技術，它能夠在不刷新整個頁面的情況下，通過異步請求與服務器進行通信，從而實現動態更新頁面內容的效果。那么，我們在編寫代碼時，一般將 AJAX 相關的代碼寫在什么地方呢？本文將詳細介紹 AJAX 代碼一般寫在哪里，并通過舉例說明。
1. 寫在 HTML 文件內的<script>
最常見的情況是將 AJAX 相關的代碼直接寫在 HTML 文件內的<script>標簽內部。例如：
<!DOCTYPE html>
<html>
<head>
<title>AJAX 示例</title>
<script>
function fetchContent() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('content').innerHTML = data.content;
}
};
xhr.send();
}
</script>
</head>
<body>
<h1>動態內容展示</h1>
<div id="content"></div>
<button onclick="fetchContent()">獲取內容</button>
</body>
</html>在上面的例子中，我們將 AJAX 相關的代碼直接寫在了 HTML 文件內部的<script>標簽中。該腳本定義了一個名為fetchContent()的函數，當點擊按鈕時觸發該函數，并通過 AJAX 請求獲取服務器的數據，然后將數據顯示在頁面上的指定元素中。
2. 單獨的 JS 文件
除了將 AJAX 相關的代碼直接寫在 HTML 文件內部外，也可以將其獨立為單獨的 JavaScript 文件，在 HTML 文件中引入該文件。我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>AJAX 示例</title>
<script src="ajax.js" defer></script>
</head>
<body>
<h1>動態內容展示</h1>
<div id="content"></div>
<button onclick="fetchContent()">獲取內容</button>
</body>
</html>在上述例子中，我們將 AJAX 相關的代碼抽離出來，放置在名為 "ajax.js" 的文件中。通過<script>標簽的src屬性引入該文件。同時，我們使用defer屬性，使得引入的 JavaScript 文件在 HTML 文件完全解析完成后再執行。
總結來說，AJAX 相關的代碼可以直接寫在 HTML 文件內部的<script>標簽中，或者將其單獨放置在獨立的 JavaScript 文件中，通過<script>標簽引入。具體選擇哪種方式，要根據實際情況而定。如果 AJAX 相關的代碼較為簡單，且只在某個具體頁面中使用，直接寫在 HTML 文件內部可能更為方便。如果代碼較為復雜或者需要在多個頁面中復用，將其放置在單獨的 JS 文件中更為合適。