AJAX（Asynchronous JavaScript and XML）是一種用于創建快速和動態網頁的技術。它使用JavaScript和XML來實現異步的數據交換，可以實現無刷新頁面的功能。

在網頁開發中，經常遇到只需要刷新頁面的某個部分而不是整個頁面的需求。這時就可以使用AJAX來局部刷新<div>元素，提升用戶體驗和頁面性能。下面將通過幾個代碼案例來詳細解釋AJAX局部刷新<div>的實現。

第一個案例是在點擊按鈕時，通過AJAX請求后臺接口，然后將返回的數據展示在<div>中。代碼如下：

<code>
<p>HTML：</p>
<p><button id="btn">點擊加載數據</button></p>
<p><div id="content"></div></p>
<br>
    <p>JavaScript：</p>
<p>document.getElementById("btn").addEventListener("click", function() {</p>
<p>    var xhr = new XMLHttpRequest();</p>
<p>    xhr.onreadystatechange = function() {</p>
<p>        if (xhr.readyState === 4 && xhr.status === 200) {</p>
<p>            document.getElementById("content").innerHTML = xhr.responseText;</p>
<p>        }</p>
<p>    };</p>
<p>    xhr.open("GET", "api/data", true);</p>
<p>    xhr.send();</p>
<p>});</p>
</code>

在該例中，通過addEventListener()方法給按鈕綁定了一個點擊事件。當點擊按鈕時，會發送一個AJAX請求到后臺接口，獲取數據。在AJAX的回調函數中，判斷請求是否成功，并將返回的數據賦值給<div>的innerHTML屬性，從而實現局部刷新。

第二個案例是通過定時器周期性地獲取后臺數據并進行局部刷新。代碼如下：

<code>
<p>HTML：</p>
<p><div id="content"></div></p>
<br>
    <p>JavaScript：</p>
<p>setInterval(function() {</p>
<p>    var xhr = new XMLHttpRequest();</p>
<p>    xhr.onreadystatechange = function() {</p>
<p>        if (xhr.readyState === 4 && xhr.status === 200) {</p>
<p>            document.getElementById("content").innerHTML = xhr.responseText;</p>
<p>        }</p>
<p>    };</p>
<p>    xhr.open("GET", "api/data", true);</p>
<p>    xhr.send();</p>
<p>}, 1000);</p>
</code>

在該例中，使用setInterval()函數設置一個定時器，每隔一定時間就發送一個AJAX請求到后臺接口，并將返回的數據賦值給<div>的innerHTML屬性。通過周期性地發送請求，可以實現網頁的數據實時更新。

第三個案例是通過AJAX向后臺發送數據，并將返回的結果展示在<div>中。代碼如下：

<code>
<p>HTML：</p>
<p><button id="btn">點擊保存數據</button></p>
<p><div id="result"></div></p>
<br>
    <p>JavaScript：</p>
<p>document.getElementById("btn").addEventListener("click", function() {</p>
<p>    var data = {name: "張三", age: 20};</p>
<p>    var xhr = new XMLHttpRequest();</p>
<p>    xhr.onreadystatechange = function() {</p>
<p>        if (xhr.readyState === 4 && xhr.status === 200) {</p>
<p>            document.getElementById("result").innerHTML = xhr.responseText;</p>
<p>        }</p>
<p>    };</p>
<p>    xhr.open("POST", "api/save", true);</p>
<p>    xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");</p>
<p>    xhr.send(JSON.stringify(data));</p>
<p>});</p>
</code>

在該例中，點擊按鈕時會將數據{name: "張三", age: 20}以POST請求的方式發送到后臺接口，并將返回的結果賦值給<div>的innerHTML屬性。通過這種方式，可以實現與后臺進行數據交互，并動態顯示返回結果。

通過以上幾個代碼案例的說明，可以看出AJAX局部刷新<div>是實現Web頁面無刷新的重要技術之一。它提供了很大的靈活性，使得網頁可以根據用戶的操作或者定時器的觸發，自動更新其中的部分內容。通過合理地應用AJAX局部刷新<div>，可以讓我們的網頁在用戶體驗和性能方面都得到提升。