這篇文章將介紹什么是Ajax以及如何使用它來控制文檔結構。Ajax是一種用于創建動態網頁的技術，它能夠通過在后臺與服務器進行數據交換，實現無需刷新整個頁面而更新部分頁面內容的功能。通過Ajax，我們可以實現對文檔結構的控制，以實現更好的用戶體驗。下面我們將通過一些具體的例子來說明。
首先，我們來看一個用Ajax控制文檔結構的例子。假設我們有一個網頁，其中包含一段文字和一個按鈕。當用戶點擊按鈕時，我們希望在頁面上動態加載一段新的文字。通過Ajax，我們可以使用JavaScript來處理這個請求，然后將新的文字插入到頁面的特定位置。下面是一個實現這個功能的示例代碼：
<p><body></p>
<p><div id="content">這是原始文本</div></p>
<p><button onclick="loadNewText()">加載新文本</button></p>
<p><script></p>
<p>function loadNewText() {</p>
<p> var xhttp = new XMLHttpRequest();</p>
<p> xhttp.onreadystatechange = function() {</p>
<p> if (this.readyState == 4 && this.status == 200) {</p>
<p> document.getElementById("content").innerHTML = this.responseText;</p>
<p> }</p>
<p> };</p>
<p> xhttp.open("GET", "newtext.txt", true);</p>
<p> xhttp.send();</p>
<p>}</p>
<p></script></p>
<p></body></p>在上面的代碼中，我們定義了一個名為loadNewText的函數，它會在用戶點擊按鈕時被觸發。在這個函數中，我們使用了XMLHttpRequest對象來發送一個GET請求，并指定了要請求的文本文件newtext.txt。當服務器返回響應時，我們檢查狀態碼和響應文本是否合法，并將新的文字插入到id為"content"的div元素中。通過這種方式，我們就實現了通過按鈕點擊動態加載新文本的功能。
除了動態加載文本，Ajax還可以用于控制文檔結構的其他方面，例如動態更新表單元素、實時驗證用戶輸入等。例如，考慮一個表單頁面，其中有一個輸入框和一個提交按鈕。當用戶在輸入框中輸入內容時，我們希望實時驗證輸入是否符合要求，并在頁面上顯示驗證結果。通過使用Ajax，我們可以將這個驗證過程與服務器進行通信，以便動態更新頁面上的驗證結果。下面是一個示例代碼：
<p><body></p>
<p><input type="text" id="input" oninput="validateInput()"></p>
<p><span id="result"></span></p>
<p><script></p>
<p>function validateInput() {</p>
<p> var input = document.getElementById("input").value;</p>
<p> var xhttp = new XMLHttpRequest();</p>
<p> xhttp.onreadystatechange = function() {</p>
<p> if (this.readyState == 4 && this.status == 200) {</p>
<p> document.getElementById("result").innerHTML = this.responseText;</p>
<p> }</p>
<p> };</p>
<p> xhttp.open("POST", "validate.php", true);</p>
<p> xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");</p>
<p> xhttp.send("input=" + input);</p>
<p>}</p>
<p></script></p>
<p></body></p>在上面的代碼中，我們定義了一個名為validateInput的函數，它會在用戶輸入框內容發生改變時被觸發。在這個函數中，我們首先獲取輸入框的值，然后使用XMLHttpRequest對象發送一個POST請求，并將輸入框的值作為參數發送給服務器端的validate.php文件。當服務器返回響應時，我們將驗證結果顯示在id為"result"的span元素中。通過這種方式，我們就實現了動態驗證用戶輸入的功能。
總的來說，Ajax是一種強大的技術，可以用于控制文檔結構，實現更好的用戶體驗。通過Ajax，我們可以在不刷新整個頁面的情況下，動態加載新內容、更新表單元素、實時驗證用戶輸入等。通過上述例子，我們可以看到Ajax在實現這些功能上的靈活性和便利性。希望本文能為您對Ajax的掌握提供一些幫助。