原生js发送http请求与其他方式发送请求

原生JS可以使用XMLHttpRequest对象来发送HTTP请求，也可以使用Fetch API来发送HTTP请求。这两种方式都是使用JavaScript代码直接与浏览器交互来发送请求。

除此之外，还有一些第三方库和框架，比如jQuery、axios、AngularJS等，它们也可以用来发送HTTP请求，但是需要先引入相应的库文件，使用起来可能更加方便。

总的来说，使用原生JS发送HTTP请求可以更加灵活，自由度更高，但是需要手动处理请求和响应的一些细节；而使用第三方库和框架可以更加方便、快速地发送请求，但是可能会增加页面加载时间和代码冗余。

相关问题

原生js发送ajax请求

你可以使用原生的 JavaScript 发送 AJAX 请求。下面是一个示例：

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

xhr.open("GET", "http://api.example.com/data", true); // 设置请求方法、URL 和异步标志

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且成功返回时
    var response = JSON.parse(xhr.responseText); // 解析响应数据
    console.log(response);
  }
};

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

在上面的示例中，我们创建了一个 `XMLHttpRequest` 对象，使用 `open` 方法设置请求方法、URL 和异步标志。然后，我们通过 `onreadystatechange` 事件处理程序来监听请求的状态变化。当 `readyState` 变为 4 并且 `status` 为 200 时，表示请求已经完成且成功返回。在这个条件下，我们可以通过 `responseText` 属性获取响应数据，并进行进一步处理。

当然，你也可以使用其他 HTTP 方法（如 POST）来发送请求，并可以在 `send` 方法中传递请求体数据。此外，你还可以在 `open` 方法中设置第三个参数为 `false`，以实现同步请求。不过，异步请求通常是更常见和推荐的做法，因为它不会阻塞浏览器的主线程。

（1）使用原生JavaScript发送get请求，响应结果为“Hi， web2022”，显示在控制台 （2）使用原生JavaScript发送post请求，响应结果为JSON串{ "msg", "Hello， 20th grade”}，将msg属性值显示在弹窗中 要求：代码中注明必要的注释。

我明白了，您的第一个问题是“如何使用原生JavaScript发送get请求和post请求，并在控制台或弹窗中显示响应结果。”

关于get请求，您可以使用XMLHttpRequest对象，代码如下：

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

// 创建一个get请求
xhr.open('GET', 'http://localhost:8080', true);

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    console.log(xhr.responseText); // Hi, web2022
  } else {
    // 请求失败
    console.log('请求失败');
  }
};

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

这里使用了XMLHttpRequest对象发送get请求，我们首先创建一个XMLHttpRequest对象，然后使用open方法创建一个get请求，第二个参数表示请求URL，第三个参数表示异步请求。接下来监听请求状态的变化，如果readyState为4并且status为200，说明请求成功，返回的结果存储在xhr对象的responseText属性中，我们可以在控制台中打印出来。如果请求失败，则打印“请求失败”。

关于post请求，您同样可以使用XMLHttpRequest对象，代码如下：

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

// 创建一个post请求
xhr.open('POST', 'http://localhost:8080', true);

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

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var result = JSON.parse(xhr.responseText);
    alert(result.msg); // Hello, 20th grade
  } else {
    // 请求失败
    console.log('请求失败');
  }
};

// 发送请求
xhr.send(JSON.stringify({}));

这里同样使用了XMLHttpRequest对象发送post请求，我们首先创建一个XMLHttpRequest对象，然后使用open方法创建一个post请求，第二个参数表示请求URL，第三个参数表示异步请求。接着我们需要设置请求头，Content-type表示请求体的类型为表单格式。之后监听请求状态的变化，如果readyState为4并且status为200，说明请求成功，我们将返回的结果通过JSON.parse()方法转成JSON对象，然后取出msg属性的值，在弹窗中显示出来。如果请求失败，则打印“请求失败”。注意，在发起post请求时，需要将请求体放在send方法中的参数中，这里用的是一个空对象{}，因为请求体不需要包含任何数据。