ajax异步插入—示例代码

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

AJAX是一种在网页中实现异步通信的技术，它可以在不刷新整个页面的情况下，通过与服务器进行交互，动态地更新页面的内容。在网页中插入新的内容是常见的需求，而使用AJAX可以实现异步插入，提升用户体验。

下面是一个简单的示例代码，演示了如何使用AJAX异步插入内容：


<!DOCTYPE html>
<html>
<head>
    <script>
        function insertContent() {
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 设置请求的方法和URL
            xhr.open("GET", "insert.php", true);
            // 注册回调函数，处理服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 将服务器返回的内容插入到指定的元素中
                    document.getElementById("content").innerHTML = xhr.responseText;
                }
            };
            // 发送请求
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="insertContent()">点击插入内容</button>
    <div id="content"></div>
</body>
</html>

在上述代码中，首先定义了一个`insertContent`函数，该函数用于触发异步插入操作。当用户点击按钮时，会调用该函数。

在`insertContent`函数中，首先创建了一个`XMLHttpRequest`对象，该对象用于发送异步请求。然后使用`open`方法设置请求的方法和URL，这里使用了GET方法，并指定了一个名为`insert.php`的服务器端文件。

接下来，通过`onreadystatechange`事件注册了一个回调函数，该函数会在服务器响应返回时被调用。在回调函数中，首先判断请求的状态和响应的状态码，确保请求已经完成且成功。然后，将服务器返回的内容插入到id为`content`的元素中，使用`innerHTML`属性实现。

通过`send`方法发送请求，完成异步插入操作。

这样，当用户点击按钮时，会向服务器发送异步请求，服务器返回的内容会被插入到页面的指定元素中，实现了异步插入的效果。

ajax异步插入—示例代码

相关阅读