首先，假设我们有一个简单的网页，其中有一个按钮，点击按钮后，我们希望能够动态地显示当前服务器时间。在传统的做法中，我们需要通过刷新整个页面或者重定向到一个新页面来更新时间。但使用Ajax，我们可以通过发送一个请求到服务器，然后接收服务器返回的时间数据，再将其动态地更新到页面上，而不需要刷新整个页面。
// HTML代码<button id="updateTimeButton">更新时间</button><div id="timeArea"></div>// Javascript代码document.querySelector('#updateTimeButton').addEventListener('click', function() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;document.querySelector('#timeArea').textContent = response;}};xhr.open('GET', '/getTime', true);xhr.send();});在上面的例子中，我们使用了XMLHttpRequest对象来实现与服务器的通信。当按钮被点击时，Javascript代码会发送一个GET请求到服务器的'/getTime'路由。服务器会处理该请求，并返回当前时间的数据。当该请求成功完成（readyState为4，status为200），Javascript代码将服务器返回的时间数据写入到id为'timeArea'的div元素中，实现页面的动态更新。
除了通过GET请求来获取数据外，我们还可以使用POST请求来向服务器发送数据。下面的例子中，我们通过一个表单来提交用户的评论，并将其动态地添加到页面上。
// HTML代码<form id="commentForm"><input type="text" id="commentInput" name="comment"><button type="submit">提交评论</button></form><div id="commentArea"></div>// Javascript代码document.querySelector('#commentForm').addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单的默认提交行为var comment = document.querySelector('#commentInput').value;var formData = new FormData();formData.append('comment', comment);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;var commentArea = document.querySelector('#commentArea');var commentDiv = document.createElement('div');commentDiv.textContent = response;commentArea.appendChild(commentDiv);}};xhr.open('POST', '/addComment', true);xhr.send(formData);});在上述例子中，当用户在输入框中填写评论后，点击提交按钮时，Javascript代码会阻止表单的默认提交行为，并将用户评论通过POST请求发送到服务器的'/addComment'路由。服务器处理该请求，并返回添加成功的评论数据。Javascript代码接收到服务器返回的数据后，将其使用DOM操作添加到id为'commentArea'的div元素中，实现页面的动态更新。
通过上面的例子，我们可以看到，使用Ajax可以在不刷新整个页面的情况下，通过与服务器的交互，实现页面内容的即时更新。这样不仅可以提升用户体验，还可以减少网络流量和服务器负载，是现代网页开发中不可或缺的技术。
