解释一下AJAX中的JSON

JSON，即JavaScript对象符号，是一种交换数据的简单格式。它是一种人类可读和机器可理解的格式。它是基于ECMA-262标准的一部分，第三版，1999年12月的JavaScript编程语言。尽管使用了C语言家族（C、C++、Java、JavaScript、Perl、Python和许多其他语言）的程序员可以识别的约定，JSON是一种完全独立于编程语言的文本格式。由于JSON的特点和简单性，它是交换数据的最佳语言。

AJAX是一种用于构建交互式网络应用程序的网络开发方法。网页可以使用AJAX向服务器请求数据，而无需重新加载页面。JSON格式是AJAX技术用来表示数据的一种。我们可以轻松地将任何信息或数据转换为JSON格式，这非常容易理解。

JSON对象

在现代社会，大多数开发人员使用JSON而不是XML来交换服务器的数据。当涉及到AJAX时，JSON比XML有一些好处。与XML相比，JSON的代码更短，这使得数据传输更容易。JSON也更容易被机器和人类理解。最后，JSON使表示字符串、数字、布尔值、数组或空值变得简单。

JavaScript对象可以很容易地被转换为JSON并被发送到服务器。然后，JSON数据将在服务器端被追究。使用JSON对象的stringify()和parse()方法，将JavaScript对象转换为JSON字符串，并返回到JavaScript对象。

JSON.stringify() – 这个函数将一个JavaScript对象变成JSON格式的字符串。
JSON.parse() – JSON字符串可以被转化为一个JavaScript对象。

XMLHttpRequest的属性和方法

AJAX使用请求和响应模型，这意味着它可以向服务器请求任何东西，并接收响应作为回报。我们有一个内置的Javascript对象，叫做 “XMLHttpRequest”，我们可以用它来发送响应和接收请求。下面是对XMLHttpRequest的一些属性和方法的描述–

new XMLHttpRequest – 这将创建一个新的对象，我们可以用它来提交请求和获得响应。
open() – 这个函数允许任何请求。它需要几个参数，包括请求类型（GET或POST）、服务器文件位置等。
onload – XMLHttpRequest对象的onload字段指定了一个在数据加载完成时调用的函数。
send() – send() 函数向服务器发送一个请求。如果它被用于POST请求，它有一个字符串作为参数。
status – 用于表达任何请求的状态编号的XMLHttpRequest属性是status。
onreadystatechange – 这个XMLHttpRequest属性允许你指定一个当准备状态改变时将被调用的函数。XMLHttpRequest对象也有一个叫做readystate的属性。
responseText – 这个XMLHttpRequest属性将响应的数据作为一个字符串返回。
readystate – 这标识了请求的当前状态。它最多有5个可能的值，每个都有独特的含义。0表示该请求没有被启动。1表示成功连接到服务器。2表示收到了请求。3表示请求的处理。4表示请求的完成。

用AJAX发送请求

以下是使用AJAX发送请求的步骤

开发一个新的XMLHttpRequest对象
指定你想请求的URL
调用open()方法，将HTTP方法和URL作为参数传入。
为onreadystatechange事件添加一个事件监听器
调用send()方法，传入要与请求一起发送的任何数据。
处理回应

例子 1- 通过AJAX获取JSON对象

在这个例子中，我们使用AJAX来执行HTTP请求，并以JSON的形式获得响应。我们使用XMLHttpRequest对象以及open和onload方法来执行AJAX调用。我们使用了一个按钮点击事件来执行AJAX调用并在网页上显示响应。

<html>
<body>
   <h2> JSON and AJAX </h2>
   <button onclick = "getJSON()">
   Click on the button to get JSON data by AJAX call
   </button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"> </div>
   <script>
      function getJSON() {
         //AJAX Call
         let http = new XMLHttpRequest()
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
         http.onload = function () {
            document.getElementById('root').innerHTML =
            'JSON response: <br /><br />' + this.response
         }
         http.send()
      }
   </script>
</body>
</html>

例2：通过AJAX发送JSON对象

在这个例子中，我们使用AJAX来执行一个HTTP请求，并将JSON数据发送到服务器。我们在AJAX调用中使用POST方法来向服务器发送数据。我们使用XMLHttpRequest对象以及open和onload方法。我们使用了一个按钮点击事件来执行AJAX调用，并在JSON数据成功发送到服务器时显示一个消息。

<html>
<body>
   <h2> JSON and AJAX </h2>
   <p id = "mypara" style = "border: 1px solid black"> JSON object: </p>
   <button onclick = "postJSON()">
   Click on the button to send JSON data by AJAX call
   </button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let JSON_OBJECT =
      '{"name": "ABC", "class": 10, "roll": 12, "subject": "Computer"}'
      //Showing JSON_OBJECT in the webpage
      document.getElementById('mypara').innerHTML += '<br />' + JSON_OBJECT
      function postJSON() {
         //AJAX Call
         let http = new XMLHttpRequest()
         http.open('POST', 'https://jsonplaceholder.typicode.com/posts/')
         http.onload = function () {
            document.getElementById('root').innerHTML =
            'JSON data send successfully!'
         }
         http.send(JSON_OBJECT)
      }
   </script>
</body>
</html>

在本教程中，我们了解了AJAX中的JSON。我们了解了JSON对象、XMLHttpRequest的属性和方法以及用AJAX发送请求。