XMLHttpRequest对象的GET和POST请求使用方法

小蓝

2023 年 10 月 28 日

285 次浏览

暂无评论

2402字数

Linux 技术杂烩

当想从服务器请求或发送数据，而无需刷新或变更当前浏览页面时，XMLHttpRequest对象功能派上了用场。XMLHttpRequest主要提供了GET和POST两种方式。现在我们就如同厨师烹制食谱一样，一步步称量、炖煮这两种请求方法。

首先，犹如准备一道料理，我们需要集齐材料。需要的"材料"如下：

XMLHttpRequest对象实例；
请求的URL；
请求类型，即GET或POST；
数据（如果有的话，通常在POST请求中）；
请求状态和状态码。

创建XMLHttpRequest的大厨房如下：

var xhr = new XMLHttpRequest();

我们已经完成了最基本的准备，接下来开始我们的烹调过程。

一、GET请求

铺垫好锅，用GET方法炖烧。GET请求的基本特点是将被请求的数据嵌入到URL中。它的创建步骤如下：

// 烹调GET的步骤
xhr.open('GET', 'yourURL', true);
xhr.send();

这里面的你需要熟悉的是'yourURL'，它就是你想汲取到如山泉水一样清凉的数据的那个地址。并且，第三个参数是true，代表着我们的请求是异步的，保证我们松下网页，天塌下来也不怕。

一炖到底，等待异步悠然返回，我们用监听状态变化，根据返回的状态决定接下来的动作：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = xhr.responseText;
        // 在这里处理你的数据
    }
}

熟悉厨艺的你，嗅着香气，已经知道，这表示当请求完成，且无错误时，我们把返回的文本数据赋值给data，就可以行使你的厨艺从中提取到你期待的味道了。

二、POST请求

再切换档次，我们来尝试下POST方式，像一位烹饪师傅一样地专注。POST请求的基本特点是数据并不放在URL中，而是在请求体中。同样让我们开始烹调：

// 烹调POST的步骤
xhr.open('POST', 'yourURL', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('key1=value1&key2=value2');

在使用POST进行调烹时，有一个步骤需要额外加入，那就是设定请求头设置'Content-type'为'application/x-www-form-urlencoded'。这就好比，你需要告诉厨房的其他帮手，你装进罐子里的是什么原料，是用来炖汤的肉，还是用来卤的豆腐。

想要的数据已经装入了send()方法中，就像你把原料抛进已经热的油锅中一般。

接下来响应的处理和GET方式一样，我们依旧需要监听状态变化：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = xhr.responseText;
        // 在这里处理你的数据
    }
}

这两种方式已经足够让你操控数据交流的大厨房，像一个大厨一样熟练跃动。但记住一点，每一位大厨都会依据菜品属性和食客需求选择适合的烹饪方法，GET还是POST，就看您的选择了。