极客教程AJAX 解释JSON
AJAX 是一个非常流行的概念，用于在不重新加载页面的情况下更新页面。AJAX代表异步Javascript和XML，因此许多开发人员认为AJAX只会使用XML来导入和导出数据，但这是不正确的。AJAX可以使用XML来传输任何类型的数据，也可以传输JSON或任何其他纯文本数据。在本文中，我们将看到如何使用AJAX传输数据中的JSON。
JavaScript对象表示法（JSON） 是一种将数据存储起来并可以在计算机之间传输的格式。它非常易于理解，而且非常轻量级。JSON是任何简单的文本，可以转换为JavaScript对象和字符串。它与语言无关，许多编程语言都支持读取和生成JSON文本。
在AJAX中使用JSON而不是XML的优势：
- 与XML相比，JSON的代码更短，因此数据传输更流畅。
- 与XML相比，JSON更容易理解。
- 在JSON中，我们可以轻松表示NULL值。
AJAX通过请求和响应工作，意味着AJAX将从服务器请求任何内容，服务器将向AJAX返回响应。我们可以使用JavaScript中的内置对象“XMLHttpRequest”发送响应和获取请求。下面描述了XMLHttpRequest的一些属性和方法：
- new XMLHttpRequest： 它将创建一个新对象，通过该对象我们可以发送请求和接收响应。
- open()： 它会指定任何请求。它接受各种参数，如请求类型（GET或POST），服务器文件位置等。
- send()：用于向服务器发送请求。如果用于POST请求，则包含一个字符串参数。
- onload： 它是XMLHttpRequest对象的属性，用于定义在数据完全加载时将调用的函数。
- onreadystatechange： 它是XMLHttpRequest的属性，用于定义在ready state（就绪状态）更改时将被调用的函数。ready state也是XMLHttpRequest对象的属性。
- ready state： 它用于表示请求的状态。它可以有5个值，每个值都有不同的含义。
- 0表示请求未初始化
- 1表示与服务器的连接已建立
- 2表示请求已接收
- 3表示正在处理请求
- 4表示请求已完成
- status： 它是XMLHttpRequest的属性，用于表示请求的状态号码。
- responseText： 它是XMLHttpRequest的属性，用于将响应的数据以字符串形式返回。
使用AJAX发送请求的步骤：
-
创建一个新的XMLHttpRequest。
- 使用XMLHttpRequest的open()方法指定请求。
- 使用XMLHttpRequest的send()方法将请求发送到服务器。
从服务器获取响应的步骤：
- 使用XMLHttpRequest的“onload”或“onreadystatechange”属性定义一个函数，该函数将帮助我们在任何地方使用响应。
- 在该函数中，您可以使用responseText来在网页的任何位置显示您的数据，因为responseText包含响应数据作为一个字符串。
- 如果您使用了“onload”属性，则可以直接在函数内部使用responseText属性。但是，如果您使用了“onreadystatechange”，则必须使用if条件来验证readyState是否变为4，因为onreadystatechange将在readyState变化时每次调用该函数，但我们需要在readyState变为4时使用responseText来显示数据，因为只有当readyState变为4时，响应才完全加载。
通过示例我们将理解上述概念。
示例1： 在此示例中，我们将学习如何使用AJAX从服务器文件中GET数据。这里，我们采用JSON格式的服务器文件。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>JSON in AJAX</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
button {
margin-left: 36.5rem;
}
#container {
text-align: center;
}
</style>
<script>
function loadInformation() {
// Request
var request = new XMLHttpRequest();
request.open("GET", "./data.json");
request.send();
// Response
request.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// Also checked status==200 to
// verify its status is OK or not
console.log(this.responseText);
document.getElementById("container")
.innerHTML = this.responseText;
}
}
}
</script>
</head>
<body>
<h1>Geeks for Geeks</h1>
<h3>JSON in AJAX</h3>
<button onClick="loadInformation()">
Click to Load
</button>
<div id="container"></div>
</body>
</html>
data.json:
{
"name":"Manish",
"age":"22",
"city":"Kolkata"
}
输出：
JavaScript对象将被转换成JSON格式，然后这些数据将被传输到服务器端。在服务器端，JSON数据将被转换成服务器端语言。
JSON对象有两种方法，即stringify()和parse()方法，用于将JavaScript对象转换为JSON字符串，以及将JSON字符串转换回JavaScript对象。
- JSON.stringify(): 它将JavaScript对象转换成JSON格式字符串。
- JSON.parse(): 它将JSON字符串转换回JavaScript对象。
示例2： 在这个示例中，我们使用JSON.stringify()将JavaScript对象转换成JSON格式。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>JSON</title>
</head>
<body>
<script>
let gfg = {
name: "GeeksforGeeks",
Industry: "Software"
}
let ans = JSON.stringify(gfg);
console.log(ans);
</script>
</body>
</html>
输出-
示例 3： 在这个示例中，我们使用JSON.parse()将上一个示例中获得的JSON数据转换为javascript对象。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>JSON</title>
</head>
<body>
<script>
let gfg = {
name: "GeeksforGeeks",
Industry: "Software"
}
let ans = JSON.stringify(gfg);
console.log(ans);
let ob = JSON.parse(ans);
console.log(ob);
</script>
</body>
</html>
输出：
