36、结构化数据处理：XML、JSON、Microformats与RDFa

结构化数据处理：XML、JSON、Microformats与RDFa

1. XML数据处理

在处理服务器端返回的XML数据时，我们可以通过循环遍历获取故事标题和URL信息。以下是一段示例代码：

for (var i = 0; i < urls.length; i++) {
    var url = urls[i].firstChild.nodeValue;
    var title = titles[i].firstChild.nodeValue;
    if (url === "none")
        str += title + "<br />";
    else
        str += "<a href='" + url + "'>" + title + "</a><br />";
}

在这个代码中，我们遍历 urls 数组，获取每个URL和对应的标题。如果URL为 none ，则只显示标题；否则，将标题作为链接显示。

另外，对于XML数据的查询和处理，我们可以使用 getElementsByTagName 等方法。返回的XML文档可以使用XML DOM API，但不能使用HTML DOM API。不过，大多数功能基于更通用的XML DOM API，一般不会有问题。

为了处理可能出现的查询失败情况，我们可以使用 try...catch 错误处理机制。例如，当XML数据不完整时，查询可能会失败，此时可以捕获错误并进行相应处理。

1.1 XML处理流程

graph LR
    A[开始] --> B[遍历urls数组]
    B --> C{url是否为none}
    C -- 是 --> D[添加标题到字符串]
    C -- 否 --> E[添加标题链接到字符串]
    D --> F{是否遍历完}
    E --> F
    F -- 否 --> B
    F -- 是 --> G[结束]

2. JSON数据处理

2.1 旧方法生成JavaScript对象

当需要将Ajax调用返回的JSON文本转换为JavaScript对象时，可以使用 eval 函数。以下是两种常见的用法：

// 第一种方法
var jsonobj = '{"test" : "value1", "test2" : 3.44, "test3" : true}';
var obj = eval("(" + jsonobj + ")");
alert(obj.test2); // 输出3.44

// 第二种方法
var jsonobj = '{"test" : "value1", "test2" : 3.44, "test3" : true}';
eval("var obj="+jsonobj);
alert(obj.test);

在使用 eval 函数时，第一种方法需要将JSON字符串用括号括起来，这样 eval 语句会将其视为对象初始化器。第二种方法则是将变量赋值语句包含在 eval 方法中。

需要注意的是，JSON对象不能包含方法，只能处理数据对象。如果对象包含方法，会抛出错误。而且，由于 eval 函数会处理传入的任何字符串，JSON数据存在安全风险。为了解决这个问题，可以使用 json2.js 库，它提供了安全版本的 eval 。使用方法如下：

var obj = JSON.parse(objJSON);

2.2 JSON对象与数组的表示

类型	JavaScript对象/数组	JSON表示
数组	var arr = new Array("one","two","three");	"['one','two','three']"
对象	var obj3 = { prop1 : "test", result : true, num : 5.44, name : "Joe", cts : [45,62,13]};	{"prop1":"test","result":true,"num":5.44,"name":"Joe","cts":[45,62,13]}

2.3 解析JSON字符串

在ECMAScript 5中，浏览器添加了对JSON的原生支持，提供了 JSON 对象。 JSON.parse 方法可以安全地将JSON字符串转换为JavaScript对象，并且可以通过提供替换函数来转换数值表示的布尔值。以下是一个示例：

var jsonobj = '{"test" : "value1", "test2" : 3.44, "test3" : 0}';
var obj = JSON.parse(jsonobj, function (key, value) {
    if (typeof value == 'number') {
        if (value == 0)
            value = false;
        else if (value == 1) {
            value = true;
        }
    }
    return value;
});
alert(obj.test3); // 输出false

在这个示例中，我们定义了一个替换函数，将数值 0 转换为 false ，数值 1 转换为 true 。

2.4 将对象转换为JSON字符串

JSON.stringify 方法可以将JavaScript对象转换为JSON字符串，并且可以通过提供转换函数或数组来过滤或转换对象的值。以下是一个示例：

function convertBoolToNums(key, value) {
    if (typeof value == 'boolean') {
        if (value)
            value = 1;
        else
            value = 0;
    }
    return value;
};
window.onload=function() {
    var obj = {"test" : "value1", "test2" : 3.44, "test3" : false};
    var jsonobj = JSON.stringify(obj, convertBoolToNums, 3);
    alert(jsonobj); // test3应该为0
}

在这个示例中，我们定义了一个转换函数，将布尔值 true 转换为 1 ，布尔值 false 转换为 0 。 JSON.stringify 方法的第三个参数可以控制生成结果中的空格数量和类型。

2.5 JSON处理流程

graph LR
    A[开始] --> B[选择处理方式]
    B -- 生成对象 --> C{使用旧方法还是新方法}
    C -- 旧方法 --> D[使用eval函数]
    C -- 新方法 --> E[使用JSON.parse]
    B -- 转换为字符串 --> F[使用JSON.stringify]
    D --> G[获取JavaScript对象]
    E --> G
    F --> H[获取JSON字符串]
    G --> I[使用对象]
    H --> J[使用字符串]
    I --> K[结束]
    J --> K

3. hCalendar微格式数据处理

3.1 问题描述

我们希望将使用hCalendar微格式标注的事件绘制在基于Canvas的图表上。但hCalendar事件的语法可能不同，例如 dtstart 类可能在 span 元素或 abbr 元素上。

3.2 解决方案

我们可以通过以下步骤获取事件的开始日期：
1. 找到所有类名为 vevent 的元素。
2. 在每个 vevent 元素中，找到类名为 dtstart 的元素。
3. 根据 dtstart 元素的标签名（ SPAN 或 ABBR ），获取开始日期。
4. 提取日期中的天数，并将其存储在数组中。

以下是示例代码：

var events = document.querySelectorAll("[class='vevent']");
var v = events;
var days = new Array();
for (var i = 0; i < events.length; i++) {
    var dstart = events[i].querySelectorAll("[class='dtstart']");
    var dt;
    if (dstart[0].tagName == "SPAN") {
        if (dstart[0].textContent)
            dt = dstart[0].textContent;
        else
            dt = dstart[0].innerText;
    } else if (dstart[0].tagName == "ABBR") {
        dt = dstart[0].title;
    }
    var day = parseInt(dt.split("-")[2]);
    days.push(day);
}

最后，我们可以使用这些天数在Canvas元素中绘制图表。

3.3 hCalendar处理流程

graph LR
    A[开始] --> B[查找所有vevent元素]
    B --> C[遍历vevent元素]
    C --> D[查找dtstart元素]
    D --> E{dtstart元素标签名}
    E -- SPAN --> F[获取textContent或innerText]
    E -- ABBR --> G[获取title属性]
    F --> H[提取天数]
    G --> H
    H --> I[存储天数到数组]
    I --> J{是否遍历完}
    J -- 否 --> C
    J -- 是 --> K[使用天数绘制图表]
    K --> L[结束]

4. RDFa数据处理

4.1 问题描述

在使用Drupal 7等内容管理系统时，页面元数据可能使用RDFa进行标注。我们希望将这些RDFa格式的数据转换为JavaScript对象，并最终转换为JSON用于Ajax调用。

4.2 解决方案

我们可以使用RDFa JavaScript库，如 rdfQuery ，它基于jQuery，并且实现了RDFa提取器。以下是处理步骤：
1. 使用jQuery选择器选择包含RDFa数据的元素。
2. 使用 .rdf() 方法提取RDFa数据，并将其转换为RDF三元组存储在内存数据库中。
3. 导出JavaScript对象。
4. 使用 JSON.stringify 方法将JavaScript对象转换为JSON字符串。

以下是示例代码：

var triplestore =  $('#biblio').rdf()
  .base('http://burningbird.net')
  .prefix('rdf','http://www.w3.org/1999/02/22-rdf-synax-ns#')
  .prefix('dc','http://purl.org/dc/elements/1.1/')
  .prefix('foaf','http://xmlns.com/foaf/0.1/');
var data = triplestore.databank.dump();
var jsonStr = JSON.stringify(data);

4.3 RDFa处理流程

graph LR
    A[开始] --> B[选择包含RDFa数据的元素]
    B --> C[使用rdfQuery提取数据]
    C --> D[存储为RDF三元组]
    D --> E[导出JavaScript对象]
    E --> F[使用JSON.stringify转换为JSON字符串]
    F --> G[使用JSON字符串进行Ajax调用]
    G --> H[结束]

通过以上方法，我们可以有效地处理XML、JSON、hCalendar微格式和RDFa等结构化数据，满足不同场景下的需求。

5. 各数据处理方法总结与对比

5.1 处理方法对比表格

数据类型	处理方法	优点	缺点	适用场景
XML	循环遍历结合 DOM API	能灵活获取所需信息，有通用的 DOM API 支持	需处理查询失败情况，不能使用 HTML DOM API	处理服务器端返回的 XML 数据
JSON	旧方法（eval）、新方法（JSON.parse 和 JSON.stringify）	旧方法简单直接，新方法安全且功能丰富，可进行数据转换和过滤	旧方法有安全风险，部分浏览器不支持新方法	处理 Ajax 调用返回的 JSON 数据
hCalendar 微格式	按类名查找元素获取日期	可应对不同语法格式	微格式规则松散，需处理不同标签情况	将 hCalendar 微格式标注的事件绘制在 Canvas 图表上
RDFa	使用 rdfQuery 库	能自动转换为 RDF 三元组，便于后续处理	需要引入额外的库	将页面中的 RDFa 格式数据转换为 JSON 用于 Ajax 调用

5.2 各数据处理的关键要点总结

• XML 处理 ：核心是遍历节点获取信息，利用 try...catch 处理可能的查询错误，使用 XML DOM API 进行操作。
• JSON 处理 ：旧方法用 eval ，新方法用 JSON.parse 和 JSON.stringify 。新方法更安全，可通过替换函数和转换函数处理数据。
• hCalendar 微格式处理 ：按类名查找元素，根据标签名获取日期信息，注意不同浏览器对元素属性的支持。
• RDFa 处理 ：借助 rdfQuery 库，将 RDFa 数据转换为 RDF 三元组，再导出为 JavaScript 对象并转换为 JSON。

6. 实际应用案例分析

6.1 XML 应用案例

假设我们有一个新闻网站，服务器返回的新闻数据以 XML 格式存储。我们可以使用以下代码获取新闻标题和链接：

// 假设 urls 和 titles 是从 XML 中获取的节点列表
var str = "";
for (var i = 0; i < urls.length; i++) {
    var url = urls[i].firstChild.nodeValue;
    var title = titles[i].firstChild.nodeValue;
    if (url === "none")
        str += title + "<br />";
    else
        str += "<a href='" + url + "'>" + title + "</a><br />";
}
// 将 str 插入到页面中显示新闻列表

6.2 JSON 应用案例

在一个电商网站中，我们通过 Ajax 调用获取商品信息，返回的是 JSON 数据。我们可以使用 JSON.parse 解析数据，并根据需要进行处理：

var jsonData = '{"name": "手机", "price": 2999, "inStock": 1}';
var product = JSON.parse(jsonData, function (key, value) {
    if (typeof value == 'number') {
        if (value == 0)
            value = false;
        else if (value == 1) {
            value = true;
        }
    }
    return value;
});
if (product.inStock) {
    console.log(product.name + " 有库存，价格为 " + product.price + " 元。");
} else {
    console.log(product.name + " 无库存。");
}

6.3 hCalendar 微格式应用案例

在一个活动日历网站中，活动信息使用 hCalendar 微格式标注。我们可以使用以下代码获取活动日期并绘制在 Canvas 上：

var events = document.querySelectorAll("[class='vevent']");
var v = events;
var days = new Array();
for (var i = 0; i < events.length; i++) {
    var dstart = events[i].querySelectorAll("[class='dtstart']");
    var dt;
    if (dstart[0].tagName == "SPAN") {
        if (dstart[0].textContent)
            dt = dstart[0].textContent;
        else
            dt = dstart[0].innerText;
    } else if (dstart[0].tagName == "ABBR") {
        dt = dstart[0].title;
    }
    var day = parseInt(dt.split("-")[2]);
    days.push(day);
}
var ctx = document.getElementById("calendar").getContext('2d');
// draw out
days.sort(function(a,b) { return a - b});
ctx.fillStyle="red";
ctx.strokeStyle="black";
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(280,100);
ctx.stroke();
for (var i = 0; i < days.length; i++) {
    var x1 = days[i] * 10;
    var t1 = 70;
    var x2 = 5;
    var t2 = 30;
    ctx.fillRect(x1,t1,x2,t2);
}

6.4 RDFa 应用案例

在一个使用 Drupal 7 的网站中，页面元数据使用 RDFa 标注。我们可以使用以下代码将 RDFa 数据转换为 JSON：

var triplestore =  $('#biblio').rdf()
  .base('http://burningbird.net')
  .prefix('rdf','http://www.w3.org/1999/02/22-rdf-synax-ns#')
  .prefix('dc','http://purl.org/dc/elements/1.1/')
  .prefix('foaf','http://xmlns.com/foaf/0.1/');
var data = triplestore.databank.dump();
var jsonStr = JSON.stringify(data);
// 使用 jsonStr 进行 Ajax 调用

7. 总结与展望

7.1 总结

通过对 XML、JSON、hCalendar 微格式和 RDFa 等结构化数据处理方法的介绍，我们了解到不同数据类型有不同的处理方式和特点。XML 处理注重节点遍历和错误处理；JSON 处理有新旧两种方法，新方法更安全灵活；hCalendar 微格式处理需应对规则松散的问题；RDFa 处理借助特定库实现数据转换。

7.2 展望

随着互联网技术的不断发展，结构化数据的处理需求会越来越多。未来，可能会有更安全、高效、便捷的处理方法出现。例如，JSON 处理可能会在更多浏览器中得到更好的支持，微格式和 RDFa 的处理规则可能会更加规范统一，从而降低处理的复杂度。同时，数据处理与其他技术的结合也会更加紧密，为我们带来更多的应用场景和创新机会。

7.3 整体数据处理流程总结图

graph LR
    A[开始] --> B[选择数据类型]
    B -- XML --> C[XML 处理流程]
    B -- JSON --> D[JSON 处理流程]
    B -- hCalendar 微格式 --> E[hCalendar 处理流程]
    B -- RDFa --> F[RDFa 处理流程]
    C --> G[获取 XML 信息]
    D --> H[获取或转换 JSON 数据]
    E --> I[获取 hCalendar 日期并绘图]
    F --> J[获取 RDFa 转换后的 JSON 数据]
    G --> K[使用 XML 数据]
    H --> K
    I --> K
    J --> K
    K --> L[结束]

通过以上内容，我们全面了解了不同结构化数据的处理方法和应用场景，希望能帮助大家在实际开发中更好地处理各种数据。