AJAX 解释JSON

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>
JavaScript

data.json:

{
    "name":"Manish",
    "age":"22",
    "city":"Kolkata"
}
JavaScript

输出:

AJAX 解释JSON

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>
JavaScript

输出-

AJAX 解释JSON

示例 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>
JavaScript

输出:

AJAX 解释JSON

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册