ajax in active 第一章 1.1 Ajax的第一步用DOM工作

最新推荐文章于 2024-09-11 20:28:45 发布

ppanyong

最新推荐文章于 2024-09-11 20:28:45 发布

阅读量2.4k

点赞数

分类专栏： Ajax 文章标签： ajax iframe 文档 xmlhttprequest function stylesheet

Ajax 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

2.4 用DOM组织可视界面
The Document Object Model 文档对象模型DOM ，使网页能够用JS引擎处理分析。使用DOM，我们就可以处理文档结构了。在写ajax程序时，dom极其有用。DOM表述网页文档时使用树型结构，树由元素和节点构成。javascript引擎可以通过 document 变量来分析树的根。DOM元素在W3C标准中由很好的定义。

2.4.1 使用DOM
在任何应用中，我们都希望能够调整用户界面，为用户提供及时的反馈。这可能涉及警告标签的颜色等。接下来我们就用DOM来创建HTML。首先看到的文档比较复杂，让我们先开始DOM操作的一小步。假设我们想显示一个友好的用户欢迎界面。当页面初次被加载的时候我们并不知道用户的名字。所以，我们希望能够在页面加载后，调整页面结构来显示用户姓名。

<html>
<head>
<link rel='stylesheet' type='text/css'
href='hello.css' />
<script type='text/javascript'
src='hello.js'></script>
</head>
<body>
<p id='hello'>hello</p>
<div id='empty'></div>
</body>

hello.js

window.οnlοad=function(){
   var hello=document.getElementById('hello');
   hello.className='declared';
   var empty=document.getElementById('empty');
   addNode(empty,"reader of");
   addNode(empty,"Ajax in Action!");
   var children=empty.childNodes;
   for (var i=0;i<children.length;i++){
      children[i].className='programmed';
   }
   empty.style.border='solid green 2px';
   empty.style.width="200px";
}
function addNode(el,text){
   var childEl=document.createElement("div");//增加div元素
   el.appendChild(childEl);
   var txtNode=document.createTextNode(text);//增加text元素
   childEl.appendChild(txtNode);
}
JS代码稍稍复杂一些。程序的入口点在 window.onload()函数。它将在页面被首次载入时执行。在这时，dom树结构已经被创建了。

2.4.2 找到DOM节点
      使用js操作DOM的第一件事就是找到那个您想改变的文档元素。就像早前提及的，我们最初能够得到的一个引用就是根节点，就是全局变量中的 document 。没一个节点都是document的子节点。不过一级一级的向下遍历整个dom树则是个痛苦的过程。幸运的，我们还有很多快捷方式可以使用。最常用的就是根据标签的id定位。例如：
var hello=document.getElementById('hello');
        也有一些情况，我们希望能够一步一步的遍历dom树。既然dom被组织成树结构，那么dom节点就有不只一个子节点和父节点。他们是parentNode 和childNodes属性。childNodes可以赋值成数组类型进行遍历。
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
....
}
       第三种方法也值得一提，按照tag标签名定位。getElementsByTagName("UL")，以上这些方法都是非常有用的。

2.4.3 增加一个dom节点
       另一点，重构DOM节点。很多情况下我们会希望增加一个复杂的新节点。执行dom的js同样给了我们很多新的方法。
      回到上一节提供的代码示例。id是‘empty’的标签最初是空的。当页面被加载时，我们动态的创建了一些内容。其中addNodes方法使用了标准的document.createElemnt()和document.createTextNode()的方法。
var childEl=document.createElement("div");
       DOM创建text节点和描绘HTML元素是分离的。我们还不能直接将样式应用到节点元素上。一旦节点（无论是什么类型的节点）被创建，在将它呈现在了浏览器之前，它必须先附加到文档。appendChild()函数就是启这个作用的。
el.appendChild(childEl);

2.4.5 一个捷径：使用innerHTML属性
迄今为止，我们介绍的方法主要提供了对DOM API底层的控制。然而， createElement和appendChild函数是比较复杂和详尽的API,它们适合处理文档已经建立好的DOM文档。对于想任意赋值元素内容的情况，使用innerHTML属性是很好的选择，所有的web浏览器DOM元素都支持innerHTML属性。例如，我们可以用innerHTML属性取代addNode函数。el.innerHTML+="<div class='programmed'>"+text+"</div>";
我们现在已经涉及到了js、css和DOM对象。这些其实都是在DHTML中规范过的。就像我们在本章介绍中提到，ajax使用了dhtml的很多技术，但是它又是全新，因为它还包含一个元素。在下一节，我们就来讨论这个元素。

2.5 使用xml技术异步导入数据
当用户在使用一个应用程序时，使用者会不断的与程序交互，就像是工作流的一部分。在第一章，我们讨论了维持程序响应的重要性。
虽然我们不得不接受，客户端的请求必须等待服务端的回应。但是，我们还是有很多办法让这样的请求看上去象异步的，这样就可以维持用户的工作。最早的尝试是使用iframe进行后台通信。现在，我们使用XMLHttpRequest对象，它更简单易用。接下来我们来看看这两个不同的技术。

2.5.1 iframe
当dhtml和Netscape Navigator第四版以及IE发布的时候，dhtml展示了它的柔韧性和可编程的网页框架。其中就有一个来自旧的网页框架的扩展 iframe。I表示inline，用来区别于frameset。iframe是作为DOM树的一部分存在的。这也意味着你可以在DOM中移动它。当人们开始意识到iframe可以被设计成完全透明的，关键的突破发生了。这样的设计就允许你在后台完成数据更新了。
象其他DOM元素一样，Iframe能够用html声明，也可以用document.creatElement()生成。下面是一个简单的案例，我们创建一个看不见的iframe用来将数据导入，用document.getElementById()得到它。
Listing 2.6 Using an IFrame
<html>
<head>
<script type='text/javascript'>
window.οnlοad=function(){
var iframe=document.getElementById('dataFeed');
var src='datafeeds/mydata.xml';
loadDataAsynchronously(iframe,src);
function loadDataAsynchronously(iframe,src){
//...do something amazing!!
</script>
</head>
<body>
<iframe id='dataFeed' style='height:0px;width:0px;' >
</iframe>
</body>
</html>