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
data.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
输出-
示例 3: 在这个示例中,我们使用JSON.parse()将上一个示例中获得的JSON数据转换为javascript对象。
HTML
输出: