JS 请求|极客笔记

JS 请求

在现代的web开发中，前端发起请求是一种非常常见的操作。通过JS请求，前端可以向服务器发送数据并获取相应的回复，从而实现页面内容的更新和交互。在本文中，我将详细介绍JS请求的原理、常见的请求方式以及如何使用JS来发起请求。

请求的原理

JS请求实质上是通过XMLHttpRequest对象或者fetch API发起的。这两种方式都是基于XMLHttpRequest对象的封装，用来和服务器进行数据交互。在发送请求时，我们需要指定请求的方法（GET、POST等）、请求的URL地址以及一些其他参数，如请求头、数据等。

当浏览器接收到请求时，会将请求发送到服务器端。服务器接收到请求后，根据请求的URL地址和方法来响应相应的数据。浏览器再根据服务器返回的数据来更新页面内容。

常见的请求方式

GET 请求

GET请求是最常见的一种请求方式，用于向服务器请求数据。通过GET请求，可以将数据包含在URL的查询参数中，并发送给服务器。GET请求适合向服务器获取数据，比如请求一个网页、图片或者JSON数据等。

// 使用XMLHttpRequest对象发起GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

POST 请求

POST请求一般用于向服务器提交数据。通过POST请求，可以将数据放在请求体中发送给服务器。POST请求适合用于提交表单数据、上传文件等操作。

// 使用fetch API发起POST请求
fetch('/api/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'Tom', age: 18 }),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
});

其他请求方式

除了GET和POST请求外，还有一些其他常见的请求方式，如PUT、DELETE等。这些请求方式分别用于更新资源和删除资源等操作。

使用JS发起请求

XMLHttpRequest

XMLHttpRequest对象是早期的一种发起请求的方式，它通过异步的方式发送请求和获取数据。下面是一个使用XMLHttpRequest对象发起GET请求的示例：

// 使用XMLHttpRequest对象发起GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

fetch API

fetch API是现代web开发中推荐的一种请求方式，它基于Promise对象并具有更加简洁的API设计。下面是一个使用fetch API发起POST请求的示例：

// 使用fetch API发起POST请求
fetch('/api/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'Tom', age: 18 }),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
});