探索AjaxDemo：提升前端交互体验的技术实践

作者：System 时间：2024年08月08日分类：所有,ajax 字数：1211

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Demo</title>
    <script>
        function fetchGreeting() {
            // 创建一个新的 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
 
            // 配置请求类型、URL 以及是否异步处理
            xhr.open('GET', 'greeting.json', true);
 
            // 为 onreadystatechange 事件绑定处理函数
            xhr.onreadystatechange = function() {
                // 确保请求完成并且响应状态为 200
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 获取服务器响应的文本内容
                    const responseText = xhr.responseText;
                    // 解析 JSON 格式的字符串
                    const responseJson = JSON.parse(responseText);
                    // 更新页面上的元素内容
                    document.getElementById('greeting').textContent = responseJson.message;
                }
            };
 
            // 发送请求
            xhr.send();
        }
    </script>
</head>
<body onload="fetchGreeting()">
    <h1 id="greeting">Loading...</h1>
</body>
</html>

这个简单的 HTML 页面示例展示了如何使用原生 JavaScript 和 XMLHttpRequest 对象来发送一个异步 GET 请求，并在获取到服务器响应后更新页面上的内容。这是一种在客户端与服务器之间进行数据交换的常见方法，可以提升用户体验，使页面的交互更加流畅。

探索AjaxDemo：提升前端交互体验的技术实践

评论已关闭

推荐阅读