html怎么使用ajax-示例代码

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

HTML中使用Ajax可以通过XMLHttpRequest对象来实现异步请求数据。我们需要创建一个XMLHttpRequest对象，然后使用该对象来发送请求并处理响应。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<script>
function loadContent() {
  // 创建XMLHttpRequest对象
  var xhttp = new XMLHttpRequest();
  // 设置响应处理函数
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 处理响应数据
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  // 发送请求
  xhttp.open("GET", "example.txt", true);
  xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="loadContent()">加载内容</button>
<div id="content"></div>
</body>
</html>

在上面的示例代码中，我们创建了一个名为`loadContent`的函数，该函数用于发送异步请求并处理响应。我们创建了一个XMLHttpRequest对象`xhttp`。然后，我们设置了`xhttp`的`onreadystatechange`属性，该属性指定了一个回调函数，在每次`readyState`状态改变时被调用。在回调函数中，我们检查`readyState`和`status`属性，以确保请求已完成并且响应状态为200（表示成功）。如果满足条件，我们将响应的内容设置到id为`content`的元素的innerHTML属性中，从而显示在页面上。

我们在页面上添加了一个按钮，当点击按钮时，会调用`loadContent`函数来发送请求并加载响应内容。响应的内容将显示在id为`content`的元素中。

通过这种方式，我们可以实现在不刷新整个页面的情况下，异步加载并更新特定区域的内容。这对于实现动态更新页面内容或加载远程数据非常有用。

html怎么使用ajax-示例代码

相关阅读