网站的前端和后端之间的互动是通过HTTP请求实现的。像更新数据库中的新/老用户、从你的WordPress仪表盘发布博文、从你的个人资料中删除图片、更新你的简历等功能都需要服务器和客户端之间的互动来修改数据。
在构建网络应用时–包括前端和全栈网络应用–我们经常与存储在不同数据库和服务器上的数据进行交互。这些服务器可能属于第三方,也可能是由项目的开发者创建的。
为了与这些服务器互动,我们可以使用不同的HTTP方法来请求数据。我们可以使用专门的HTTP动词,如POST、GET、PUT/PATCH和DELETE,在服务器上创建、读取、更新和删除(或CRUD)数据。
在本教程中,你将学习向远程服务器发出HTTP请求并在JavaScript中执行CRUD操作的各种方法。
每一节都会介绍一种发送HTTP请求的新方法。我们将从内置的方法开始,比如fetch API和XMLHttpRequest对象,然后再看看一些开源的HTTP请求库,比如Axios和SuperAgent。
- 什么是JavaScript HTTP请求?
- 如何用JavaScript进行HTTP请求
什么是JavaScript HTTP请求?
JavaScript中的HTTP请求是一组预定义的方法,用于与存储在服务器上的数据进行交互。
每个发送到服务器的请求包括一个端点和正在发送的请求类型。你可以把端点视为两个程序之间的网关,即客户端和服务器。
客户端是发送请求的程序,而服务器是接收请求的程序。服务器会根据请求的有效性发回一个响应。如果请求成功,服务器会发回XML或JSON格式的数据(大多数情况下是JSON),如果请求失败,服务器会发回一个错误信息。
服务器发回的响应通常与状态码有关。这些代码帮助我们理解当服务器收到一个请求时,它想说什么。下面是其中的一些代码和它们的含义:
我们将在接下来的章节中更多地讨论其中的一些内容。
在下一节中,你将看到在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请求,你应该确保正确完成以下工作:
- 创建一个新的XMLHttpRequest对象。
- 通过指定请求类型和端点(服务器的URL)打开一个连接。
- 发送请求。
- 听取服务器的响应。
现在,我们已经看到了一些使用XMLHttpRequest发送POST请求的步骤,让我们看看一个代码实例:
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
的变量中。它持有三个属性: title
, body
, 和 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()
方法或 async
和 await
关键字来访问。
我们来看看一个例子:
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请求。就像大多数现代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发送 GET
、 POST
、 PUT
和 DELETE
请求。
如何使用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