如何使用ajax开发web应用程序（1）

最新推荐文章于 2024-11-11 22:05:17 发布

f002489

最新推荐文章于 2024-11-11 22:05:17 发布

阅读量416

点赞数

分类专栏： Ajax 文章标签： ajax web xml encoding javascript function

本文链接：https://blog.csdn.net/f002489/article/details/4869890

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. http://hi.baidu.com/lshun/blog/item/2378b4c36fdef455b219a85b.html

CODE:

<?xml version="1.0" encoding="UTF-8"?>
<data>
   <pets>
     <猫 />
     <狗 />
     <鱼 />
   </pets>
</data>

　　然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样：

[Copy to clipboard]

CODE:

（Sheneyan注：修改后的示例见： http://sheneyan.com/html/article/ajax/example_2_1.html ，XML文件见： http://sheneyan.com/html/article/ajax/data_2_1.xml ）

　　这里所作的修改就是我们指向了<pets>组元素（这个“[0]”意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。

　　还有另外一种方式来完成我们上面的工作，就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样：

[Copy to clipboard]

CODE:

<?xml version="1.0" encoding="UTF-8"?>
<data>
   <pets>
     <pet type="猫" />
     <pet type="狗" />
     <pet type="鱼" />
   </pets>
</data>

　　你只需要稍微修改一下你的processXML函数，它变成这样子了：

[Copy to clipboard]

CODE:

     function processXML(obj){
       var dataArray = obj.getElementsByTagName('pet');
       var dataArrayLen = dataArray.length;
       var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
       + 'Pets</th></tr>';
     for (var i=0; i<dataArrayLen; i++){
           insertData += '<tr><td>' + dataArray[i].getAttribute('type') + '</td></tr>';
       }
       insertData += '</table>';
       document.getElementById ('dataArea').innerHTML = insertData;
    }

（Sheneyan注：修改后的示例见： http://sheneyan.com/html/article/ajax/example_2_2.html ，XML文件见： http://sheneyan.com/html/article/ajax/data_2_2.xml ）

　　关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前<pet>节点的“type”属性的值。

继续...

　　现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：

[Copy to clipboard]

CODE:

<?xml version="1.0" encoding="UTF-8"?>
<data>
   <pets>
     <pet>Cat
       <task>Feed</task>
       <task>Water</task>
       <task>Comb out fleas</task>
     </pet>
     <pet>Dog
       <task>Feed</task>
       <task>Water</task>
       <task>Put outside</task>
     </pet>
     <pet>Fish
       <task>Feed</task>
       <task>Check oxygen, water purity, etc.</task>
     </pet>
   </pets>
</data>

　　也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个<pet>元素都是一个组<pets>的子组，而每一个<task>则是每一个<pet>组的子元素。

　　在我继续之前，你也许希望将你的表格用一些css美化一下，比如：

[Copy to clipboard]

CODE:

　　这让这个表格更容易读取。现在让我们去研究函数processXML：

[Copy to clipboard]

CODE:

（Sheneyan注：修改后的示例见： http://sheneyan.com/html/article/ajax/example_2_3.html ，XML文件见： http://sheneyan.com/html/article/ajax/data_2_3.xml ）

　　新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和 “dataArrayLen”类似，除了它们指向不同的数组（特别是它们将指向那些“task”元素－当“dataArray”和 “dataArrayLen”指向“pet”元素的时候）。

　　我们也改变了变量“insertData”的初始值－我们增加了一个表格头（<th>）给我们的“tasks”字段。

　　下一步改变在于循环：我们把值赋给subAry和subAryLen变量。变量subAry成为当前<pet> 的<task>元素的数组。变量subAryLen成为这个数组的长度，直到这个数组发生变化（当外部循环走到下一个<pet> 时）。

　　我们创建了一个内嵌的循环来处理所有的<task>元素，一次一个。大概来说，我们创建一个新的数据格，放进一个用逗号分隔的任务列表，然后关闭数据表格以及当前行。尤其，这些<task>元素节点数据（任务本身，比如，“喂食”）放置入变量“insertData”里的数据格。

　　接下来，我们检验当前<pet>是否有其它更多的task。如果还有，我们增加一个逗号（，）到变量insertData来让每一个任务使用一个逗号分隔（“a, b, c”，而不是“a, b, c,”－注意，最后一个逗号在第二个任务那里，所以我们不需要）。这个工作在我们取得subAry数组长度的时候（给循环的“j”变量加1）就完成了。因为这个循环会在下一个循环的时候把变量“j”递增1,“j”会比它这次检验时还多1。因此，如果“j+1”（或者，“当循环再次开始的时候j的值”）等于 subAryLen（当前<pet>节点的<task>节点数目），这个循环将停止。如果循环不再运行，我们就不再添加新的逗号来分隔任务。所以如果“j+1” 不等于subAryLen，我们直到我们可以安全的加入逗号到“insertData”，为下一个<task>作准备。

　　一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个<pet>。这个处理一直进行到所有的<pet>元素（以及每一个pet的所有<task>元素）都被处理完。

有其他方法吗？

　　你也许会想：“那javascript变得相当复杂了，但它只会随着XML越来越复杂而跟着变复杂，也许我们能够简化XML，然后，简化 javascript”。如果你这么想，很棒，因为你完全正确。我之前展示的不同方法之一，我详细说明的那个也许能够成为最合适的。我们怎么使用属性来对应每一只宠物以及相应任务？XML看起来会变成怎样？

[Copy to clipboard]

CODE:

<?xml version="1.0" encoding="UTF-8"?>
<data>
   <pets>
     <pet type="Cat" tasks="Feed, Water, Comb out fleas" />
     <pet type="Dog" tasks="Feed, Water, Put outside" />
     <pet type="Fish" tasks="Feed, Check oxygen, water purity, etc." />
   </pets>
</data>

　　哇哦！看起来简单多了。让我们看看我们的processXML函数如何修改：

[Copy to clipboard]

CODE:

   function processXML(obj){
     var dataArray = obj.getElementsByTagName('pet');
     var dataArrayLen = dataArray.length;
     var insertData = '<table><tr><th>'
      + 'Pets</th><th>Tasks</th></tr>';
     for (var i=0; i<dataArrayLen; i++){
         insertData += '<tr><td>' + dataArray[i].getAttribute('type')              + '</td>'
+ '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
     }
     insertData += '</table>';
     document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见： http://sheneyan.com/html/article/ajax/example_2_4.html ，XML文件见： http://sheneyan.com/html/article/ajax/data_2_4.xml ）

　　就像你猜的一样，函数简单多了。因为代码变得简单，它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量insertData现在插入更多的HTML，尤其是两个新变量“type”和“tasks”。就如我们较早之前所学的，那些属性是我们从XML文档的<pet>元素中取得的，而且每个pet的属性都有不同的值。对于你自己修改这个XML文件以适应你的进度的变动来说也许是最简单的方法。例如，如果你最终把你的猫身上的跳蚤抓光了，你只要简单从你的猫的每日任务表中把“减少跳蚤数量”删除，然而在之前我们使用的XML中，实现起来也许会觉得糊里糊涂。

　　最后的XML格式化的方法是将两部分混合。现在，我们将使用属性和不同的标签。让我们看一下示例XML：

[Copy to clipboard]

CODE:

<?xml version="1.0" encoding="UTF-8"?>
<data>
   <pets>
     <猫 tasks="喂食, 饮水, 减少跳蚤数量" />
     <狗 tasks="喂食, 饮水, 带出去遛遛" />
     <鱼 tasks="喂食, 检查氧气，水的纯度，其它" />
   </pets>
</data>

　　这也许是最便于理解的XML。让我们分析一下我们为了让processXML函数运作起来所作的变更：

[Copy to clipboard]

CODE:

（Sheneyan注：修改后的示例见： http://sheneyan.com/html/article/ajax/example_2_5.html ，XML文件见： http://sheneyan.com/html/article/ajax/data_2_5.xml ）

　　“dataArray”现在指向了<pets>的子节点，将它们作为一个数组对待（换句话说，dataArray现在是在<pets>节点内所有节点的数组）。这事因为每一个标签都不同（<猫 />，<狗 />，<鱼 />），所以我们不能使用这些元素的名称来搜索它们（而之前我们可以使用<pet>，因为所有的元素都是<pet>）。

　　还是一样，每个节点之间的有空格，所以在我们的处理过程中得排除掉文本节点。我们能够检验标签名是否存在－文本节点是节点但没有标签，而<猫 />，<狗 />，<鱼 />节点都是标签。所以如果一个标签有名字，那我们能够将数据插入变量insertData。我们插入的数据是一个表格并有两个表格数据格。这第一个单元格是标签名，也就是宠物的类型（猫，狗或鱼），而第二个单元格则是指定动物的“tasks”属性值（比如“喂食或饮水”）。

结束语

　　在这篇文章里，我演示了这个例子的很多变化，你可以随意试验它们来检验哪个更适合你。只要记住一点，XML是“可扩展的”，所以没有“错误的”方法来组合你的数据，虽然经常有一个“最好的”方法。而且，要注意让你的XML保持格式良好。记住很多问题来自于忘记结束一个标签（比如<狗 />而不是<狗>;除非这个节点中有数据，比如下面的<狗>这里有数据哦</狗>）。

　　我意图使XML和javascript的应用不糊涂而变得明朗。一步步的学习处理更多的数据，你能够将ajax运用于更大的用途。我希望看到ajax更多的应用于企业网站，及其它。所以如果你将这些知识应用于实践，我很高兴了解到你学到了什么

//php 解析xml

<?php
header('Content-Type: text/xml');//编号1
echo '<?xml version="1.0" encoding="UTF-8"?>';//编号2
echo "/n<data>/n<pets>/n";//编号3
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("无法连接mysql.");
$db    = mysql_select_db("pets",$conn) or die("无法选择数据库.");
$result = mysql_query("SELECT * FROM `pets`");
   if(mysql_num_rows ($result) == 0){
      die ('Error: 数据库没有数据.');
   }
   while ($row = mysql_fetch_assoc($result)){
      echo '<'.$row['pet'].' tasks="'.$row['tasks'].'" />'."/n";//编号4
   }
   echo "</pets>/n</data>";//编号5
mysql_close($db);
?>