ajax前动画 ajax动态：示例代码

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

Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术。它可以通过在后台与服务器进行数据交换，使网页能够在不需要刷新整个页面的情况下更新部分内容。在Ajax中，可以使用动画效果来增强用户体验，例如在数据加载过程中显示一个加载动画。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
    <title>Ajax动画示例</title>
    <style>
        #loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            border: 4px solid #ccc;
            animation: rotate 1s infinite linear;
        }
        @keyframes rotate {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>
    <script>
        function loadData() {
            var loading = document.getElementById("loading");
            loading.style.display = "block"; // 显示加载动画
            // 发送Ajax请求，获取数据
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "data.php", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = xhr.responseText;
                    // 处理数据
                    loading.style.display = "none"; // 隐藏加载动画
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="loadData()">加载数据</button>
    <div id="loading"></div>
</body>
</html>