温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！
Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页通过异步方式与服务器进行通信，实现动态加载数据和更新页面内容，而无需刷新整个页面。
在Ajax中，常用的方法是通过XMLHttpRequest对象与服务器进行通信。通过发送HTTP请求，获取服务器返回的数据，并将数据更新到页面上的特定区域。
下面是一个示例代码，演示了如何使用Ajax实现“查看更多”功能，通过点击按钮加载更多数据并将其追加到页面上。
<!DOCTYPE html>
<html>
<head>
<script>
function loadMore() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
var data = JSON.parse(response);
var container = document.getElementById("container");
for (var i = 0; i < data.length; i++) {
var item = document.createElement("div");
item.innerHTML = data[i].content;
container.appendChild(item);
}
}
};
xhr.open("GET", "more_data.php", true);
xhr.send();
}
</script>
</head>
<body>
<div id="container">
<!-- 初始数据 -->
<div>第一条数据</div>
<div>第二条数据</div>
<div>第三条数据</div>
</div>
<button onclick="loadMore()">查看更多</button>
</body>
</html>
上述代码中，我们定义了一个`loadMore`函数，在点击按钮时触发该函数。函数内部创建了一个XMLHttpRequest对象，并通过`open`方法指定了要发送的HTTP请求类型（GET）、请求的URL（"more_data.php"）以及是否异步（true）。
接着，我们通过`onreadystatechange`事件监听器来监听请求的状态变化。当请求的`readyState`为4且`status`为200时，表示请求已成功返回。我们通过`responseText`获取服务器返回的数据，并使用`JSON.parse`将其转换为JavaScript对象。
然后，我们通过`getElementById`获取到页面中的容器元素，并使用循环遍历数据对象，创建新的`div`元素，并将数据内容追加到新的`div`元素中。通过`appendChild`方法将新的`div`元素添加到容器中。
这样，当点击按钮时，Ajax会发送一个异步请求到服务器，获取更多的数据，并将数据追加到页面上的容器中，实现了“查看更多”功能。
