Ajax系列之JSON數據格式

時間 2019-12-14

標籤 ajax 系列 json 數據格式欄目 Ajax 简体版

原文原文鏈接

JSON數據格式

JSON是什麼

JSON是一種輕量級的數據交換格式
JSON文件時獨立的,擴展名是".json"該文件中容許保存JSON格式的數據
注意: 在JSON文件中字符串必須是雙引號( " " )

示例代碼:json

{
  "動畫片" : [
    {
      "數碼寶貝" : [
        "亞古獸", "加魯魯獸"
      ],
      "大頭兒子小頭爸爸" : [
        "圍裙媽媽", "隔壁王叔叔"
      ]
    }
  ],
  "漫威" : [
    {
      "復仇者聯盟" : [
        "綠巨人", "奇異博士"
      ],
      "正義聯盟" : [
        "超人", "海王"
      ]
    }
  ]
}

JavaScript中的JSON

JSON是基於JavaScript語法,但與之不一樣的是JavaScript不是JSON,JSON也不是JavaScript
JavaScript類型:數組
- 對象和數組
- 數值
- 字符串
JSON的不一樣點:app
- 屬性名稱必須是雙引號括起來的字符串,最後一個屬性後不能有逗號
- 禁止出現前導零 - 好比"01,02,03等等"
- 只有有限的一些字符可能被轉義

示例代碼:post

<body>
<script>
    // JSON字符串 - 數據格式符合JSON格式的要求，類型是字符串類型
    var jsonString = '{"name" : "皮卡丘"}';
    // JSON對象 - JSON數據格式在JavaScript中的具體表現(對象和數組)
    var jsonObject = {
        name : '皮卡丘'
    };
    var jsonArr = [1,2,3,4];


</script>
</body>

JSON字符串與JSON對象

示例代碼:動畫

<script src="js/json2.js"></script>
</head>
<body>
<script>
    // JSON字符串
    var jsonString = '{"name" : "皮卡丘"}';

    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);

    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);

</script>
</body>

Ajax中的JSON

示例代碼:url

<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);
            }
        }

        // 請求數據格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

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

        var obj = {
            name : '哪吒',
            age : 26
        }
        /*var jsonString = JSON.stringify(obj);
        console.log(jsonString);// {"name":"哪吒","age":26}*/

        // 將JSON字符串轉換成符合請求數據的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });


</script>
</body>

Ajax中的XML

示例代碼:code

<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.textContent);
            }
        }
        xhr.open('post','server.xml');
        xhr.send(null);
    });


</script>
</body>