HTML 如何使用HTTP GET或POST进行Ajax调用

使用AJAX向服务器发送HTTP请求是现在最常见的获取数据的方法。它提供了发送和接收数据的方法。在本文中，我们将讨论GET和POST方法。

GET方法： 此方法用于从文件、API等获取数据。

如何使用GET方法？

要使用GET方法，首先我们需要初始化XMLHttpRequest()对象，然后在该对象的open()方法中指定方法(GET)和请求数据的URL。语法如下：

语法：

var rqst = new XMLHttpRequest();
rqst.open('GET', url);

示例：

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to use an Http get or 
        Post for my Ajax Calls?
    </title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 id="heading">Hey Geek,</h2>
        <div id="btnDiv">
            <button class="btn" onclick="requestData()">
                Request Data
            </button>
        </div>
    </div>
 
    <script>
        var head = document.getElementById('heading');
        var request = new XMLHttpRequest();
        function requestData() {
            request.onload = function () {
                head.innerHTML = this.responseText;
            }
            request.open('GET', 'gfgInfo.txt', true);
            request.send();
        }
    </script>
</body>
 
</html>

输出：

HTML 如何使用HTTP GET或POST进行Ajax调用

POST方法： POST方法用于将数据发送或传输到您想要的地方。

如何使用POST方法？

要使用POST方法，我们必须像在GET方法中那样初始化 XMLHttpRequest() ，然后在 open() 方法内部，这次要传递POST而不是GET，并且还要传递一个将数据发送到的文件的URL。之后，我们必须在 send() 方法中传递数据。在这里，我们还将使用 setRequestHeader() 方法，告诉服务器处理我们发送的数据，如下所示：

语法：

var sendDATA=[1,2,3];
var rqst = new XMLHttpRequest();
rqst.open('POST', url);
rqst.setRequestHeader('Content-type', 
    'application/json; charset=UTF-8');
rqst.send(sendDATA);

示例：

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to use an Http get or 
        Post for my Ajax Calls?
    </title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 id="heading">Hey Geek,</h2>
        <div id="btnDiv">
            <button class="btn" onclick="sendRequest()">
                Send Data
            </button>
        </div>
    </div>
 
    <script>
        var head = document.getElementById('heading');
        let sendingData = {
            id: 1,
            title: "Welcome to GFG",
            body: "A computer science portal for all geeks"
        }
        let data = JSON.stringify(sendingData);
 
        const url = 
            "https://jsonplaceholder.typicode.com/users";
 
        function sendRequest() {
            let request = new XMLHttpRequest();
 
            request.open('POST', url, true);
            request.setRequestHeader('Content-type', 
                'application/json; charset=UTF-8');
            request.send(data);
 
            request.onload = function () {
                if (request.status === 201) {
                    head.innerHTML = "Data posted successfully!";
                }
            }
        }
    </script>
</body>
 
</html>

输出：

HTML 如何使用HTTP GET或POST进行Ajax调用