NOKIA 有句著名的广告语:“科技以人为本”。任何技术都是为了满足人的生产生活需要而产生的。具体到小小的一个手机,里面蕴含的技术也是浩如烟海,是几千年来人类科技的结晶,单个人穷其一生也未必能掌握其一角。不过个人一直认为基本的技术和思想是放之四海而皆准的,许多技术未必需要我们从头到尾再研究一遍,我们要做的就是站在巨人的肩膀上,利用其成果来为人们的需求服务。

  随着移动互联网时代的大潮,越来越多的App不光是需要和网络服务器进行数据传输和交互,也需要和其他 App 进行数据传递。承担App与网络来进行传输和存储数据的一般是XML或者JSON。在移动互联网时代,XML和JSON很重要。

  最近一段时间,个人综合了之前对XML、JSON的一些了解,参考了相关资料,再结合视频的代码,把自己的一些思考融入了这篇总结文档中,同时尝试用通俗诙谐的语言风格来阐述,期望能给感兴趣的读者带来帮助。

  为了不和时代落伍,我们必须要学习 XML 和 JSON

1、XML 简介

XML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。如何定义这些标记,既可以选择国际通用的标记语言,比如HTML,也可以使用象XML这样由相关人士自由决定的标记语言,这就是语言的可扩展性。XML是从SGML中简化修改出来的。它主要用到的有XML、XSL和XPath等。

  上面这段是对XML的一个基本定义,一个被广泛接受的说明。简单说,XML就是一种数据的描述语言,虽然它是语言,但是通常情况下,它并不具备常见语言的基本功能——被计算机识别并运行。只有依靠另一种语言,来解释它,使它达到你想要的效果或被计算机所接受。

  记住以下几点就行了:

  • XML是一种标记语言,很类似HTML
  • XML的设计宗旨是传输数据,而非显示数据
  • XML标签没有被预定义。您需要自行定义标签。
  • XML被设计为具有自我描述性。
  • XML是W3C的推荐标准

  总结:

  XML是独立于软件和硬件的信息传输工具。 目前,XML在Web中起到的作用不会亚于一直作为 Web 基石的 HTML。 XML无所不在。XML是各种应用程序之间进行数据传输的最常用的工具,并且在信息存储和描述领域变得越来越流行。

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

HTML 被设计用来显示数据

XML 应用于 web 开发的许多方面,常用于简化数据的存储和共享。

XML 把数据从 HTML 分离
如果你需要在 HTML 文档中显示动态数据,那么每当数据改变时将花费大量的时间来编辑 HTML。

通过 XML,数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示,并确保修改底层数据不再需要对 HTML 进行任何的改变。

通过使用几行 JavaScript,你就可以读取一个外部 XML 文件,然后更新 HTML 中的数据内容。

XML 简化数据共享

在真实的世界中,计算机系统和数据使用不兼容的格式来存储数据。

XML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。

这让创建不同应用程序可以共享的数据变得更加容易。

XML 简化数据传输

通过 XML,可以在不兼容的系统之间轻松地交换数据。

对开发人员来说,其中一项最费时的挑战一直是在因特网上的不兼容系统之间交换数据。

由于可以通过各种不兼容的应用程序来读取数据,以 XML 交换数据降低了这种复杂性。

XML 简化平台的变更

升级到新的系统(硬件或软件平台),总是非常费时的。必须转换大量的数据,不兼容的数据经常会丢失。

XML 数据以文本格式存储。这使得 XML 在不损失数据的情况下,更容易扩展或升级到新的操作系统、新应用程序或新的浏览器。

XML 使您的数据更有用

由于 XML 独立于硬件、软件以及应用程序,XML 使您的数据更可用,也更有用。

不同的应用程序都能够访问您的数据,不仅仅在 HTML 页中,也可以从 XML 数据源中进行访问。

通过 XML,您的数据可供各种阅读设备使用(手持的计算机、语音设备、新闻阅读器等),还可以供盲人或其他残障人士使用。

1.1 XML属性

  1.1.1 XML与HTML的主要差异

  • XML不是HTML的替代。
  • XML和HTML为不同的目的而设计。
  • XML被设计为传输和存储数据,其焦点是数据的内容。
  • HTML被设计用来显示数据,其焦点是数据的外观。
  • HTML旨在显示信息,而 XML 旨在传输信息

  1.1.2 XML是不作为的。

  也许这有点难以理解,但是XML不会做任何事情。XML被设计用来结构化、存储以及传输信息

  下面是John写给George的便签,存储为XML:

1

2

3

4

5

6

<note>

<to>George</to>

<from>John</from>

<heading>Reminder</heading>

<body>Don't forget the meeting!</body>

</note>

  上面的这条便签具有自我描述性。它拥有标题以及留言,同时包含了发送者和接受者的信息。但是,这个 XML 文档仍然没有做任何事情。它仅仅是包装在XML标签中的纯粹的信息。我们需要编写软件或者程序,才能传送、接收和显示出这个文档。

  1.1.3 XML仅仅是纯文本

  XML没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理XML。 不过,能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。

  1.1.4 XML允许自定义标签

  上例中的标签没有在任何XML标准中定义过(比如和)。这些标签是由文档的创作者发明的。这是因为XML没有预定义的标签。

  在HTML中使用的标签(以及HTML的结构)是预定义的。HTML文档只使用在HTML标准中定义过的标签(比如<p><h1> 等等)。

  XML允许创作者定义自己的标签和自己的文档结构。

  1.1.5 XML不是对HTML的替代

  XML是对HTML的补充。

  XML不会替代HTML,理解这一点很重要。在大多数 web 应用程序中,XML用于传输数据,而HTML用于格式化并显示数据。

 1.2 XML的语法

  XML的语法规则很简单,且很有逻辑。这些规则很容易学习,也很容易使用。

  1.2.1 所有元素都必须有关闭标签

  在XML中,省略关闭标签是非法的。所有元素都必须有关闭标签。 在HTML,经常会看到没有关闭标签的元素:

1

2

<p>This is a paragraph

<p>This is another paragraph

  在XML中,省略关闭标签是非法的。所有元素都必须有关闭标签:

1

2

<p>This is a paragraph</p>

<p>This is another paragraph</p>

  注释:您也许已经注意到XML声明没有关闭标签。这不是错误。声明不属于XML本身的组成部分。它不是XML元素,也不需要关闭标签。

  1.2.2 XML标签对大小写敏感

  XML元素使用XML标签进行定义。

  XML标签对大小写敏感。在XML中,标签与标签是不同的。

  必须使用相同的大小写来编写打开标签和关闭标签:

1

2

<Message>这是错误的。</message>

<message>这是正确的。</message>

  1.2.3 XML标签对大小写敏感

  在 HTML 中,常会看到没有正确嵌套的元素:

1

<b><i>This text is bold and italic</b></i>

  在 XML中,所有元素都必须彼此正确地嵌套:

1

<b><i>This text is bold and italic</i></b>

  在上例中,正确嵌套的意思是:由于<i>元素是在<b>元素内打开的,那么它必须在<b>元素内关闭。

  1.2.4 XML文档必须有根元素

  XML文档必须有一个元素是所有其他元素的父元素。该元素称为根元素。

1

2

3

4

5

<root>

  <child>

    <subchild>.....</subchild>

  </child>

</root>

  1.2.5 XML的属性值须加引号

  与 HTML 类似,XML 也可拥有属性(名称/值的对)。 在 XML 中,XML 的属性值须加引号。请研究下面的两个 XML 文档。第一个是错误的,第二个是正确的:

1

2

3

4

5

6

7

8

9

<note date=08/08/2008>

<to>George</to>

<from>John</from>

</note>

<note date="08/08/2008">

<to>George</to>

<from>John</from>

</note>

  1.2.6 实体引用

  在 XML 中,一些字符拥有特殊的意义。 如果你把字符 “<” 放在 XML 元素中,会发生错误,这是因为解析器会把它当作新元素的开始。 这样会产生 XML 错误:

1

<message>if salary < 1000 then</message>

  为了避免这个错误,请用实体引用来代替 “<” 字符:

1

<message>if salary &lt; 1000 then</message>

  在 XML 中,有 5 个预定义的实体引用:

1

2

3

4

5

&lt;    <   小于

&gt;    >   大于

&amp;   &   和号

'  '   单引号

&quot;  "   引号

  注释:在 XML 中,只有字符 “<” 和 “&” 确实是非法的。大于号是合法的,但是用实体引用来代替它是一个好习惯。

  1.2.7 XML中的注释

  在 XML 中编写注释的语法与 HTML 的语法很相似:

1

<!-- This is a comment -->

  在 XML 中,空格会被保留 HTML 会把多个连续的空格字符裁减(合并)为一个:

1

HTML:   Hello           my name is David.

  输出: Hello my name is David. 在 XML 中,文档中的空格不会被删节。

  1.2.8 以 LF 存储换行

  在 Windows 应用程序中,换行通常以一对字符来存储:回车符 (CR) 和换行符 (LF)。这对字符与打字机设置新行的动作有相似之处。在 Unix 应用程序中,新行以 LF 字符存储。而 Macintosh 应用程序使用CR来存储新行。

 1.3 XML CDATA

  所有XML文档中的文本均会被解析器解析。

  只有CDATA区段(CDATA section)中的文本会被解析器忽略。

  1.3.1 PCDATA

  PCDATA指的是被解析的字符数据(Parsed Character Data)。

  XML解析器通常会解析XML文档中所有的文本。 当某个XML元素被解析时,其标签之间的文本也会被解析:

1

<message>此文本也会被解析</message>

  解析器之所以这么做是因为 XML 元素可包含其他元素,就像这个例子中,其中的元素包含着另外的两个元素(first和last):

1

<name><first>Bill</first><last>Gates</last></name>

  而解析器会把它分解为像这样的子元素:

1

2

3

4

<name>

   <first>Bill</first>

   <last>Gates</last>

</name>

  1.3.2 转义字符

  非法的XML字符必须被替换为实体引用(entity reference)。

  假如您在XML文档中放置了一个类似 “<” 字符,那么这个文档会产生一个错误,这是因为解析器会把它解释为新元素的开始。因此你不能这样写:

1

<message>if salary < 1000 then</message>

  为了避免此类错误,需要把字符 “<” 替换为实体引用,就像这样:

1

<message>if salary &lt; 1000 then</message>

  在 XML 中有 5 个预定义的实体引用:

1

2

3

4

5

&lt;    <   小于

&gt;    >   大于

&amp;   &   和号

'  '   省略号

&quot;  "   引号

  注释:严格地讲,在XML中仅有字符”<“和”&“是非法的。省略号、引号和大于号是合法的,但是把它们替换为实体引用是个好的习惯。

  1.3.3 CDATA

  术语CDATA指的是不应由XML解析器进行解析的文本数据(Unparsed Character Data)。

  在 XML 元素中,”<“ 和 ”&“ 是非法的。

  “<” 会产生错误,因为解析器会把该字符解释为新元素的开始。 “&” 也会产生错误,因为解析器会把该字符解释为字符实体的开始。

  某些文本,比如 JavaScript 代码,包含大量 “<” 或 “&” 字符。为了避免错误,可以将脚本代码定义为 CDATA。 CDATA 部分中的所有内容都会被解析器忽略。 CDATA 部分由 “<![CDATA[” 开始,由 “]]>” 结束:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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

<response>

  <header>

    <respcode>0</respcode

    <total>1736</total>

  </header

  <result>

    <album>

      <album_id>320305900</album_id

      <title> <![CDATA[ 电影侃侃之初恋永不早 ]]> </title

      <tag> <![CDATA[ 18岁以上 当代 暧昧 华语 ]]> </tag

      <img>http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_120_160.jpg</img

      <img180236>http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_180_236.jpg</img180236

      <img11577>http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_115_77.jpg</img11577

      <img220124>http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_284_160.jpg</img220124

      <category_id>1</category_id

      <score>0.0</score

      <voters>0</voters

      <tv_sets>0</tv_sets

      <duration>00:38:57</duration

      <year> <![CDATA[ 2014 ]]> </year

      <tv_focus>跟爱情片学把妹心经</tv_focus

      <episode_count>1</episode_count

      <directors> <![CDATA[ 关雅荻 ]]> </directors

      <mainactors> <![CDATA[ 关雅荻 ]]> </mainactors

      <actors> <![CDATA[ ]]> </actors

      <vv2> <![CDATA[ 15 ]]> </vv2

      <timeText> <![CDATA[ 今天 ]]> </timeText

      <first_issue_time> <![CDATA[ 2014-10-16 ]]> </first_issue_time

      <up>0</up

      <down>0</down

      <download>1</download

      <purchase_type>0</purchase_type

      <hot_or_new>0</hot_or_new

      <createtime>2014-10-16 12:25:08</createtime

      <purchase>0</purchase

      <desc> <![CDATA[

本期节目主持人介绍新近上映的口碑爱情片,。主持人轻松幽默的罗列出胡鳄鱼导演拍摄的爱情片越来越接地气,博得观众的认同和追捧,更提出“初恋永远不嫌早”的口号。观众可以跟着爱情片学习把妹心经。

]]> </desc

      <ip_limit>1</ip_limit

      <episodes/>

    </album>

  </result>

</response>

  这是展示一部电影的具体数据,包括标题、介绍、内容、导演、演员、时长、上映年份等很多内容。

 1.5 XML树结构

  XML文档形成了一种树结构,它从“根部”开始,然后扩展到“枝叶”。

  1.5.1 一个XML文档实例

  XML使用简单的具有自我描述性的语法:

1

2

3

4

5

6

7

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>George</to>

<from>John</from>

<heading>Reminder</heading>

<body>Don't forget the meeting!</body>

</note>

  第一行是XML声明。它定义XML的版本(1.0)和所使用的编码(ISO-8859-1=Latin-1/西欧字符集)。

  下一行描述文档的根元素(像在说:“本文档是一个便签”):

1

<note>

  接下来 4 行描述根的 4 个子元素(to, from, heading 以及 body):

1

2

3

4

<to>George</to>

<from>John</from>

<heading>Reminder</heading>

<body>Don't forget the meeting!</body>

  最后一行定义根元素的结尾:

1

</note>

  从本例可以设想,该XML文档包含了John给George的一张便签。

  • XML具有出色的自我描述性,你同意吗?
  • XML文档形成一种树结构
  • XML文档必须包含根元素。该元素是所有其他元素的父元素。
  • XML文档中的元素形成了一棵文档树。这棵树从根部开始,并扩展到树的最底端。

  所有元素均可拥有子元素:

1

2

3

4

5

<root>

  <child>

    <subchild>.....</subchild>

  </child>

</root>

  父、子以及同胞等术语用于描述元素之间的关系。父元素拥有子元素。相同层级上的子元素成为同胞(兄弟或姐妹)。

  所有元素均可拥有文本内容和属性(类似HTML中)。

 1.6 XML DOM

  想到这里,大家都有点迫不及待了,XML 文件到底如何解析呢?

  但是,别急,让子弹先飞会儿:–)

  在XML解析之前,我们必须系统性的学习一下 XML DOM 知识:

  1.6.1 定义

  XML DOM(XML Document Object Model) 定义了访问和操作XML文档的标准方法。

  DOM把XML文档作为树结构来查看。能够通过DOM树来访问所有元素。可以修改或删除它们的内容,并创建新的元素。元素,它们的文本,以及它们的属性,都被认为是节点。

  XML DOM是:

  • 用于XML的标准对象模型
  • 用于XML的标准编程接口
  • 中立于平台和语言
  • W3C的标准

  XML DOM定义了所有XML元素的对象和属性,以及访问它们的方法(接口)。

  换句话说:

1

XML DOM是用于获取、更改、添加或删除XML元素的标准

  DOM将XML文档作为一个树形结构,而树叶被定义为节点。

  1.6.2 总结

  XML DOM其实比较复杂,在这么短的篇幅里也无法一一进行讲解。想详细了解XML DOM可以好好去学习下

 1.7 XML如何解析?

  上面讲了这么多关于XML的东西,那么XML文件应该如何解析呢?

  终于到了我们的重头戏了

  下面以视频项目为例,展示如何解析XML文件:

  1.7.1 Step 1

  XML文件是一棵树,首先需要找到对应的节点,然后从节点开始解析,比如搜索找到的就是result/weights/weight 和result/weights/weight 2个节点,分别从这个开始解析:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

public ResultInfo onParser(Element rootElement) {

    int resp = -1;

    try {

        String elName = "header/respcode";

        resp = Integer.parseInt(selectNodeString(rootElement, elName));

    } catch (NumberFormatException e) {

        e.printStackTrace();

    }

    Log.d(TAG, "resp= " + resp);

    if (resp != 0) {

        return null;

    }

    ResultInfo searchResultInfo = new ResultInfo();

    // Parse Search Weight

    @SuppressWarnings("rawtypes")

    final List weights = rootElement.selectNodes(rootElement.getPath() + "/"

            + "result/weights/weight");

    ResultInfo[] resultFilterInfos = parseVideos(weights);

    if (resultFilterInfos != null) {

        ResultInfo weight = new ResultInfo();

        weight.putResultInfoArray(ResultInfo.KEY_VIDEOS, resultFilterInfos);

        searchResultInfo.putResultInfo(ResultInfo.KEY_WEIGHT, weight);

    }

    // Parse Albums

    @SuppressWarnings("rawtypes")

    final List albums = rootElement.selectNodes(rootElement.getPath() + "/"

            + "result/albums/album");

    ResultInfo[] resultInfos = parseVideos(albums);

    if (resultInfos != null) {

        ResultInfo album = new ResultInfo();

        album.putResultInfoArray(ResultInfo.KEY_VIDEOS, resultInfos);

        searchResultInfo.putResultInfo(ResultInfo.KEY_SEARCH, album);

    }

    return searchResultInfo;

}

  1.7.2 Step 2

  找到了对应的Node,即从对应的Node开始递归的查找,直到找到最小的节点,也就是最基本的单元Element。再对每一个Element进行解析:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

private ResultInfo[] parseVideos(final List nodes) {

    if (nodes != null && nodes.size() > 0) {

        final int size = nodes.size();

        final ResultInfo[] vis = new ResultInfo[size];

        int i = 0;

        for (Object o : nodes) {

            if (o instanceof Element) {

                final Element videoElement = (Element) o;

                ResultInfo vi = parseVideo(videoElement);

                vis[i] = vi;

            }

            i++;

        }

        return vis;

    }

    return null;

}

  1.7.3 Step 3

  针对获取到的Element,解析出对应的String将数据传递给VideoInfo这个类:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

private ResultInfo parseVideo(final Element videoElement) {

    final String id = videoElement.elementText("album_id");

    final String title = videoElement.elementText("title");

    final String categoryId = videoElement.elementText("category_id");

    final String categoryName = videoElement.elementText("category_name");

    final String count = videoElement.elementText("count");

    final String imgUrl = videoElement.elementText("img180236");

    final String duration = videoElement.elementText("duration");

    final String mainactors = videoElement.elementText("mainactors");

    final String sitename = videoElement.elementText("site_name");

    final String videourl = videoElement.elementText("vedio_url");

    final String sort = videoElement.elementText("sort");

    final String tv_id = videoElement.elementText("tv_id");

    ResultInfo vi = new ResultInfo();

    vi.putString(VideoInfo.ID, id);

    vi.putString(VideoInfo.TITLE, title);

    vi.putString(VideoInfo.CATEGORY_ID, categoryId);

    vi.putString(VideoInfo.CATEGORY_NAME, categoryName);

    vi.putString(VideoInfo.COUNT, count);

    vi.putString(VideoInfo.IMG_URL, imgUrl);

    vi.putString(VideoInfo.DURATION, duration);

    vi.putString(VideoInfo.MAINACTORS, mainactors);

    vi.putString(VideoInfo.SITENAME, sitename);

    vi.putString(VideoInfo.VIDEOURL, videourl);

    vi.putString(VideoInfo.SORT, sort);

    vi.putString(VideoInfo.TV_ID, tv_id);

    return vi;

}

  1.7.4 Step 4

  当使用XML解析器将XML数据解析出来之后。需要将这些数据提取出来,也是通过连续2层提取,将数据定位到每个video, 将每个video里的数据传递给SearchVideoInfo这个ArrayList,然后将ArrayList中的数据和对应的Adapter数据关联起来:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

public static ArrayList<SearchVideoInfo> getSearchVideoInfo(ResultInfo searchResultInfo) {

    ResultInfo resultInfo = null;

    ResultInfo[] videos = null;

    ArrayList<SearchVideoInfo> searchVideoInfos = null;

    if (searchResultInfo != null) {

        resultInfo = searchResultInfo.getResultInfo(ResultInfo.KEY_SEARCH);

    }

    if (resultInfo != null) {

        videos = resultInfo.getResultInfoArray(ResultInfo.KEY_VIDEOS);

    }

    if (videos != null && videos.length > 0) {

        searchVideoInfos = new ArrayList<SearchVideoInfo>(videos.length);

        for (ResultInfo video : videos) {

            SearchVideoInfo searchInfo = new SearchVideoInfo();

            searchInfo.setAlbum_id(video.getString(VideoInfo.ID));

            searchInfo.setTitle(video.getString(VideoInfo.TITLE));

            searchInfo.setChannel_id(video.getString(VideoInfo.CATEGORY_ID));

            searchInfo.setImgUrl(video.getString(VideoInfo.IMG_URL));

            searchInfo.setDuration(video.getString(VideoInfo.DURATION));

            searchInfo.setMainActors(video.getString(VideoInfo.MAINACTORS));

            searchInfo.setSiteName(video.getString(VideoInfo.SITENAME));

            searchInfo.setVideo_url(video.getString(VideoInfo.VIDEOURL));

            searchInfo.setOrder(video.getString(VideoInfo.SORT));

            searchInfo.setTv_id(video.getString(VideoInfo.TV_ID));

            // searchInfo.setContinueType(video.getString(VideoInfo.CONTINUETYPE));

            searchVideoInfos.add(searchInfo);

        }

    }

    if (searchVideoInfos == null) {

        MyLog.e(TAG, "error, getSearchVideoInfo, can not get info");

    }

    return searchVideoInfos;

}

  以上就是搜索数据的XML的解析和数据展示过程。

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。


什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言 *
  • JSON 易于理解。
* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息(对象)的数组:

JSON 实例

{"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]}


JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。


JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"name":"Runoob"


JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"name":"Runoob", "url":"www.runoob.com"}


JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象:

"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

在以上实例中,对象 "sites" 是一个数组,包含了三个对象。

每个对象为站点的信息(网站名和网站地址)。


JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据,并在网页中显示数据。

简单起见,我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后,在你的页面中使用新的 JavaScript 对象:

实例

var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

尝试一下 »


相关函数

函数 描述
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

更多 JSON 信息,你可以阅读我们的 JSON 教程。

1、XML 简介,2、JSON 教程相关推荐

  1. json教程从入门到使用

    json教程从入门到使用 一:入门 简介: JSON(JavaScriptObject Notation).轻量级数据交换格式.非常适合于服务器与 JavaScript 的交互. JSON两种格式: ...

  2. Android复习01(内部存储、外部存储、SD卡存储、XML解析、Json解析、保存登录密码)

    2020年 3月19日 星期四 [第5周]Android录播回放 笔记 https://gitee.com/wang_zhiguo/Course0501 老师把上课用的案例源码,放在了Gitee仓库中 ...

  3. 课外阅读(XHTML和XML简介)

    课外阅读 一.XHTML简介 HTML从出现发展到今天,仍有些缺陷和不足.HTML的三个主要缺点如下. (1)太简单.不能适应现在越来越多的网络设备和应用的需要,比如手机.PDA.信息家电都不能直接显 ...

  4. 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)

    第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...

  5. [转]Django REST framework 简介与中文教程

    Django REST framework 简介与中文教程 简介 在序列化与反序列化时,虽然操作的数据不尽相同,但是执行的过程却是相似的,也就是说这部分代码是可以复用简化编写的. 在开发REST AP ...

  6. XML解析及JSON解析

    目录 XML 1. XML简介 2. 特性 3. 语法格式 4. 例子 5. 部分Demo 注意: Demo1: 解析本地 XML文件 Demo2: 解析网络运营商接口返回的XML Demo3: 通过 ...

  7. XML简介与Dom4j解析XML

    文章目录 一.XML简介 1.什么是 XML 2.XML 的主要作用 3.XML 与 HTML 4.XML 属性 5.XML语法规则 二.Dom4j解析XML 1.树结构与xml文件的解析技术 1.1 ...

  8. XML语言与JSON

    关于XML语言与JSON 1.什么是XML 2.XML的作用 3.什么是XML文件 XML语法 1.XML文档声明 2.标记(元素/标签/节点) 3.一个XM文档只能有一个最外层标记(根标记) 4.标 ...

  9. JSON教程(非常详细)

    之前写过有关C语言JSON库:[C语言开源库]在Clion上使用开源库cJSON; JSON和XML的对比:JSON vs XML,为什么JSON更好? 下面就好好来了解一下JSON. 文章目录 JS ...

  10. 【JSON】JSON 教程

    JSON 教程 JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小. ...

最新文章

  1. 我也来搭android环境
  2. git gui fetch不到文件_Git内部原理剖析,有比这还详细的吗?
  3. leetcode算法题--Number of Islands
  4. 5 款阿里常用代码检测工具,免费用!
  5. metasploit framework
  6. 系统集成资质培训 - 在线答疑(17:00更新)
  7. 博客刚开通,先转载几篇,请见谅
  8. Docker发布应用程序指南
  9. 语法上的小trick
  10. oracle高效分页查询总结
  11. druid 数据库连接池,简单配置
  12. mappedBy的作用
  13. 爬取斗鱼4300W热度的小姐姐是一种什么样的体验?
  14. mathematica 矩阵对角化
  15. 浏览器代理服务器没有响应
  16. 切莫让CDN缓存你的动态文件
  17. Django+Vue开发生鲜电商平台之11.首页、商品数量、缓存和限速功能开发
  18. 电梯门禁系统服务器一般在哪,电梯控制系统与门禁系统有区别吗
  19. python实训报告pygame_20192423 2019-2020-2 《Python程序设计》实验四报告
  20. 安卓软件开发基础教学!写给1-3年安卓程序员的几点建议,跳槽薪资翻倍

热门文章

  1. docker-compose学习
  2. JMeter接口测试中,响应数据中文显示乱码的处理方法(转)
  3. 如何安装ipa文件(二)
  4. HDUOJ----2063过山车
  5. 外卖小哥到底是一群什么样的人?答案超乎你想象
  6. css matrix矩阵,矩阵 | matrix() (Transforms) - CSS 中文开发手册 - Break易站
  7. 【转】随机函数 rand() srand() 以及seed的原理
  8. js中动态载入css js样式
  9. 在linux下将当前目录文件全部小写含目录名
  10. SQLSERVER备份事务日志的作用