Ajax之JSON数据格式

最新推荐文章于 2024-07-21 22:36:34 发布

原创最新推荐文章于 2024-07-21 22:36:34 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ajax #dom

本文介绍了JSON（JavaScript Object Notation）数据交换格式，它是基于ECMAScript的一个子集，适用于人和机器阅读。JSON包含两种结构：键值对集合和值的有序列表。在JSON文件中，键值对的键必须用双引号包围。JavaScript与JSON紧密相关，提供了JSON对象进行字符串和对象间的转换，如JSON.parse()和JSON.stringify()。在Ajax中，JSON常用于数据交换，替代XML。

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>