AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以通過異步請求獲取服務器上的數據并將其展示在網頁上。在本文中，我們將探討如何使用AJAX來獲取連續4天的文章。通過這個例子，我們可以了解AJAX的基本用法以及如何在網頁中展示服務器上的數據。

假設我們有一個博客網站，每天都會發布一篇新的文章。我們想要在網頁上顯示連續4天的文章。通常的做法是，我們可以向服務器發送4個連續的AJAX請求，每個請求獲取一天的文章。然后，我們可以將這4篇文章分別插入到網頁的不同區域中。

首先，我們需要創建一個用于展示文章的HTML結構。我們可以使用一個

列表來展示每一篇文章的標題和內容。我們還可以為每一篇文章添加一個類別，以便進行樣式設計。以下是一個簡單的示例：

<ul id="article-list">
<li class="article">
<h3 class="title">文章標題1</h3>
<p class="content">文章內容1</p>
<p class="date">發布日期1</p>
</li>
<li class="article">
<h3 class="title">文章標題2</h3>
<p class="content">文章內容2</p>
<p class="date">發布日期2</p>
</li>
<li class="article">
<h3 class="title">文章標題3</h3>
<p class="content">文章內容3</p>
<p class="date">發布日期3</p>
</li>
<li class="article">
<h3 class="title">文章標題4</h3>
<p class="content">文章內容4</p>
<p class="date">發布日期4</p>
</li>
</ul>

接下來，我們需要使用JavaScript編寫AJAX請求來獲取服務器上的文章數據。我們可以使用XMLHttpRequest對象來發送GET請求，并在檢測到請求成功時將返回的數據顯示在網頁上。以下是一個使用AJAX獲取文章數據的示例函數：

function getArticles() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var articles = response.articles;
// 將文章數據插入到HTML結構中
var articleList = document.getElementById("article-list");
for (var i = 0; i< articles.length; i++) {
var article = articles[i];
var li = document.createElement("li");
li.className = "article";
li.innerHTML = "<h3 class='title'>" + article.title + "</h3>" +
"<p class='content'>" + article.content + "</p>" +
"<p class='date'>" + article.date + "</p>";
articleList.appendChild(li);
}
}
};
xhr.open("GET", "articles.json", true);
xhr.send();
}

在上述代碼中，我們通過XMLHttpRequest對象發送了一個GET請求，并指定了一個回調函數用于處理服務器的響應數據。當請求成功時（readyState等于4且status等于200），我們將返回的文章數據解析為JSON格式，并將其插入到HTML結構中。

最后，我們需要調用getArticles函數來觸發AJAX請求，并在網頁加載完成時獲取連續4天的文章。以下是一個示例：

window.onload = function() {
// 獲取當前日期
var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = String(today.getMonth() + 1).padStart(2, "0");
var currentDay = String(today.getDate()).padStart(2, "0");
// 獲取連續4天的日期
var dateList = [];
for (var i = 0; i< 4; i++) {
var date = new Date(currentYear, today.getMonth(), today.getDate() - i);
var year = date.getFullYear();
var month = String(date.getMonth() + 1).padStart(2, "0");
var day = String(date.getDate()).padStart(2, "0");
dateList.push(year + "-" + month + "-" + day);
}
// 構造文章數據請求URL
var url = "http://example.com/articles?date=" + dateList.join(",");
// 發送AJAX請求獲取文章數據
getArticles(url);
};

在上述代碼中，我們首先獲取了當前日期，并根據當前日期構造了一個包含4天日期的列表。然后，我們將這個日期列表拼接到文章數據請求的URL中，再發送AJAX請求以獲取文章數據。

總結起來，通過以上的代碼示例，我們可以看到如何使用AJAX來獲取連續4天的文章。通過發送連續的AJAX請求，并將返回的文章數據插入到網頁的HTML結構中，我們可以在網頁上顯示連續4天的文章內容。這樣的應用場景在實際開發中非常常見，AJAX的強大功能為我們提供了便利的處理服務器數據的方法。