html ajax json-示例代码

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

HTML是一种用于创建网页的标记语言，它使用标签来定义网页的结构和内容。其中，AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个页面的情况下与服务器进行通信的技术，通过异步请求和响应，能够实现网页的动态更新。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在客户端和服务器之间传输数据。

在HTML中，我们可以使用`<script>`标签来嵌入JavaScript代码。通过AJAX，我们可以使用JavaScript来发送HTTP请求并接收服务器返回的数据，然后使用JSON来解析这些数据。

下面是一个示例代码，展示了如何使用HTML、AJAX和JSON来实现数据的异步获取和展示。


<!DOCTYPE html>
<html>
<head>
    <title>AJAX and JSON Example</title>
</head>
<body>
    <h1>异步获取数据示例</h1>
    <button onclick="getData()">获取数据</button>
    <div id="result"></div>
    <script>
        function getData() {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 设置回调函数，当请求的状态发生变化时触发
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 解析服务器返回的JSON数据
                    var data = JSON.parse(xhr.responseText);
                    // 更新页面上的数据展示区域
                    var resultDiv = document.getElementById("result");
                    resultDiv.innerHTML = "";
                    for (var i = 0; i < data.length; i++) {
                        var item = document.createElement("p");
                        item.textContent = data[i].name + " - " + data[i].age;
                        resultDiv.appendChild(item);
                    }
                }
            };
            // 发送GET请求
            xhr.open("GET", "data.json", true);
            xhr.send();
        }
    </script>
</body>
</html>

在这个示例代码中，我们首先定义了一个按钮和一个用于展示数据的`<div>`元素。当点击按钮时，会调用名为`getData()`的JavaScript函数。

在`getData()`函数中，我们首先创建了一个XMLHttpRequest对象，该对象用于发送HTTP请求。然后，我们设置了一个回调函数，当请求的状态发生变化时会被触发。在回调函数中，我们首先判断请求的状态和响应的状态码是否满足条件，然后使用`JSON.parse()`方法解析服务器返回的JSON数据。接着，我们通过JavaScript动态创建了`<p>`元素，并将数据展示到页面上。

我们使用`xhr.open()`方法设置了请求的类型（GET）和URL，通过`xhr.send()`方法发送了请求。

通过这段示例代码，我们可以看到如何使用HTML、AJAX和JSON来实现数据的异步获取和展示。

html ajax json-示例代码

相关阅读