html调用ajax-示例代码

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

HTML调用Ajax是通过使用JavaScript的XMLHttpRequest对象来实现的。Ajax可以在不重新加载整个页面的情况下从服务器获取数据，并将数据更新到页面上的特定部分。下面是一个简单的示例代码，演示了如何使用Ajax从服务器获取数据并在页面上显示。

我们需要在HTML页面中引入JavaScript代码，以便使用Ajax功能。可以将以下代码放置在<head>标签中的<script>标签中：


<script>
  function loadData() {
    var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {  // 当请求完成且响应状态为200时
        var response = JSON.parse(xhr.responseText);  // 解析服务器返回的JSON数据
        document.getElementById("data").innerHTML = response.data;  // 将数据更新到页面上的特定元素中
      }
    };
    xhr.open("GET", "data.php", true);  // 发送GET请求到指定的服务器端脚本文件
    xhr.send();  // 发送请求
  }
</script>

在上述代码中，我们定义了一个名为loadData的JavaScript函数，该函数用于发送Ajax请求并处理服务器的响应。在函数内部，我们首先创建了一个XMLHttpRequest对象，该对象用于与服务器进行通信。然后，我们定义了一个回调函数xhr.onreadystatechange，该函数在每次Ajax请求的状态发生变化时被触发。在回调函数中，我们首先检查请求的状态是否为4（表示请求已完成），并且响应的状态是否为200（表示请求成功）。如果满足这两个条件，我们将服务器返回的数据解析为JSON格式，并将数据更新到页面上具有"id"属性的元素中。

接下来，我们需要在HTML页面中添加一个用于触发Ajax请求的按钮。可以将以下代码放置在<body>标签中的任意位置：


<button onclick="loadData()">加载数据</button>
<div id="data"></div>

在上述代码中，我们创建了一个按钮元素，并将loadData函数绑定到按钮的onclick事件上。当用户点击按钮时，将调用loadData函数，从服务器获取数据并将其显示在页面上具有"id"属性的<div>元素中。

以上就是HTML调用Ajax的示例代码。当用户点击按钮时，将发送Ajax请求到服务器，并将服务器返回的数据显示在页面上的特定元素中。

html调用ajax-示例代码

相关阅读