当前位置:首页>WordPress资讯>什么是及如何使用JavaScript HTTP请求

什么是及如何使用JavaScript HTTP请求

什么是及如何使用JavaScript HTTP请求

网站的前端和后端之间的互动是通过请求实现的。像更新数据库中的新/老用户、从你的仪表盘发布博文、从你的个人资料中删除图片、更新你的等功能都需要服务器和客户端之间的互动来修改数据。

在构建网络应用时–包括前端和全栈网络应用–我们经常与存储在不同数据库和服务器上的数据进行交互。这些服务器可能属于第三方,也可能是由项目的开发者创建的。

为了与这些服务器互动,我们可以使用不同的HTTP方法来请求数据。我们可以使用专门的HTTP动词,如POST、GET、PUT/PATCH和DELETE,在服务器上创建、读取、更新和删除(或)数据。

在本教程中,你将学习向远程服务器发出HTTP请求并在中执行CRUD操作的各种方法。

每一节都会介绍一种发送HTTP请求的新方法。我们将从内置的方法开始,比如fetch API和XMLHttpRequest对象,然后再看看一些开源的HTTP请求库,比如Axios和SuperAgent。

  1. 什么是JavaScript HTTP请求?
  2. 如何用JavaScript进行HTTP请求

什么是JavaScript HTTP请求?

JavaScript中的HTTP请求是一组预定义的方法,用于与存储在服务器上的数据进行交互。

每个发送到服务器的请求包括一个端点和正在发送的请求类型。你可以把端点视为两个程序之间的网关,即客户端和服务器。

客户端是发送请求的程序,而服务器是接收请求的程序。服务器会根据请求的有效性发回一个响应。如果请求成功,服务器会发回或JSON格式的数据(大多数情况下是JSON),如果请求失败,服务器会发回一个错误信息。

服务器发回的响应通常与状态码有关。这些代码帮助我们理解当服务器收到一个请求时,它想说什么。下面是其中的一些代码和它们的含义:

  • 100-199表示一个信息性响应。
  • 200-299表示一个成功的请求。
  • 300-399表示重定向。
  • 400-499表示客户端错误。
  • 500-599表示服务器错误。

我们将在接下来的章节中更多地讨论其中的一些内容。

在下一节中,你将看到在JavaScript中进行HTTP请求的不同方式。

如何在JavaScript中进行HTTP请求

本节将分为几个小节,每节都会教你用不同的方法在JavaScript中进行HTTP请求。

所讨论的每种方法都有一个例子,显示如何向服务器发送POST、GET、PUT/PATCH和DELETE请求。

JSON Placeholder将作为远程服务器/端点,我们的所有请求都将被发送。

1. 如何使用XMLHttpRequest(AJAX)在JavaScript中进行HTTP请求

XMLHttpRequest是一个内置的JavaScript对象,用于与服务器进行交互,并在不重载浏览器的情况下加载网页内容。

在本节中,您将看到如何使用 XMLHttpRequest 发送 POST、GET、PUT/PATCH 和 DELETE 请求。

AJAX是用来进行异步的HTTP请求的。这简单地意味着,当请求的响应还在等待时,你的JavaScript代码的其他部分可以继续运行,而不必先等待请求完成。

你也可以通过使用AJAX将修改推送到你的网页的特定部分,而不强迫访问者重新加载整个页面。

默认情况下,AJAX与XMLHttpRequest对象一起工作,因此本节中的例子可以被视为AJAX请求。

信息:最初,你可以通过在请求中使用 true (异步)和 false 参数来指定一个请求是否应该是异步的,但后者现在已被废弃。

如何使用XMLHttpRequest在JavaScript中发送一个GET请求

当你想从服务器上获取数据时,你就会使用GET请求。为了在JavaScript中使用XMLHttpRequest发送一个成功的GET请求,你应该确保正确完成以下工作:

  1. 创建一个新的XMLHttpRequest对象。
  2. 通过指定请求类型和端点(服务器的)打开一个连接。
  3. 发送请求。
  4. 听取服务器的响应。

现在,我们已经看到了一些使用XMLHttpRequest发送的步骤,让我们看看一个代码实例:

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};

我们将对上面的代码进行分解,以帮助你理解这里发生的事情。

我们做的第一件事是创建一个新的XMLHttpRequest对象,并将其存储在一个叫做 xhr 的变量中。就是说:

const xhr = new XMLHttpRequest();

然后,我们指定了请求类型(GET)和请求将被发送到的端点(在这种情况下,”https://jsonplaceholder.typicode.com/users”)ː。

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

为了向服务器发送请求,我们使用了 send() 方法。

当服务器发回数据时,你可以指定返回数据的格式。

在大多数情况下,会使用JSON格式。所以我们通过添加以下内容确保我们的数据以JSON格式返回:

xhr.responseType = "json";

在这一点上,我们已经成功发送了一个GET请求。接下来要做的是通过使用一个事件监听器来监听服务器的声音:

xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};

在上面的代码中,我们利用了 onload 事件监听器。使用一个 if 语句,我们检查了服务器的响应状态。

如果客户端的状态是4(DONE),并且状态代码是200(成功),那么数据将被记录到控制台。否则,将出现一个显示错误状态的错误信息。

如果你已经跟进到这一点,没有任何错误,你应该有一个数组的对象在你的控制台ː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

这是从服务器上获取的数据。

如何使用XMLHttpRequest在JavaScript中发送一个POST请求

通过POST请求,你可以将新的信息(数据)作为一个对象发送到服务器/数据库。这个对象可以是关于一个新用户的信息,一个新的待办事项,或者其他你需要记录的东西。

本节中你将看到的代码例子与上一节中的类似。主要的区别是,POST请求需要一些信息,这些信息通常在发送到服务器之前被存储在一个对象中。

这里有一个例子:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 201) {
console.log(JSON.parse(xhr.responseText));
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);

在上面的代码中,要发送至服务器的信息被存储在一个名为 body 的变量中。它持有三个属性: titlebody, 和 userId

请注意,持有对象的body变量在发送到服务器之前必须被转换为JSON对象。该转换是通过 JSON.stringify() 方法完成的。

为了确保JSON对象被发送到服务器,它被作为一个参数传给 send() 方法:

xhr.send(body);

如何使用XMLHttpRequest在JavaScript中发送一个PATCH请求

PATCH请求被用来更新一个对象的指定属性。这与PUT方法不同,后者是更新一个对象的全部内容。

下面是一个在JavaScript中使用XMLHttpRequest的PATCH请求的例子:

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
body: "My PATCH request",
});
xhr.onload = () => {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);

上面的代码,如果成功的话,将记录被更新和发送到服务器的对象的部分。

如何使用XMLHttpRequest在JavaScript中发送一个DELETE请求

就像名字所暗示的那样,DELETE方法是用来从服务器上删除数据的。这对任何JavaScript HTTP方法都是一样的。

在大多数情况下,你必须指定你想删除的数据的ID。这个ID通常是端点/URL中的一个参数。

让我们来看看一个DELETE请求的例子:

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send();

上面的代码将删除一个在端点(”https://jsonplaceholder.typicode.com/posts/3″)中指定的ID为3的帖子的对象。

2. 如何在JavaScript中使用jQuery进行HTTP请求

jQuery简化了从服务器获取数据的过程,使语法更简短,更直接。

在这一节中,你将看到如何使用不同的jQuery方法进行HTTP请求。

如何在JavaScript中使用jQuery发送一个GET请求

jQuery为我们提供了 $.get() 方法来发送GET请求到服务器。该方法需要两个参数–服务器的URL和一个,如果请求成功,该函数就会运行。

下面是一个例子:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
console.log(data);
});

从上面的代码中可以看出, $.get() 方法接收了URL(https://jsonplaceholder.typicode.com/users)和一个匿名回调函数作为参数。

通过回调函数,你可以访问请求中的数据和请求的状态。在我们自己的案例中,我们把数据记录到控制台。

这就是使用jQuery发送一个GET请求的简单方法。

如何在JavaScript中使用jQuery发送一个POST请求

要使用jQuery发送一个POST请求,我们使用 $.post() 方法。它需要三个参数–URL,要发送到服务器的数据,以及一个回调函数。

const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
console.log(data);
});

在上面的代码中,我们创建了一个要发送给服务器的对象,并将其存储在一个名为 body 的变量中。这个变量被作为 $.post() 方法的第二个参数传入。

使用回调函数,我们将请求的结果记录到控制台。

3. 如何在jQuery中使用$.ajax()方法进行异步请求

在我们继续发送PATCH和DELETE请求之前,让我们谈谈 $.ajax() 方法。

jQuery中的 $.ajax() 方法是用来做异步请求的。

其语法与其他方法不同。

下面是你如何使用 $.ajax() 方法做一个GET请求:

$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (result) {
console.log(result);
},
});

$.ajax() 方法有不同的参数,我们可以使用。

在上面的代码中, url 参数指定了服务器的URL, type 指定了请求类型, success 参数在请求成功时调用一个回调函数。

在下一节中,你将看到如何使用jQuery的 $.ajax() 方法发送PATCH和DELETE请求。

如何使用jQuery的$.ajax()方法在JavaScript中发送一个PATCH请求

在本节中,你将看到如何使用jQuery的 $.ajax() 方法来发送PATCH请求。

下面是代码:

const body = JSON.stringify({
body: "My PATCH request",
});
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/101",
type: "PATCH",
data: body,
success: function (result) {
console.log(result);
},
});

在上面的代码中,要更新的属性被存储在 body 变量中。然后将其作为 data 参数的值。

如果请求成功, success 参数的函数将被执行。

如何使用jQuery的$.ajax()方法在JavaScript中发送一个DELETE请求

使用jQuery的 $.ajax() 方法发送一个DELETE请求,只需要几行代码。

下面是一个例子:

$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/3",
type: "DELETE",
success: function (result) {
console.log(result)
},
});

正如上面所看到的,我们所要做的就是指定带有要删除的对象的ID的URL,请求的类型,以及一个在请求成功时运行的函数。

如何使用jQuery中的$.getJSON方法

$.getJSON 方法提供了一个更短的方法来发送GET请求。

为了使请求成功,你只需要指定URL和回调函数。下面是一个例子:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
console.log(result)
});

在上面的代码中,我们将服务器的URL和请求成功后运行的函数作为参数传给 $.getJSON 方法。

上面的代码将记录一个包含用户信息的对象数组到控制台。

4. 如何使用Fetch API在JavaScript中进行HTTP请求

fetch API是使用JavaScript与服务器进行交互的最流行的方式之一。它是一个原生的JavaScript API,在发出请求时支持承诺。

使用 fetch API的语法非常容易理解,你将在下面的章节中看到。

如何使用Fetch API在JavaScript中发送一个GET请求

使用 fetch API发送GET请求只需要提供URL。然后返回一个承诺,你可以使用 then() 方法或 asyncawait 关键字来访问。

我们来看看一个例子:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

在上面的代码中,我们把URL传给了 fetch 方法;这个方法返回一个承诺。然后我们使用 then() 方法访问服务器的响应。使用 response.json() 方法将响应转换为一个JSON对象。

获得响应后,我们使用另一个 then() 方法将数据记录到控制台。

如何使用Fetch API在JavaScript中发送一个POST请求

fetch方法有一个第二个参数,允许我们指定body(要发送的数据)和要发送的请求类型。这个第二个参数让我们可以发送POST和PATCH请求。

看一下这个示例代码:

fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

在上面的代码中,我们在 fetch 方法的第二个参数中添加了请求选项。 method 用于指定请求类型, body 指定了要发送到服务器的数据,而 headers 用于指定我们要向服务器发送JSON数据。

就像我们之前发送GET请求时一样,使用 then() 方法访问返回的承诺/响应。

如何使用Fetch API在JavaScript中发送一个PUT请求

在其他章节中,当我们发送请求以更新服务器中的一个对象时,我们使用了PATCH。在本节中,我们将使用PUT,它可以让你更新一个对象的全部内容。

下面是一个使用 fetch API的例子:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
body: JSON.stringify({
id: 1,
title: "My PUT request",
body: "Updating the entire object",
userId: 1,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

由于我们要发送一个PUT请求,我们需要提供要更新的数据,它被作为一个值传递给 body 请求选项。

我们还指定了要更新的对象的ID作为URL的最后一个参数。如果请求运行成功,你应该看到更新的对象被记录到控制台。

如何使用Fetch API在JavaScript中发送一个DELETE请求

发送DELETE请求是非常直接的–你所要做的就是指定要删除的对象的ID。你可以使用 then() 方法来接收服务器的响应,就像我们对其他请求所做的那样。

下面是一个快速的例子:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
method: "DELETE",
});

上面的代码将删除一个ID为3的对象。

5. 如何使用Axios在JavaScript中发出HTTP请求

Axios是一个基于承诺的第三方库,用于发送HTTP请求。就像大多数现代一样,它简化了向服务器发送请求的过程。

在本节中,你将学习如何使用Axios向服务器发送GET、POST、PUT和DELETE请求。

请注意,Axios并没有内置于JavaScript中——你必须单独安装它才能使用其功能。要在你的项目中安装Axios,请在你的项目终端运行以下命令:

npm install axios

如何使用Axios在JavaScript中发送GET请求

要使用Axios发送一个GET请求,你只需要将URL传给 get() 方法,该方法会返回一个承诺。可以使用 then() 方法访问从承诺中返回的响应。

让我们看一个例子:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

上面的代码将记录出一个包含从服务器返回的数据的对象数组。你会注意到,我们不必将返回的对象改为JSON对象–Axios在后台处理了这个问题,你可以使用 response.data 访问数据。

为了捕捉任何错误,我们使用了 catch() 方法。

如何使用Axios在JavaScript中发送一个POST请求

Axios中的POST请求需要两个参数–URL和要发送到服务器的数据。你可以将数据存储在一个变量中,或者直接作为参数传递。

下面是方法:

axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "POST request with Axios",
body: "POST request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))

在上面的例子中,我们正在向服务器发送数据。数据是作为 post() 方法的第二个参数传入的。

如果请求被成功发送,你会看到结果被记录到控制台。

如何使用Axios在JavaScript中发送PUT请求

用Axios发送PUT请求与发送POST请求类似。要发送PUT请求,你要指定URL(包括要更新的对象的ID)和要更新的数据作为 put() 方法的第二个参数。

下面的例子将更新一个ID为10的对象:

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
title: "PUT request with Axios",
body: "PUT request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))

如何使用Axios在JavaScript中发送DELETE请求

要发送一个DELETE请求,你要在URL中指定要删除的对象的ID。

像往常一样,你必须在指定URL的同时指定要删除的对象的ID。

下面是一个例子:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
console.log(response);
})
.then((error) => console.log(error))

6. 如何使用SuperAgent在JavaScript中进行HTTP请求

SuperAgent是为在JavaScript中进行HTTP请求而建立的最古老的库之一。就像Axios一样,它支持承诺,并有预置的方法来向服务器发送各种HTTP请求。

要使用SuperAgent,请使用下面的命令安装它:

npm install superagent

我们将从一个GET请求的例子开始。

如何使用SuperAgent在JavaScript中发送GET请求

SuperAgent 为我们提供了一个用于发送 GET 请求的 get() 方法。URL作为该方法的参数被传入。

然后可以使用 end() 方法评估从请求中返回的承诺,如本例所示:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
console.log(response.body);
});

如何使用SuperAgent在JavaScript中发送POST请求

当使用 SuperAgent 发送 POST 请求时,您将把要发送到服务器的数据作为参数传递给 SuperAgent 的 send() 方法:

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
title: "POST request with SuperAgent",
body: "POST request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});

在上面的代码中,URL是作为 post() 方法的参数传入的。要发送的数据被传入 send() 方法。使用 end() 方法,我们得到了服务器的响应结果。

如何使用SuperAgent在JavaScript中发送一个PUT请求

你可以在SuperAgent中使用 put() 方法发送一个PUT请求。就像上一节中的例子一样,要更新的数据将作为参数传递给 send() 方法。

下面是一个例子:

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
title: "PUT request with SuperAgent",
body: "PUT request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});

如何使用SuperAgent在JavaScript中发送DELETE请求

要发送一个删除请求,你只需在URL中指定要删除的对象的ID。这将被用作 delete() 方法中的一个参数。

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
console.log(res.body);
});

7. 如何使用Qwest在JavaScript中进行HTTP请求

Qwest是一个用于与服务器交互的AJAX库。它目前在GitHub上存档,随着 fetch API和Axios的出现,创建者停止了对该库的维护。

Qwest还支持使用承诺。

在下面几个小节中,你将看到如何使用Qwest发送 GETPOSTPUTDELETE 请求。

如何使用Qwest在JavaScript中发送GET请求

Qwest有一个 get() 方法,可以用来发送GET请求。下面是如何使用它的方法:

qwest.get("https://jsonplaceholder.typicode.com/posts")
.then((xhr, response) => console.log(response));

如何使用Qwest在JavaScript中发送POST请求

作为第二个参数,要发送到服务器的数据将被传递到 post() 方法中。第一个参数是URL。

下面是一个例子:

qwest.post("https://jsonplaceholder.typicode.com/posts", {
title: 'POST request with Qwest',
body: 'POST request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

如何使用Qwest在JavaScript中发送PUT请求

这里的语法与上一节中的语法相同。你所要改变的只是请求类型,然后指定要更新的对象的ID以及你要更新的数据。

看一下这个例子:

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
title: 'PUT request with Qwest',
body: 'PUT request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

请注意,ID是在URL中指定的,而不是在被发送到服务器的对象中。

如何使用Qwest在JavaScript中发送DELETE请求

像往常一样,要从服务器上删除一个对象,你必须指定要删除的对象的URL和ID。要删除的对象的URL和ID都将作为参数传给Qwest的 delete() 方法。

下面是一个例子:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

一旦请求运行成功,一个ID为30的对象将被删除。

小结

我们使用JavaScript与服务器进行交互的能力已经发展了很多年。随着JavaScript开发者社区的不断壮大和活跃,我们仍在不断地做出改变,并引入新的工具来使这个过程更加简单和容易。

本教程中讨论的方法不仅适用于远程服务器–在构建全栈网络应用时,它们也可以用来与你自己的服务器进行交互。它们也适用于众多的JavaScript库和框架。

在本教程中,我们已经教你如何在JavaScript中进行HTTP请求。我们给出了各种例子和解释,展示了如何使用内置的JavaScript方法和第三方库发送GET、POST、PUT/PATCH和DELETE请求。

原文地址:https://www.wbolt.com/javascript-http-request.html

WordPress资讯

提高投资回报率的14大聊天机器人最佳实践

2024-1-22 1:09:24

WordPress资讯

银行业聊天机器人优点、使用案例和最佳实践

2024-1-22 1:09:26

个人中心
今日签到
有新私信 私信列表
搜索