Ajax之JSON数据格式

tech2024-08-01  51

JSON是什么

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

JSON语法结构

JSON建构于两种结构:

“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

JSON格式中作为值的类型允许是字符串(string)、数值(number)、true。false、null、对象(object)或数组(array)

JSON中的键值对集合

JSON格式中的名称/值对的集合是一个无序的“'名称/值'对”集合。一个对象以 {左括号 开始, }右括号 结束。每个“名称”后跟一个 :冒号 ;“‘名称/值’ 对”之间使用 ,逗号 分隔。

JSON中的值的有序列表

数组是值(value)的有序集合。一个数组以 [左中括号 开始, ]右中括号 结束。值之间使用 ,逗号 分隔。

JSON文件

JSON具有独立的文件,扩展名为“.json”。该文件中允许保存JSON格式的数据。

注意:在JSON文件中编写“名称/值”对的集合时,作为名称的Key必须使用双引号“”包裹

JavaScript与JSON

JSON是一种语法,用来序列化对象、数组、数值、字符串、布尔值、和null。它基于JavaScript语法,但与之不同;JavaScript不是JSON,JSON也不是JavaScript。

JavaScript类型JSON的不同点对象和数组属性名称必须是双引号括起来的字符串;最后一个属性后不能有逗号数值身出现前导零字符串只有有限的一些字符可能被转义

JSON字符串和JSON对象

JSON字符串就是指在JavaScript语言中内容格式符合JSON格式的字符串类型的数据。

var jsonText = '{"name":"小明","sex":"男"}'

JSON对象就是指JSON格式在JavaScript语言中的具体表现形式为对象或数组。

var jsonObject = { name: "小明", sex: "男" }

JavaScript的JSON对象

JavaScript语言中存在的JSON对象,该对象用于实现字符串与对象之间的转换。其提供以下两个方法:

JSON.parse(jsonString):将JSON字符串转换成JSON对象JSON.stringify(jsonObject) //将JSON对象转换成JSON字符串

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSON字符串与JSON对象</title> </head> <body> </body> <script> //JSON字符串 var jsonString = '{"name":"小明"}' //此对象具有浏览器兼容问题 var jsonObject = JSON.parse(jsonString) //将JSON字符串转换成JSON对象 console.log(jsonObject) var jsonResult = JSON.stringify(jsonObject) //将JSON对象转换成JSON字符串 console.log(jsonResult) </script> </html>

Ajax中的JSON

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ajax中的JSON</title> </head> <body> <button id="btn">请求</button> </body> <script src="../1.Ajax的基本用法/createXMLHttpRequest.js"></script> <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { var xhr = createXMLHttpRequest() xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { //1.接收数据-JSON数据格式,但是是字符串类型 var data = xhr.responseText //2.将符合JSON格式的字符串转换成JSON对象 var json = JSON.parse(data) //3.进行具体处理 console.log(json) } } //请求数据格式为 user=aaa&pwd=123123 xhr.open('post', 'server.json') xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') var obj = { name: '小红' } //将JSON数据转换成符合请求数据的格式 xhr.send('name=' + obj.name) }) </script> </html>

Ajax中的XML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ajax中的XML</title> </head> <body> <button id="btn">请求</button> </body> <script src="../1.Ajax的基本用法/createXMLHttpRequest.js"></script> <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { var xhr = createXMLHttpRequest() xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { //1.接收数据-responseXML属性,接收xml数据格式 var data = xhr.responseXML console.log(data) //2.利用DOM解析XML即可 var nameElement = data.getElementsByTagName('name')[0] console.log(nameElement); } } xhr.open('get', 'server.xml') xhr.send(null) }) </script> </html>
最新回复(0)