在没有jQuery的情况下,使用原生JavaScript发送和接收JSON数据

在现代web开发中,JSON是一种非常流行的数据交换格式。然而,如果您不想使用像jQuery这样的库,该怎么办呢?本文将介绍如何使用原生JavaScript将JSON数据发送到服务器并接收响应。

发送JSON数据到服务器

要发送JSON数据,我们需要创建一个XMLHttpRequest对象,并将其配置为发送POST请求。我们还需要设置请求标头以指定Content-Type为"application/json",以便服务器知道它正在接收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