用XMLHttpRequest发送get请求并发送参数

2023-07-09 20:23:30

使用XMLHttpRequest发送GET请求并发送参数

简介

想象一下，您需要从服务器获取数据，同时向服务器发送一些信息，例如您的姓名和年龄。使用XMLHttpRequest (XHR)，这是完全可能的。XHR允许您以非阻塞方式向服务器发送请求，这意味着它不会阻止您的脚本执行。以下是如何使用 XHR 发送 GET 请求并发送参数：

步骤指南

创建XMLHttpRequest对象

首先，您需要创建XMLHttpRequest对象。这是代码：

var xhr = new XMLHttpRequest();

配置请求

接下来，使用open()方法配置请求。第一个参数指定请求类型，第二个参数指定URL。

xhr.open('GET', 'http://example.com/get_data.php');

设置请求头

如果您要发送表单数据，则需要设置请求头。为此，请使用setRequestHeader()方法。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

构建请求参数

如果您需要向请求发送参数，请将其构建为字符串。

var params = 'name=John&age=30';

发送请求

使用send()方法发送请求。

xhr.send(params);

处理响应

最后，您需要处理响应。为此，您将使用readystatechange事件侦听器。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应
  }
};

代码示例

以下是完整代码示例：

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://example.com/get_data.php?name=John&age=30', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = xhr.responseText;
    console.log(data);
  }
};