ajax 演变_ajax简介：示例代码

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。它的出现极大地改变了网页的交互方式，使得网页能够在不刷新整个页面的情况下，通过与服务器进行数据交换来更新部分页面内容。

在传统的网页交互中，用户点击一个链接或提交一个表单后，整个页面会重新加载，这样会造成页面的闪烁，用户体验不佳。而使用Ajax技术，可以在后台与服务器进行数据交互的不刷新整个页面，只更新需要更新的部分内容，从而提高用户体验。

Ajax的实现依赖于JavaScript和XMLHttpRequest对象。通过JavaScript，我们可以编写代码来发送异步请求，并在服务器响应后对返回的数据进行处理。XMLHttpRequest对象则是Ajax的核心，它允许我们在后台与服务器进行数据交互。

下面是一个简单的Ajax示例代码，通过点击按钮发送异步请求并更新页面内容：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听服务器响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器响应成功，更新页面内容
    document.getElementById("result").innerHTML = xhr.responseText;
  }
};
// 发送异步请求
xhr.open("GET", "example.com/api/data", true);
xhr.send();

在这个示例中，我们首先创建了一个XMLHttpRequest对象，然后通过设置`onreadystatechange`事件监听器来监听服务器的响应。当服务器响应成功且状态码为200时，我们通过`responseText`属性获取到服务器返回的数据，并将其更新到页面中的`result`元素中。

接下来，我们调用`open`方法来指定发送请求的方式（GET或POST）、请求的URL和是否使用异步方式发送请求。我们调用`send`方法来发送请求。

通过这个示例，我们可以看到Ajax的基本使用方式。通过JavaScript代码发送异步请求，并在服务器响应后更新页面内容，从而实现无刷新更新部分页面的效果。