在现代web开发中，JSON是一种非常流行的数据交换格式。然而，如果您不想使用像jQuery这样的库，该怎么办呢？本文将介绍如何使用原生JavaScript将JSON数据发送到服务器并接收响应。
发送JSON数据到服务器
要发送JSON数据，我们需要创建一个XMLHttpRequest对象，并将其配置为发送POST请求。我们还需要设置请求标头以指定Content-Type为"application/json"，以便服务器知道它正在接收JSON数据。
const request = new XMLHttpRequest();
request.open('POST', '/endpoint');
request.setRequestHeader('Content-Type', 'application/json');
const data = { foo: 'bar' };
const json = JSON.stringify(data);
request.send(json);在上面的示例中，我们首先创建了一个XMLHttpRequest对象。然后，我们调用open方法，该方法接受HTTP方法（POST）和服务器端点URL作为参数。接下来，我们通过setRequestHeader方法设置请求标头，以指定Content-Type为“application/json”。最后，我们将JSON数据作为请求正文发送。
接收JSON响应
一旦服务器处理了我们的请求并做出响应，我们可以使用XMLHttpRequest对象的responseText属性检索响应正文，并使用JSON.parse方法将其解析为JavaScript对象。
-- -------------------- ---- -------
----- ------- - --- -----------------
-------------------- -------------
---------------------------------------- --------------------
----- ---- - - ---- ----- --
----- ---- - ---------------------
-------------------
-------------- - ---------- -
-- --------------- -- --- -- -------------- - ---- -
----- -------- - ---------------------------------
----------------------
- ---- -
----------------------
-
--在上面的示例中，我们在XMLHttpRequest对象上设置了一个onload事件处理程序，以便在响应返回时处理它。如果响应状态码在200到299之间，我们将响应正文解析为JavaScript对象并将其输出到控制台。
结论
虽然使用像jQuery这样的库可以使发送和接收JSON数据变得更加容易和简单，但使用原生JavaScript也是完全可行的。通过使用XMLHttpRequest对象和一些简单的JavaScript代码，我们可以轻松地发送和接收JSON数据，从而提高我们应用程序的交互性和响应能力。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ------- - --- -----------------
-------------------- -------------
---------------------------------------- --------------------
----- ---- - - ---- ----- --
----- ---- - ---------------------
-------------------
-------------- - ---------- -
-- --------------- -- --- -- -------------- - ---- -
----- -------- - ---------------------------------
----------------------
- ---- -
----------------------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14797