AJAX POST和GET方法|程序员教程

上一篇：异步请求和回调函数

下一篇：跨域请求

POST 和 GET方法

前言

在开始之前，请确保您具备以下基础知识：

HTML
CSS
JavaScript

XMLHttpRequest对象

XMLHttpRequest 是一个JavaScript对象，用于在客户端与服务器之间发送HTTP请求和接收HTTP响应。通过使用这个对象，我们可以实现非阻塞性的（异步）数据交换。

Ajax GET方法

使用Ajax的GET方法从服务器获取数据时，我们需要发送HTTP GET请求。以下是一个使用GET方法的示例：

                // 创建XMLHttpRequest对象
                var xhttp = new XMLHttpRequest();

                // 定义回调函数，当请求状态发生变化时执行
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        // 请求成功时的操作，例如更新页面内容
                        document.getElementById("demo").innerHTML = this.responseText;
                    }
                };

                // 初始化HTTP请求
                xhttp.open("GET", "example.php", true);

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

Ajax POST方法

使用Ajax的POST方法向服务器发送数据时，我们需要使用HTTP POST请求。以下是一个使用POST方法的示例：

                // 创建XMLHttpRequest对象
                var xhttp = new XMLHttpRequest();

                // 定义回调函数，当请求状态发生变化时执行
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        // 请求成功时的操作，例如更新页面内容
                        document.getElementById("demo").innerHTML = this.responseText;
                    }
                };

                // 初始化HTTP请求
                xhttp.open("POST", "example.php", true);

                // 设置请求头部，告诉服务器我们将发送URL编码的数据
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                // 发送请求，并附带数据
                xhttp.send("param1=value1&param2=value2");

示例 - 获取和显示用户数据

以下示例演示了如何使用Ajax GET方法从服务器获取JSON格式的用户数据并在页面上显示：

                <!DOCTYPE html>
                <html>
                <head>
                <script>
                function loadUserData() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                    displayUserData(JSON.parse(this.responseText));
                    }
                };
                
                xhttp.open("GET", "get_user_data.php", true);
                xhttp.send();
                }

                function displayUserData(userData) {
                var output = "<ul>";
                for (var key in userData) {
                    output += "<li>" + key + ": " + userData[key] + "</li>";
                }
                output += "</ul>";
                
                document.getElementById("userData").innerHTML = output;
                }
                </script>
                </head>
                <body>

                <button onclick="loadUserData()">Get User Data</button>
                <div id="userData"></div>

                </body>
                </html>

总结

通过本教程，您已经学会了如何使用Ajax POST和GET方法来实现异步数据交换。请务必注意在实际开发中确保数据传输安全，避免暴露敏感信息或引起跨站脚本（XSS）攻击等问题。