[Ajax] JSON数据格式

JSON是什么

JSON是什么

JSON中文官网地址

是一种轻量级的数据交换格式

JSON是独立于任何语言的文本格式。易于程序员阅读和编写,同时也易于计算机解析和生成。

 

JSON语法规则
  • “名称/值”对的集合(Acollection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table ),有键列表(keyed list),或者关联数组(associative array)

  • 值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

值(value)可以是双引号括起来的字符串(string)、数值(number)、truefalsenull、对象(object)或者数组(array)。这些结构可以嵌套。

[Ajax] JSON数据格式_第1张图片

 

JSON中的键值对集合

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

[Ajax] JSON数据格式_第2张图片

 

JSON中的值的有序列表

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

[Ajax] JSON数据格式_第3张图片

 

JSON文件

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

在写.json文件的时候,必须用" "不能够用' '

 
 

JavaScript中的JSON

JavaScript与JSON

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

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

 

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

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

 

JavaScript的JSON对象
  • JSON.parse()方法:解析JSON字符串并返回对应的值。

  • JSON.stringify()方法:返回与指定值对应的JSON字符串。

JSON3下载地址

在这里插入图片描述

var jsonString = '{"name" :"张无忌"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    var jsonResult =JSON.stringify(jsonObject);
    console.log(jsonResult);

 
 

Ajax中的JSON

构建JSON格式数据

通过Ajax向服务器端提交异步请求时,允许使用JSON格式的请求数据

[Ajax] JSON数据格式_第4张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<button id='btn'>请求button>
<script src="js/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格式的字符串类型数据进行转换
                var json = JSON. parse(data);
                //3.进行具体处理
                console.log(json)
            }
        }

        xhr.open('post','server.json')

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

        var obj = {
            name:'周芷若',
            age:18
        }
        // var jsonString = JSON.stringify(obj)

        //将JSON字符串转换成符合请求数据的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age)
    })
script>
body>
html>

 

接收JSON格式数据

 

XML

[Ajax] JSON数据格式_第5张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<button id='btn'>请求button>
<script src="js/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;
                //2.利用DOM解析XML即可
                var nameElement = data.getElementsByTagName('name')[0]
                console.log(nameElement);
            }
        }

        xhr.open('post','server.xml')
        xhr.send(null)
    })
script>

body>
html>

你可能感兴趣的:(#,全面掌握Ajax,json,ajax,html,js)