10分钟掌握XML、JSON及其解析

前端之家收集整理的这篇文章主要介绍了10分钟掌握XML、JSON及其解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

http://blog.jobbole.com/79252/

引言

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

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

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

为了不和时代落伍,我们必须要学习 XML 和 JSON,但同时它们也很容易学习,Let’s start:–)

一、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是各种应用程序之间进行数据传输的最常用的工具,并且在信息存储和描述领域变得越来越流行。

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</ >
from >John</ >
heading >Reminder</ >
body >Don't forget the meeting!</ >
</ >

上面的这条便签具有自我描述性。它拥有标题以及留言,同时包含了发送者和接受者的信息。但是,这个 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,经常会看到没有关闭标签的元素:

2
p >This is a paragraph
>This is another paragraph

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

<p>This is a paragraph</p>
another paragraph</p>

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

1.2.2 XML标签对大小写敏感

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

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

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

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

1.2.3 XML标签对大小写敏感

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

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

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

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

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

1.2.4 XML文档必须有根元素

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

5
root >
   child >
     subchild >.....</ >
1.2.5 XML的属性值须加引号

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

6
7
8
9
note
date = 08 /08/2008>
>
 
"08/08/2008" >
>
@H_853_403@ >
1.2.6 实体引用

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

>if salary < 1000 then</message>

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

>if salary &lt; 1000 then</ >

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

&lt;    <   小于
&gt;    >   大于
&amp;   &   和号
'  '   单引号
&quot;  "   引号

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

1.2.7 XML中的注释

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

<!-- This is a comment -->

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

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元素被解析时,其标签之间的文本也会被解析:

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

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

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

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

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

1.3.2 转义字符

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

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

then</message>

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

>

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

'  '   省略号
&quot;  "   引号

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

1.3.3 CDATA

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

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

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

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

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</
total >1736</ >
result >
@H_853_403@ album >
       album_id >320305900</
title > <![CDATA[ 电影侃侃之初恋永不早 ]]> </
tag <![CDATA[ 18岁以上 当代 暧昧 华语 ]]>
@H_301_804@ img >http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_120_160.jpg</
img180236 >http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_180_236.jpg</
img11577 >http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_115_77.jpg</
img220124 >http://pic9.qiyipic.com/image/20141016/ec/e0/v_108639906_m_601_284_160.jpg</
category_id >1</
score >0.0</
voters
tv_sets
duration >00:38:57</
year <![CDATA[ 2014 ]]>
tv_focus >跟爱情片学把妹心经</
@H_502_888@ episode_count
directors <![CDATA[ 关雅荻 ]]>
mainactors
actors <![CDATA[ ]]>
vv2 <![CDATA[ 15 ]]>
timeText <![CDATA[ 今天 ]]>
first_issue_time <![CDATA[ 2014-10-16 ]]>
up
down
download
purchase_type
hot_or_new
createtime >2014-10-16 12:25:08</
purchase
desc <![CDATA[
本期节目主持人介绍新近上映的口碑爱情片,。主持人轻松幽默的罗列出胡鳄鱼导演拍摄的爱情片越来越接地气,博得观众的认同和追捧,更提出“初恋永远不嫌早”的口号。观众可以跟着爱情片学习把妹心经。
]]>
ip_limit
episodes />
>
>
>
这是展示一部电影的具体数据,包括标题、介绍、内容、导演、演员、时长、上映年份等很多内容

1.5 XML树结构

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

1.5.1 一个XML文档实例

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

7
"ISO-8859-1" >

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

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

>

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

>

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

>

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

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

>

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

所有元素均可拥有文本内容属性(类似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 DOM定义了所有XML元素的对象和属性,以及访问它们的方法(接口)。

换句话说:

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个节点,分别从这个开始解析:
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();
@H_853_403@ }
 
Log.d(TAG,"resp= " + resp);
 
@H_301_804@ if (resp != 0) {
return null;
}
 
ResultInfo searchResultInfo = new ResultInfo();
 
// Parse Search Weight
@SuppressWarnings("rawtypes")
final List weights = rootElement.selectNodes(rootElement.getPath() + "/"
             + "result/weights/weight");
 
@H_502_888@ 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进行解析:
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) {
@H_853_403@                  final Element videoElement = (Element) o;
ResultInfo vi = parseVideo(videoElement);
vis[i] = vi;
}
@H_301_804@ i++;
}
return vis;
}
return null;
1.7.3 Step 3
 针对获取到的Element,解析出对应的String将数据传递给VideoInfo这个类:
28
private ResultInfo parseVideo( final Element videoElement) {
     final String id = videoElement.elementText( "album_id" );
title = videoElement.elementText( "title" );
categoryId = videoElement.elementText( "category_id" );
categoryName = videoElement.elementText( "category_name" );
count = videoElement.elementText( "count" );
imgUrl = videoElement.elementText( "img180236" );
@H_853_403@ duration = videoElement.elementText( "duration" );
mainactors = videoElement.elementText( "mainactors" );
sitename = videoElement.elementText( "site_name" );
videourl = videoElement.elementText( "vedio_url" );
@H_301_804@ sort = videoElement.elementText( "sort" );
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);
@H_502_888@ 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数据关联起来:
43 public static ArrayList< SearchVideoInfo > getSearchVideoInfo(ResultInfo searchResultInfo) {
 
ResultInfo resultInfo = null;
ResultInfo[] videos = null;
ArrayList< > searchVideoInfos = null;
 
if (searchResultInfo != null) {
@H_853_403@ resultInfo = searchResultInfo.getResultInfo(ResultInfo.KEY_SEARCH);
}
 
if (resultInfo != null) {
@H_301_804@ videos = resultInfo.getResultInfoArray(ResultInfo.KEY_VIDEOS);
}
 
if (videos != null && videos.length > 0) {
 
searchVideoInfos = new ArrayList< >(videos.length);
 
for (ResultInfo video : videos) {
SearchVideoInfo searchInfo = new SearchVideoInfo();
 
searchInfo.setAlbum_id(video.getString(VideoInfo.ID));
@H_502_888@ 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

XML很好很强大,但是最近有另外一个时代弄潮儿,这就是JSON。现在JSON的光环已经逐渐超越了XML,各大网站提供的数据接口一般都是JSON。下面我们就来学习下JSON。

2.1 JSON是什么?

JSON:JavaScript对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成

JSON是存储和交换文本信息的语法,类似XML。

JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。 这些特性使JSON成为理想的数据交换语言

2.2 JSON格式

JSON构建于两种结构:

  1. 名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组(associative array)。
  2. 值的有序列表(An ordered list of values)。在大多数语言中,它被理解为数组(array)、矢量(vector),列表(list)或者是序列(sequence)。

JSON具有以下这些形式:

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

JSON Object

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

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

    JSON Value

    • 字符串(string)是由0到多个Unicode字符组成的序列,封装在双引号(”“)中,可以使用反斜杠(‘\’)来进行转义。一个字符可以表示为一个单一字符的字符串。

    JSON String

    • 数字(number)类似C或者Java里面的数,没有用到的8进制和16进制数除外。

    JSON Number

    2.3 举个栗子

    上面关于JSON讲了这么多,大家都表示一头雾水了吧?

    没关系,我们来举个栗子,让大家有个直观的感受:–)

    以目前视频使用的iQiyi提供的频道接口为例:

    iQiyi提供的电影频道的JSON电影数据如下:
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
"code": 1,
     "data": 0,
"albumIdList": [
             {
                     "totalidnum": 2000,
"idlist": [
                             "319281600"
@H_853_403@ ]
}
],
"albumArray": {
@H_301_804@ "319281600": {
"_as": "",
"_blk": 0,
"_cid": 1,
"_ct": "2014-10-10 17:55:06",
"_da": "",
"_dl": 0,
"_dn": "7296",
"_id": 319281600,
"_img": "http://pic2.qiyipic.com/image/20141016/19/ca/v_108628048_m_601_m1_120_160.jpg",
"_ip": 1,
@H_502_888@ "_ma": "",
"_pc": 2,
"_pid": 0,
"_reseftv": 959,
"_t": "末代独裁",
"_tvct": 1,
"_tvs": 1,
"_vt": 0,
"a_av": 1,
"a_pro": "",
"bpt": "0",
"clm": "",
"cn_year": "0",
"co_album_id": "0",
"ctype": 0,
"desc": "",
"down": 0,
"down2": "0",
"drm": 0,
"fst_time": "2014-10-16",
"h1_img": "http://pic2.qiyipic.com/image/20141016/19/ca/v_108628048_m_601_m1_180_236.jpg",
"h2_img": "http://pic2.qiyipic.com/image/20141016/19/ca/v_108628048_m_601_m1_195_260.jpg",
"is_h": 0,
"is_n": 0,
"is_zb": 0,
"k_word": "",
"language": 0,
"live_center": 0,
"live_start_time": 0,
"live_stop_time": 0,
"logo": 1,
"m_av": 1,
"p_av": 1,
"p_s": 0,
"p_s_1": 0,
"p_s_4": 0,
"p_s_8": 0,
"qiyi_pro": 0,
"qiyi_year": "0",
"qt_id": "1005722",
"s_TT": "",
"songname": "",
"t_pc": 1,
"tag": "当代 美国 乡村 大片",
"tv_eftv": 1,
"tv_pha": "",
"tv_pro": "",
"tv_ss": "",
"tvfcs": "雄心壮志背后的真相",
"up": 0,
"up2": "0",
"upcl": "",
"v2_img": "http://pic2.qiyipic.com/image/20141016/19/ca/v_108628048_m_601_m1_284_160.jpg",
"v3_img": "http://pic2.qiyipic.com/image/20141016/19/ca/v_108628048_m_601_m1_480_270.jpg",
"vv": "1",
"year": "2007",
"tv_id": "0",
"vv_p": 0,
原文链接:/xml/807027.html

猜你在找的XML相关文章