web前端开发 ajax 示例代码

Ajax是一种用于在网页中进行异步数据交互的技术。它可以实现在不刷新整个页面的情况下，通过向服务器请求数据并将数据动态地展示在页面上。在前端开发中，我们常常使用Ajax来实现与服务器的数据交互。下面是一个使用Ajax发送GET请求的示例代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xmlhttp.open("GET", "example.php", true);
xmlhttp.send();

在这个示例中，我们首先创建了一个XMLHttpRequest对象，它是Ajax的核心对象之一。然后，我们通过设置`onreadystatechange`事件处理函数来监听请求的状态变化。当请求的状态变为4（即请求已完成）且状态码为200（即请求成功）时，我们将服务器返回的响应文本赋值给id为`demo`的元素的`innerHTML`属性，从而将数据展示在页面上。

接下来，我们使用`open`方法来配置请求，第一个参数是请求的方法（这里是GET），第二个参数是请求的URL（这里是`example.php`），第三个参数表示是否使用异步方式发送请求（这里是`true`）。

我们使用`send`方法来发送请求。这样，当请求完成后，服务器返回的响应数据就会被展示在页面上。

通过这个示例代码，我们可以看到如何使用Ajax来发送GET请求，并将服务器返回的数据展示在页面上。这种异步的数据交互方式可以提升用户体验，使网页更加动态和交互。