当前位置: 首页 > 图文教程 > Java技术 > Web框架 > Web框架：使用Ajax技术开发Web应用程序

Web框架
Web框架：Struts标记库定制JSP标记
Web框架：简述Ajax技术的那些框架
Web框架：利用列表数据提高开发效率
Web框架：Struts2中声明式异常处理
Web框架：小议Spring的异常处理那点事
Web框架：详谈AOP概念
Web框架：小编浅谈Struts2的Ajax支持
Web框架：Ajax提供的div标签
Web框架：程序员之家七月份Web框架总结
Web框架：浅谈Spring Bean封装机制
Web框架：小编浅谈Struts配置文件
Web框架：小编谈Spring中的AOP 应用
Web框架：Spring的闪亮之处：事务管理
Web框架：浅谈iBATIS的动态映射
Web框架：Hibernate中五个接口那些事
Web框架：Hibernate的ORM与Hibernate的优点
Web框架：Struts2的OGNL
Web框架：Struts中的ActionForm 作为防火墙
Web框架：小编浅谈Struts2中使用JSON插件实现Ajax
Web框架：Aegis绑定那些事

No. « 2 3 4 5 »

技术文章搜索

关键字

Web框架：使用Ajax技术开发Web应用程序

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 147 ::
收藏到网摘: n/a

   

 

让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点（或者，元素和子元素）。在这个例子里，我们将使用一些家庭宠物的名字：
<?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>
   <pet>猫</pet>
   <pet>狗</pet>
   <pet>鱼</pet>
  </pets>
</data>
　　在上面，我们有这个XML声明（标明这个文档是一个XML 1.0 文档，使用UTF-8编码），一个根元素（<data>）将下面所有的元素组合在一起，一个<pets>元素组织了所有的宠物，然后一个<pet>节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在<pet>元素中设置了文本节点：猫，狗，鱼。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>使用Ajax开发Web应用程序 - 示例</title>
    <script type="text/javascript"><!--
    function ajaxRead(file){
      var xmlObj = null;
      if(window.XMLHttpRequest){
          xmlObj = new XMLHttpRequest();
      } else if(window.ActiveXObject){
          xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
      } else {
          return;
      }
      xmlObj.onreadystatechange = function(){
        if(xmlObj.readyState == 4){
          processXML(xmlObj.responseXML);
        }
      }
      xmlObj.open ('GET', file, true);
      xmlObj.send ('');
    }
    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].firstChild.data + '</td></tr>';
      }
      insertData += '</table>';
      document.getElementById ('dataArea').innerHTML = insertData;
    }
    //--></script>
  </head>
  <body>
    <h1>使用Ajax开发web应用程序</h1>
    <p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p>
    <p>这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
<a href="#" onclick="ajaxRead('data_2.xml'); return false">查看演示</a>.</p>
    <div id="dataArea"></div>
  </body>
</html>