35、JavaScript 结构化数据处理与通信技术详解

blue

于 2025-11-29 13:26:31 发布

阅读量2

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript实战精要文章标签： JavaScript Ajax XML

本文链接：https://blog.youkuaiyun.com/blue/article/details/155562063

JavaScript实战精要专栏收录该内容

40 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

JavaScript 结构化数据处理与通信技术详解

1. 按需选择的 Ajax 应用

在 Web 开发中，Ajax 是一种非常有用的技术，其中一种常见的应用场景是根据用户的选择动态填充表单元素。例如，当用户在一组单选按钮中做出选择时，我们可以通过 Ajax 请求从服务器获取相关数据，并将其填充到下拉列表中。

以下是一个简单的示例代码：

<!DOCTYPE html>
<head>
<title>On Demand Select</title>
<style>
#nicestuff
{
  display: none;
  margin: 10px 0;
}
#nicething
{
  width: 400px;
}
</style>
<script>
var xmlhttp;
function populateSelect() {
  var value;
  var inputs = this.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      value = inputs[i].value;
      break;
    }
  }
  // prepare request
  if (!xmlhttp) {
    xmlhttp = new XMLHttpRequest();
  }
  var url = "nicething.php?nicething=" + value;
  xmlhttp.open('GET', url, true);
  xmlhttp.onreadystatechange = getThings;
  xmlhttp.send(null);
}
// process return
function getThings() {
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     var select = document.getElementById("nicestuff");
     select.length=0;
     var nicethings = xmlhttp.responseText.split(",");
     for (var i = 0; i < nicethings.length; i++) {
       select.options[select.length] = new Option(nicethings[i],
nicethings[i]);
     }
     select.style.display="block";
   } else if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {
     alert("No items returned for request");
   }
}
window.onload=function() {
   document.getElementById("submitbutton").style.display="none";
   document.getElementById("nicething").onclick=populateSelect;
}
</script>
</head>
<body>
<form action="backupprogram.php" method="get">
<p>Select one:</p>
<fieldset id="nicething">
<input type="radio" name="nicethings" value="bird" /><label
for="bird">Birds</label><br />
<input type="radio" name="nicethings" value="flower" /><label
for="flower">Flowers</label><br />
<input type="radio" name="nicethings" value="sweets" /><label
for="sweets">Sweets</label><br />
<input type="radio" name="nicethings" value="cuddles" />
<label for="cuddles">Cute Critters</label>
</fieldset>
<input type="submit" id="submitbutton" value="get nice things" />
<select id="nicestuff"></select>
</body>

操作步骤如下：
1. 获取用户选择 ：通过遍历单选按钮，找到被选中的按钮并获取其值。
2. 准备 Ajax 请求 ：创建 XMLHttpRequest 对象，构建请求 URL，并设置请求方法和回调函数。
3. 发送请求 ：使用 send 方法发送请求。
4. 处理响应 ：在回调函数中，检查请求状态和响应状态，若成功则解析响应数据并填充到下拉列表中。

2. 使用定时器自动更新页面数据

有时候，我们需要实时显示文件中的数据，而文件内容会频繁更新。这时可以使用 Ajax 和定时器来定期检查文件的新值，并相应地更新页面显示。

以下是示例代码：

var url = "updatedtextfile.txt";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange=updateList;
xmlhttp.send(null);

// process return
function processResponse() {
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     var li = document.createElement("li");
     var txt = document.createTextNode(xmlhttp.responseText);
     li.appendChild(txt);
     document.getElementById("update").appendChild(li);
   } else if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {
     alert(xmlhttp.responseText);
   }
}

// timer
function startTimer() {
  populateList();
  timer=setTimeout(timerEvent,15000);
}

function timerEvent() {
  if (xmlhttp.readyState == 4) {
    populateList();
  }
  timer=setTimeout(timerEvent, 15000);
}

function stopTimer() {
  clearTimeout(timer);
}

操作步骤如下：
1. 发起 Ajax 请求 ：使用 GET 方法请求文件内容，并设置回调函数。
2. 处理响应 ：在回调函数中，若请求成功则将新文本添加到列表中。
3. 启动定时器 ：首次点击启动按钮时，先发起一次 Ajax 请求，然后设置定时器，每隔 15 秒检查一次。
4. 检查请求状态 ：在定时器事件中，检查 XMLHttpRequest 对象的 readyState ，若为 4 则发起新的请求。
5. 停止定时器 ：点击停止按钮时，清除定时器。

3. 跨窗口通信的 postMessage 方法

当应用需要与 iFrame 中的小部件进行通信，且不想通过网络传输时，可以使用 HTML5 的 postMessage 方法。

以下是示例代码：

function manageEvent(eventObj, event, eventHandler) {
   if (eventObj.addEventListener) {
      eventObj.addEventListener(event, eventHandler,false);
   } else if (eventObj.attachEvent) {
      event = "on" + event;
      eventObj.attachEvent(event, eventHandler);
   }
}

function sendMessage() {
  try {
    var farAwayWindow =
document.getElementById("widgetId").contentWindow;
    farAwayWindow.postMessage(
"dragonfly6.thumbnail.jpg,Dragonfly on flower",
                              'http://burningbird.net');
  } catch (e) {
    alert(e);
  }
};

function receive(e) {
   var img = document.getElementById("image");
   img.src = e.data.split(",")[0];
   img.alt = e.data.split(",")[1];
    e.source.postMessage("Received " + e.data, "*");
}

操作步骤如下：
1. 添加事件监听器 ：使用 manageEvent 函数为窗口添加 message 事件监听器。
2. 发送消息 ：在发送窗口中，获取 iFrame 的内容窗口，并使用 postMessage 方法发送消息。
3. 接收消息 ：在接收窗口中，监听 message 事件，解析消息并更新页面元素。
4. 响应消息 ：接收窗口可以使用 postMessage 方法向发送窗口发送响应消息。

4. 处理 Ajax 返回的 XML 文档

在处理 Ajax 请求时，有时服务器会返回 XML 格式的数据。我们可以通过 XMLHttpRequest 对象的 responseXML 属性来访问返回的 XML 文档。

以下是示例代码：

if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
   var citynodes = xmlHttpObj.responseXML.getElementsByTagName("city");
   ...
}

操作步骤如下：
1. 检查请求状态 ：确保请求已完成且响应状态为 200。
2. 访问 XML 文档 ：使用 responseXML 属性获取 XML 文档对象。
3. 查询数据 ：使用 DOM 方法（如 getElementsByTagName ）查询 XML 文档中的数据。

5. 从 XML 树中提取相关信息

一旦获取了 XML 文档，我们可以使用与查询网页元素相同的 DOM 方法来提取其中的相关信息。

以下是示例代码：

var stories = xmlHttpObj.responseXML.getElementsByTagName("story");
for (var i = 0; i < stories.length; i++) {
  var story = stories[i];
  var url = story.childNodes[0].firstChild.nodeValue;
  var title = story.childNodes[1].firstChild.nodeValue;
  if (url === "none")
      str += title + "<br />";
  else
      str += "<a href='" + url + "'>" + title + "</a><br />";
}

操作步骤如下：
1. 查询元素 ：使用 getElementsByTagName 方法获取所有符合条件的元素。
2. 遍历元素 ：遍历元素列表，访问每个元素的子节点并提取数据。
3. 处理数据 ：根据提取的数据构建 HTML 字符串，并插入到页面中。

总结

本文介绍了 JavaScript 在处理结构化数据和实现通信方面的几种常见技术，包括按需选择的 Ajax 应用、使用定时器自动更新页面数据、跨窗口通信的 postMessage 方法以及处理和查询 XML 文档。这些技术在 Web 开发中非常实用，可以帮助我们实现更高效、更交互性的应用程序。同时，我们也需要注意一些安全问题，如在使用 postMessage 方法时要谨慎处理消息来源和内容，以确保应用程序的安全性。

在实际应用中，我们可以根据具体需求选择合适的技术，并结合使用，以达到最佳的开发效果。希望这些技术能为你的 Web 开发工作带来帮助。

流程图示例

graph LR
    A[用户选择单选按钮] --> B[发起 Ajax 请求]
    B --> C{请求是否成功}
    C -- 是 --> D[解析响应数据并填充下拉列表]
    C -- 否 --> E[显示错误提示]

表格示例

技术名称	应用场景	主要步骤
按需选择的 Ajax 应用	根据用户选择动态填充表单元素	获取用户选择、准备请求、发送请求、处理响应
使用定时器自动更新页面数据	实时显示频繁更新的文件内容	发起请求、处理响应、启动定时器、检查状态、停止定时器
跨窗口通信的 postMessage 方法	与 iFrame 中的小部件通信	添加事件监听器、发送消息、接收消息、响应消息
处理 Ajax 返回的 XML 文档	处理服务器返回的 XML 数据	检查请求状态、访问 XML 文档、查询数据
从 XML 树中提取相关信息	提取 XML 文档中的特定信息	查询元素、遍历元素、处理数据

JavaScript 结构化数据处理与通信技术详解（续）

6. JSON 数据处理

在 JavaScript 中，JSON（JavaScript Object Notation）是一种非常流行的数据结构。它提供了类似于 XML 的丰富性，但避免了客户端处理 XML 时可能带来的性能问题。JSON 本质上是 JavaScript 对象的字符串序列化。

在 ECMAScript 5 之前，需要使用 eval 函数将 JSON 字符串转换为对象，但这存在安全风险。现在，JavaScript 内置了 JSON 处理功能。

以下是一个简单的 JSON 数据示例和处理代码：

// 示例 JSON 数据
const jsonData = '{"name": "John", "age": 30, "city": "New York"}';

// 将 JSON 字符串转换为对象
const obj = JSON.parse(jsonData);

// 访问对象属性
console.log(obj.name); // 输出: John
console.log(obj.age);  // 输出: 30

// 将对象转换为 JSON 字符串
const newJson = JSON.stringify(obj);
console.log(newJson); // 输出: {"name": "John", "age": 30, "city": "New York"}

操作步骤如下：
1. 解析 JSON 字符串 ：使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象。
2. 访问对象属性 ：像访问普通 JavaScript 对象一样访问解析后的对象属性。
3. 将对象转换为 JSON 字符串 ：使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。

7. RDFa 和 Microformats 元数据处理

除了 JSON 和 XML，还有其他方法可以为网页元素添加元数据，其中 RDFa 和 Microformats 得到了广泛支持，并且有专门的 JavaScript 库。

RDFa（Resource Description Framework in Attributes） ：是一种在 HTML 中嵌入元数据的方法，通过在 HTML 标签中添加特定属性来描述资源。
Microformats ：是一种轻量级的元数据标准，通过在 HTML 中使用特定的类名来标记数据。

虽然本文没有详细的代码示例，但在实际应用中，可以使用相应的 JavaScript 库来处理这些元数据，例如提取、验证和展示元数据信息。

8. 不同数据处理技术的比较

为了更好地理解各种数据处理技术的优缺点，我们可以通过以下表格进行比较：
| 数据处理技术 | 优点 | 缺点 | 适用场景 |
| ---- | ---- | ---- | ---- |
| HTML 片段 | 简单易用，可直接使用 innerHTML 插入页面 | 难以操作和验证数据，安全性较低 | 简单的页面更新，对数据处理要求不高 |
| XML | 结构清晰，可创建独立文档对象进行查询 | 客户端处理性能较低 | 需要复杂数据结构和查询的场景 |
| JSON | 性能高，易于解析和生成 | 缺乏严格的模式定义 | 数据传输和交互频繁的场景 |
| RDFa 和 Microformats | 便于搜索引擎和其他工具理解页面内容 | 缺乏广泛的标准化支持 | 提高页面的语义化和可访问性 |

9. 综合应用示例

假设我们要开发一个新闻网站，需要从服务器获取新闻数据并展示在页面上。我们可以结合使用 Ajax、JSON 和 XML 技术来实现这个功能。

以下是一个简化的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>新闻网站</title>
    <script>
        function getNews() {
            var xmlhttp = new XMLHttpRequest();
            var url = "news.json"; // 假设服务器返回 JSON 数据
            xmlhttp.open("GET", url, true);
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var newsData = JSON.parse(this.responseText);
                    var newsList = document.getElementById("news-list");
                    newsList.innerHTML = "";
                    for (var i = 0; i < newsData.length; i++) {
                        var newsItem = document.createElement("li");
                        newsItem.innerHTML = "<a href='" + newsData[i].url + "'>" + newsData[i].title + "</a>";
                        newsList.appendChild(newsItem);
                    }
                }
            };
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <button onclick="getNews()">获取新闻</button>
    <ul id="news-list"></ul>
</body>
</html>

操作步骤如下：
1. 发起 Ajax 请求 ：使用 XMLHttpRequest 对象发起 GET 请求，请求服务器上的新闻数据（JSON 格式）。
2. 处理响应 ：在回调函数中，检查请求状态，若成功则将 JSON 字符串解析为 JavaScript 对象。
3. 展示数据 ：遍历新闻数据对象，创建列表项并插入到页面的 ul 元素中。

10. 未来发展趋势

随着 Web 技术的不断发展，数据处理和通信技术也在不断演进。以下是一些可能的未来发展趋势：
- WebSockets 的广泛应用 ：目前 WebSockets 仅在 Chrome 中实现，但它提供了服务器和客户端之间的双向通信能力，未来可能会得到更广泛的支持和应用。
- 更强大的 JSON 模式验证 ：为了提高 JSON 数据的安全性和可靠性，可能会出现更强大的 JSON 模式验证工具和标准。
- 元数据的进一步发展 ：RDFa 和 Microformats 等元数据技术可能会得到进一步的完善和标准化，以提高网页的语义化和可访问性。

流程图示例

graph LR
    A[用户点击获取新闻按钮] --> B[发起 Ajax 请求获取 JSON 数据]
    B --> C{请求是否成功}
    C -- 是 --> D[解析 JSON 数据]
    D --> E[创建列表项并插入页面]
    C -- 否 --> F[显示错误提示]

总结

本文详细介绍了 JavaScript 在处理结构化数据和实现通信方面的多种技术，包括 JSON 数据处理、RDFa 和 Microformats 元数据处理等。通过比较不同的数据处理技术，我们可以根据具体需求选择合适的技术。同时，结合实际应用示例，展示了如何综合运用这些技术来开发一个简单的新闻网站。

随着 Web 技术的不断发展，我们需要密切关注未来的发展趋势，不断学习和掌握新的技术，以开发出更高效、更安全、更具交互性的 Web 应用程序。希望本文能为你的 Web 开发工作提供有价值的参考。