HTML+CSS+JS-第16章 XML和JSON|P

HTML+CSS+JS-第2章 JQuery 进阶技术

第一阶段（A）（前端） 20天 120学时

第16章 XML和JSON|P

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握JavaScript JSON的数据结构和使用方法
掌握JavaScript XML数据结构和使用方法

[教学内容]

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息(传输)的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
Null

如：

<script type="text/javascript">

    var $json = {

        'array':[1,'你好',true],

        'number':123,

        'string':'hello',

        'boolean':true,

        'object':{

            'name':'张三',

            'pswd':123456

        }

    }

</script>

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

JSON 对象

访问对象值

可以使用点号（.）来访问对象的值，也可以使用中括号（[]）来访问对象的值

实例：demo01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        var $json = {

            'array':[1,'你好',true],

            'number':123,

            'string':'hello',

            'boolean':true,

            'object':{

                'name':'张三',

                'pswd':123456

            }

        }

        console.log($json.string);

        console.log($json['number']);

    </script>

</html>

效果图

删除对象属性

可以使用 delete 关键字来删除 JSON 对象的属性

实例：demo02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        var $json = {

            'array': [1, '你好', true],

            'number': 123,

            'string': 'hello',

            'boolean': true,

            'object': {

                'name': '张三',

                'pswd': 123456

            }

        }

        delete $json.array;

        delete $json['object'];

        for($i in $json) {

            console.log($json[$i]);

        }

    </script>

</html>

效果图

JSON文件读取

var request = null;

if(window.XMLHttpRequest) {

    request = new XMLHttpRequest();

} else if(window.ActiveXObject) {

    request = new window.ActiveXObject();

} else {

    request("您的浏览器版本过低");

}

if(request != null) {

    request.open(method, file, true);

    request.send(null);

    request.onreadystatechange = function() {

        if(request.readyState == 4 && request.status == 200) {

            //console.log(request.responseText)

            callback(JSON.parse(request.responseText));

        }

    };

}

JSON解析

JSON.parse()：JSON字符串转JavaScript 对象

JSON.parse(text[, function])

参数说明：

text:必需，一个有效的 JSON 字符串。
function(key,value): 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

实例：demo03

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        var $json = '{"number":123,"string":"hello","boolean":true}';

        var $obj = JSON.parse($json,function($key,$value){

            if ($key == "number") {

                return 789;

            }

            return $value;//这句不能少，处理不满足if的情况的其他数据

        });

        console.log($obj.number);

        console.log($obj['string']);

    </script>

</html>

效果图

JSON.stringify()：JavaScript 对象串转JSON字符

JSON.stringify(value[, function[, space]])

参数说明：

value：必需，一个有效的 JSON 对象。
function(key,value)：可选。用于转换结果的函数或数组。
space：可选，文本添加缩进、空格和换行符，数字：缩进的空格，或者\t。

实例：demo04

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        var $obj = {

            'number': 123,

            'string': 'hello',

            'boolean': true,

            'object': {

                'name': '张三',

                'pswd': 123456

            }

        }

        var $json = JSON.stringify($obj,function($key,$value){

            if ($key == 'boolean') {

                return false;

            }

            return $value;//这句不能少，处理不满足if的情况的其他数据

        },4);



        console.log($json);

    </script>

</html>

效果图

{

"number": 123,

"string": "hello",

"boolean": false,

"object": {

"name": "张三",

"pswd": 123456

}

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

服务端JSONP格式数据

如客户想访问 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data . ")";

?>

客户端实现 callbackFunction 函数

<script type="text/javascript">

    function callbackFunction(result, methodName){

        var html = '<ul>';

        for(var i = 0; i < result.length; i++)

        {

            html += '<li>' + result[i] + '</li>';

        }

        html += '</ul>';

        document.getElementById('divCustomers').innerHTML = html;

    }

</script>

客户端页面完整代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JSONP 实例</title>

    </head>

    <body>

        <div id="divCustomers"></div>

        <script type="text/javascript">

            function callbackFunction(result, methodName) {

                var html = '<ul>';

                for(var i = 0; i < result.length; i++) {

                    html += '<li>' + result[i] + '</li>';

                }

                html += '</ul>';

                document.getElementById('divCustomers').innerHTML = html;

            }

        </script>

        <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

    </body>

</html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JSONP 实例</title>

        <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

    </head>

    <body>

        <div id="divCustomers"></div>

        <script>

            $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

                var html = '<ul>';

                for(var i = 0; i < data.length; i++) {

                    html += '<li>' + data[i] + '</li>';

                }

                html += '</ul>';

                $('#divCustomers').html(html);

            });

        </script>

    </body>

</html>

XML

XML 指可扩展标记语言（eXtensible Markup Language）。

XML 被设计用来传输和存储数据。

XML 语法规则

XML 元素名和HTML不一样，没有固定的单词，需要自定义。
XML 必须包含根元素，它是所有其他元素的父元素，根元素标签名自定义。
XML 所有的元素都必须有一个关闭标签
XML 标签必须正确嵌套
XML 属性值必须加引号
XML 标签对大小写敏感。标签 <Letter> 与标签 <letter> 是不同的
XML 声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：

<?xml version="1.0" encoding="utf-8"?>

案例：

<?xml version="1.0" encoding="utf-8"?>

<bookstore>

    <book category="CHILDREN">

        <title>Harry Potter</title>

        <author>J K. Rowling</author>

        <year>2005</year>

        <price>29.99</price>

    </book>

    <book category="WEB">

        <title>Learning XML</title>

        <author>Erik T. Ray</author>

        <year>2003</year>

        <price>39.95</price>

    </book>

</bookstore>

XML 解析

XML字符串转DOM对象

下面的代码片段把 XML 字符串解析到 XML DOM 对象中

<bookstore>

    <book category="CHILDREN">

        <title>Harry Potter</title>

        <author>J K. Rowling</author>

        <year>2005</year>

        <price>29.99</price>

    </book>

    <book category="WEB">

        <title>Learning XML</title>

        <author>Erik T. Ray</author>

        <year>2003</year>

        <price>39.95</price>

    </book>

</bookstore>

实例;demo05

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

         </head>

         <body>

         </body>

         <script type="text/javascript">

                   txt = '<bookstore>'+

                                         '<book category="CHILDREN">'+

                                             '<title>Harry Potter</title>'+

                                             '<author>J K. Rowling</author>'+

                                             '<year>2005</year>'+

                                             '<price>29.99</price>'+

                                         '</book>'+

                                         '<book category="WEB">'+

                                             '<title>Learning XML</title>'+

                                             '<author>Erik T. Ray</author>'+

                                             '<year>2003</year>'+

                                             '<price>39.95</price>'+

                                         '</book>'+

                                     '</bookstore>';



                   if(window.DOMParser) {

                            parser = new DOMParser();

                            xmlDoc = parser.parseFromString(txt, "text/xml");

                   } else {// Internet Explorer

                            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

                            xmlDoc.async = false;

                            xmlDoc.loadXML(txt);

                   }

                   Array.prototype.slice.call(xmlDoc.querySelectorAll('book')).forEach(function(e,i){

                            console.log(i);

                   })

         </script>

</html>

效果图

[作业实验]

实现如下三级级联地址选择器

HTML+CSS+JS-第1章 JQuery基础语法