怎么利用Javascript发送GETPOST请求 +实例

前言

在前端开发中，发送GET和POST请求是非常常见的操作，一般用于与服务器进行数据交互。而Javascript作为一种在浏览器环境中运行的脚本语言，可以方便地实现这些操作。本文将介绍如何使用Javascript发送GET和POST请求，并提供相应的代码示例。

发送GET请求

发送GET请求是一种在URL中传递参数并获取服务器响应的常用方式。下面是一个发送GET请求的代码示例：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求方式和URL
xhr.open('GET', 'https://example.com/api/users?id=1', true);

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求完成且成功，处理服务器返回的数据
    var response = JSON.parse(xhr.responseText);
    // TODO: 在这里处理服务器返回的数据
  }
};

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

上述代码中，我们首先创建了一个XMLHttpRequest对象（也可以使用fetch等其他方式发送请求），然后通过调用`open`方法配置请求方式和URL。`open`的第一个参数表示请求方式，这里是GET；第二个参数是URL地址；第三个参数表示是否为异步请求。

接下来，我们通过监听`onreadystatechange`事件来监听请求状态的变化。当`readyState`属性值为4且`status`属性值为200时，表示请求已经完成且成功。此时可以通过`responseText`属性获取服务器返回的数据。

发送POST请求

发送POST请求一般用于向服务器提交表单数据等需要保密性的操作。下面是一个发送POST请求的代码示例：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求方式和URL
xhr.open('POST', 'https://example.com/api/users', true);

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

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求完成且成功，处理服务器返回的数据
    var response = JSON.parse(xhr.responseText);
    // TODO: 在这里处理服务器返回的数据
  }
};

// 发送请求
xhr.send('username=test&password=123456');

在发送POST请求时，我们需要通过调用`setRequestHeader`方法设置请求头的`Content-Type`属性，以指定请求体的数据类型。然后通过调用`send`方法发送请求。`send`方法的参数可以是需要提交的数据，这里使用了URL编码的形式传递，也可以使用JSON等其他格式。

总结

通过以上示例，我们可以看到使用Javascript发送GET和POST请求的基本原理和操作方法。通过创建XMLHttpRequest对象，并配置请求方式、URL、请求头和请求体，然后监听`onreadystatechange`事件，即可实现与服务器的数据交互。在实际开发中，我们可以根据具体的需求和接口文档，对请求进行进一步封装和处理。

虽然以上代码使用的是纯Javascript，但也可以使用现代框架如Vue.js、React等来简化和优化代码结构，提高开发效率。对于更加复杂的请求操作，还可以使用第三方库如axios、jQuery等来简化实现。