AJAX（Asynchronous JavaScript and XML）是一種在Web頁面中使用JavaScript和XML實現異步數據傳輸的技術。它可以在不刷新整個頁面的情況下更新頁面的一部分內容，從而提升用戶體驗。在文章中，我們將探討如何使用AJAX刷新不同頁碼的文章。
假設我們有一個博客網站，每頁顯示10篇文章。我們希望能夠在頁面上方添加一個分頁器，以便用戶瀏覽不同頁碼的文章。當用戶點擊某個頁碼時，頁面會發起AJAX請求，只刷新顯示文章列表的部分內容。
示例代碼：
```javascript
function getArticles(page) {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方法和請求地址
xhr.open('GET', '/articles?page=' + page, true);
// 注冊請求完成時的回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 取出返回的文章列表
var articles = JSON.parse(xhr.responseText);
// 更新頁面顯示的文章列表
var articleList = document.getElementById('article-list');
articleList.innerHTML = '';
articles.forEach(function(article) {
var articleItem = document.createElement('li');
articleItem.textContent = article.title;
articleList.appendChild(articleItem);
});
}
};
// 發送請求
xhr.send();
}
```上述代碼定義了一個名為getArticles的函數，它接受一個參數page，表示要請求的頁碼。函數內部創建了一個XMLHttpRequest對象，使用open方法設置請求方法為GET，請求地址為/articles?page=加上頁碼。然后，通過onreadystatechange事件注冊了一個請求完成時的回調函數。當XMLHttpRequest的狀態變為“完成”（readyState === XMLHttpRequest.DONE）且請求返回的狀態碼為200時，說明請求成功，此時通過JSON.parse方法解析返回的文章列表，并更新頁面顯示的文章列表。
在HTML代碼中，我們需要添加一個分頁器，每個頁碼都調用getArticles函數，并傳入對應的頁碼：
示例代碼： ```html
在這個例子中，我們添加了一個pagination容器，每個頁碼都是一個按鈕，并使用onclick事件調用getArticles函數。當用戶點擊某個頁碼按鈕時，該頁碼會作為參數傳遞給getArticles函數，并發起相應的AJAX請求。
總結來說，我們可以利用AJAX技術來刷新不同頁碼的文章，從而提高用戶在網站上的瀏覽體驗。通過設置合適的分頁器和使用AJAX的異步數據請求，用戶可以快速切換頁碼，瀏覽他們感興趣的文章。