JavaWeb之Ajax的基本使用与实战案例

Ajax（Asynchronous JavaScript And XML）即异步JavaScript和XML技术，通过在后台与服务器交换数据并更新部分网页实现页面无刷新的异步更新。

Ajax的基本语法

使用Ajax时可以通过XMLHttpRequest对象与后台进行数据交互，其中涉及到的基本语法如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式、请求地址以及是否异步
xhr.open("GET", "url", true);
// 发送请求
xhr.send();

// 监听请求的状态
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理请求的结果
        var response = xhr.responseText;
        console.log(response);
    }
}

Ajax的实战案例

示例一：异步加载数据

下面是一个简单的异步加载数据的实例，通过点击按钮触发Ajax请求并在页面上显示返回的数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax示例1</title>
</head>
<body>
    <button id="btn">异步加载数据</button>
    <p id="content"></p>
    <script>
        // 获取按钮和内容区域DOM元素
        var btn = document.querySelector("#btn");
        var content = document.querySelector("#content");

        // 添加点击事件监听
        btn.addEventListener("click", function() {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 设置请求方式、请求地址以及是否异步
            xhr.open("GET", "data.php", true);

            // 发送请求
            xhr.send();

            // 监听请求的状态
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理请求的结果，将结果放入内容区域
                    content.innerText = xhr.responseText;
                }
            }
        });
    </script>
</body>
</html>

示例二：异步提交表单

下面是一个异步提交表单的实例，通过按钮触发Ajax请求将表单数据提交到后台，并在页面上显示返回的结果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax示例2</title>
</head>
<body>
    <form id="myForm">
        <label>用户名：</label><input type="text" name="username"><br>
        <label>密码：</label><input type="password" name="password"><br>
        <button id="btn" type="button">提交</button>
    </form>
    <p id="result"></p>
    <script>
        // 获取表单和按钮DOM元素
        var form = document.querySelector("#myForm");
        var btn = document.querySelector("#btn");
        var result = document.querySelector("#result");

        // 添加点击事件监听
        btn.addEventListener("click", function() {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 设置请求方式、请求地址以及是否异步
            xhr.open("POST", "submit.php", true);

            // 设置请求头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // 获取表单数据
            var formData = new FormData(form);

            // 发送请求
            xhr.send(formData);

            // 监听请求的状态
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理请求的结果，将结果放入结果区域
                    result.innerText = xhr.responseText;
                }
            }
        });
    </script>
</body>
</html>

以上两个示例仅是Ajax的基本使用，实际应用Ajax还需要结合后台开发技术进行更加复杂的数据处理和交互。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaWeb之Ajax的基本使用与实战案例 - Python技术站

JavaWeb之Ajax的基本使用与实战案例

JavaWeb之Ajax的基本使用与实战案例

Ajax的基本语法

Ajax的实战案例

示例一：异步加载数据

示例二：异步提交表单

相关文章