AJAX 基础示例代码|程序员教程

基础示例代码

示例1：使用GET方法获取文本数据

以下是一个简易的AJAX示例，展示了如何创建XMLHttpRequest对象、发送GET请求获取文本数据，并在页面上显示结果。

HTML部分：

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>AJAX GET Example</title>
                </head>
                <body>
                    <h1>AJAX GET Request Example</h1>

                    <button type="button" onclick="loadData()">Load Data</button>
                    <div id="result"></div>

                    <script src="app.js"></script>
                </body>
                </html>

JavaScript部分（app.js）：

                function loadData() {
                    // 创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();

                    // 配置请求信息
                    xhr.open("GET", "example.txt", true);

                    // 当状态发生变化时触发事件
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // 获取服务器响应的文本内容
                            var responseData = xhr.responseText;

                            // 更新页面内容
                            document.getElementById("result").innerHTML = responseData;
                        }
                    };

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

示例2：使用POST方法提交表单数据

以下示例展示了如何使用AJAX POST方法向服务器发送表单数据，并处理服务器返回的结果。

HTML部分：

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>AJAX POST Example</title>
                </head>
                <body>
                    <h1>AJAX POST Request Example</h1>

                    <form id="myForm" onsubmit="return submitData()">
                        <label for="username">Username:</label>
                        <input type="text" id="username" name="username" required><br>
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" required><br>
                        <input type="submit" value="Submit">
                    </form>
                    <div id="result"></div>

                    <script src="app.js"></script>
                </body>
                </html>

JavaScript部分（app.js）：

                function submitData() {
                    // 创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();

                    // 获取表单数据
                    var username = document.getElementById("username").value;
                    var email = document.getElementById("email").value;

                    // 配置请求信息
                    xhr.open("POST", "submit_form.php", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    // 当状态发生变化时触发事件
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // 获取服务器响应的文本内容
                            var responseData = xhr.responseText;

                            // 更新页面内容
                            document.getElementById("result").innerHTML = responseData;
                        }
                    };

                    // 发送请求
                    xhr.send("username=" + encodeURIComponent(username) + "&email=" + encodeURIComponent(email));

                    // 阻止表单默认提交行为
                    return false;
                }

注意，上述示例中的服务器端处理文件 submit_form.php需根据实际情况编写。可以根据需要将数据保存到数据库、发送邮件等，并返回相应的提示信息。

结束语

通过以上两个示例，您已经学会了如何使用AJAX发送GET和POST请求，以及如何处理服务器返回的数据来更新页面内容。在实际开发过程中，您可能还需要关注错误处理、超时处理、跨域请求等问题，请继续关注相关教程和学习资源。