ajax无刷新 程序_示例代码

AJAX是一种在网页上进行异步数据交互的技术，它可以实现无刷新更新页面内容的效果。通过AJAX，网页可以向服务器发送请求并接收响应，而不需要刷新整个页面。

下面是一个使用AJAX实现无刷新更新页面内容的示例代码：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听请求状态变化的事件
xhr.onreadystatechange = function() {
  // 当请求完成并且响应已就绪时
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 从服务器响应中获取数据
    var response = xhr.responseText;
    // 将获取到的数据更新到页面中
    document.getElementById("content").innerHTML = response;
  }
};
// 发送GET请求
xhr.open("GET", "example.php", true);
xhr.send();

在这个示例中，首先创建了一个XMLHttpRequest对象，它是浏览器提供的用于发送HTTP请求的对象。然后，通过监听XMLHttpRequest对象的onreadystatechange事件，可以在请求状态发生变化时执行相应的操作。

当请求状态变为XMLHttpRequest.DONE（即请求完成）并且响应状态为200（即请求成功）时，表示服务器已经返回了响应。可以通过xhr.responseText属性获取到服务器返回的数据。在示例代码中，使用获取到的数据更新了页面中id为"content"的元素的内容。

通过调用XMLHttpRequest对象的open方法和send方法，可以发送一个GET请求到服务器。在这个示例中，请求的URL是"example.php"，并且请求是异步的（即不会阻塞页面的其他操作）。

通过这个示例代码，可以实现在不刷新整个页面的情况下，更新指定元素的内容。这样可以提高用户体验，使页面更加动态和实时。