数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学在 AJAX 中解释 JSON？
JSON，即 JavaScript 对象表示法，是一种用于交换数据的简单格式。它是一种人类可读且机器可理解的格式。它基于 1999 年 12 月发布的标准 ECMA-262 第三版的 JavaScript 编程语言的一部分。尽管使用了 C 家族语言（C、C++、Java、JavaScript、Perl、Python 等等）程序员可以识别的约定，但 JSON 是一种完全独立于编程语言的文本格式。由于其特性和简单性，JSON 是交换数据的最佳语言。
AJAX 是一种用于构建交互式 Web 应用程序的 Web 开发方法。网页可以使用 AJAX 从服务器请求数据，而无需重新加载页面。JSON 格式是 AJAX 技术用来表示数据的格式之一。我们可以轻松地将任何信息或数据转换为 JSON 格式，这非常容易理解。
JSON 对象
在现代世界中，大多数开发者使用 JSON 而不是 XML 来交换服务器的数据。在 AJAX 中，JSON 比 XML 有一些优势。与 XML 相比，JSON 的代码更短，这使得数据传输更容易。JSON 也更容易被机器和人类理解。最后，JSON 可以轻松地表示字符串、数字、布尔值、数组或 Null 值。
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 发送请求。
4K+ 次浏览
