四种外部数据格式比较

HTML

优点：HTML片段实现起来只需要很小的工作量。这种格式的外部数据可以通过一种简单的方法加载并插入到页面中，甚至连回调函数都不必使用。无需遍历数据。

缺点：重用性差，外部文件必须与它们的目标容器紧密结合。

JavaScript

JavaScript文件能投提供极大的灵活性，但它却不是一种真正的数据存储机制。

Json

优点：Json文件的结构使它可以方便地被重用。而且它们非常简洁，也容易阅读，读取速度快。

缺点：Json文件中的错误可能导致页面上的脚本静默地终止运行，甚至还会带来其它的负面影响，因此，这种数据必须由信得过的人仔细进行构建。

XML

优点：XML文档的可移植性是当之无愧的王者，XML已经成为了Web服务领域的“世界语”。xpath、dtd等都为它增色不少，能够对格式进行有效的验证。

缺点：XML格式的文件体积相对较大，解析和操作它们的速度要慢一些。

总结

通过对以上各种数据格式优缺点的分析，我们知道在不需要与其它应用程序共享数据的情况下，以HTML片段提供外部数据一般来说都是最简单的。如果数据需要重用，而且其它应用程序也可能因此受影响，那么在性能和文件大小方面具有优势的Json通常是不错的选择。而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

示例：

1. 用Ajax读取XML格式的数据

用Ajax读取XML格式的数据，只需要读取XMLHttpRequest对象返回的responseXML属性即可。代码如下：

Client - helloworld.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
          “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
          <html>
          <head>
          <title>Ajax Hello World</title>
          <script type=”text/javascript”>
          var xmlHttp;
        function createXMLHttpRequest(){
          if(window.ActiveXObject){
          xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
          }
          else if(window.XMLHttpRequest){
          xmlHttp = new XMLHttpRequest();
          }
          }
        function startRequest(){
          createXMLHttpRequest();
          try{
          xmlHttp.onreadystatechange = handleStateChange;
          xmlHttp.open(”GET”, “data.xml”, true);
          xmlHttp.send(null);
          }catch(exception){
          alert(”您要访问的资源不存在!”);
          }
          }
        function handleStateChange(){
          if(xmlHttp.readyState == 4){
          if (xmlHttp.status == 200 || xmlHttp.status == 0){
          // 取得XML的DOM对象
          var xmlDOM = xmlHttp.responseXML;
          // 取得XML文档的根
          var root = xmlDOM.documentElement;
          try
          {
          // 取得<info>结果
          var info = root.getElementsByTagName(’info’);
          // 显示返回结果
          alert(”responseXML’s value: ” + info[0].firstChild.data);
          }catch(exception)
          {
          }
          }
          }
          }
          </script>
          </head>
          <body>
          <div>
          <input type=”button” value=”return ajax responseXML’s value”
          onclick=”startRequest();” />
          </div>
          </body>
          </html>

2. 用Ajax读取JSON格式的数据

用Ajax读取JSON格式的数据，需先用XMLHttpRequest对象的responseText属性读取，再用Function构造返回JSON对象的方法，能过方法创建JSON对象。代码如下：

Client - helloworld.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
          “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
          <html>
          <head>
          <title>Ajax Hello World</title>
          <script type=”text/javascript”>
          var xmlHttp;
        function createXMLHttpRequest(){
          if(window.ActiveXObject){
          xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
          }
          else if(window.XMLHttpRequest){
          xmlHttp = new XMLHttpRequest();
          }
          }
        function startRequest(){
          createXMLHttpRequest();
          try{
          xmlHttp.onreadystatechange = handleStateChange;
          xmlHttp.open(”GET”, “data.txt”, true);
          xmlHttp.send(null);
          }catch(exception){
          alert(”您要访问的资源不存在!”);
          }
          }
        function handleStateChange(){
          if(xmlHttp.readyState == 4){
          if (xmlHttp.status == 200 || xmlHttp.status == 0){
          // 取得返回字符串
          var resp = xmlHttp.responseText;
          // 构造返回JSON对象的方法
          var func = new Function(”return “+resp);
          // 得到JSON对象
          var json = func( );
          // 显示返回结果
          alert(”JSON’s value: ” + json.info + “(” + json.version + “v)”);
          }
          }
          }
          </script>
          </head>
          <body>
          <div>
          <input type=”button” value=”return ajax JSON’s value”
          onclick=”startRequest();” />
          </div>
          </body>
          </html>

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载