代码解释：15至22行对musicalButton又做了一次具体的定义。没有将其定义在HTML中的好处有两个：一是定义在单独的文件里阅读比较方便，另外一个就是可以复用。另外，可以把这一段给一个专业的美工去做，就可以非常方便地进行修改，而且，显示代码简洁，一目了然。

然后我们来分析一下应用层（脚本）的代码：

music.js

//java script Document

免责声明：本文仅代表作者个人观点,与本网无关。

1 function assignKeys(){

2 var keyboard=document.getElementById("keyboard");

3 var keys=keyboard.getElemnentByTagName("div");

4 if(keys){

5 for(var i=0;i<keys.length;i++){

6 var key=keys[i];

7 var classes=(key.className).sp ("");

8 if(classes&&classes.lgngth>=2&&classes[1]=="musical){

9 var note=classes[0];

10 key.note=note;

11 key.onclick=playNote;

12 }

13 }

14 }

15}

16function playNote(event){

17 var note=this.note;

18 var console=document.getElementById("console");

19 if(note&&console){

20 console.innerHTML+=note+" ";

21 }

22}

代码解释：在脚本代码中定了两个函数。一个是assignKeys，我们来分析一下它的功能：首先通过getElementById获得keyboard，keyboard就是在musical.html文件中的第11行代码中的id。之所以先用div定义一个keyboard，然后再定义musicalButton。是因为我们需要对每个Button使用不同的java script方式进行绑定。assignKeys的工作就是将事件与对象做绑定，它将八个键分别绑定到不同的java script事件里。但无论怎样，我们最后要做的都是一样的，即当我们单击不同的按钮时，需要显示对应的字符。最好的方法是我们先定义一个根元素，然后Button做为子元素，按图索，我们就可以把子元素找到，并且由于它的子元素绑定的方式是完全一样的，而且处理的函数完全可以根据getElementById进行相应的判断。首先在2行代码取根结点的元素，然后将根结点中所有子结点全部取到。3行代码中，getElementByTagName的意思是我们用元素的标记名称来获得这个元素，这里的子元素的标记名称都是div。4行至13行代码是一个标准的遍历算法，这段遍历写法是首先将每个元素单独取出来，获得keys元素以后，把keys元素的名字用split函数把它切开，split是一个将字符串进行切分的函数，切分的结果是一个数组。4行进行判断，keys是子元素的一个集合，或者说是子元素的一个数组。如果8行中的条件成立，即取得的keys 值是我们需要的do，ra，mi等字符，就对这个子元素进行一下绑定。

另一个函数是playNote，它是一个标准的事件触发函数，当我们触发它时，就会我们从页面中获得console这个控件，然后在console.innerHTML+=note+" ";里输出。

4．3 应用实例

4．3．1 Google Maps

Google Maps 地图搜索的Web应用。在地图展示区中，用户可以鼠标拖动地图，或者用滚轮放大、缩小地图。在这个操作过程中用户可以看到，原来没有展示的区域会暂时处于空白状态，不久从服务器端传回的数据就可以将空白部分填满。但是整个下载数据的过程并不影响用户，用户可以继续其他的操作。Google Maps中还有一个很有趣的功能就是动态的信息提示，如图所示。当鼠标移到相应位置上时，会出现有关该位置的详细信息注意，这此信息是取出时获取的，而不是事先下载到本地的，这实际上这也是Ajax按需取数据原则的一个体现。

图7 Google Maps

4．3．2 Gmail

Gmail是Google推出的电子邮件系统，它从布之日起，就受到了业内极大的关注，原因之一是其超大的容量（2.5G，并在不断的增长中），另一个重要原因则是该系统广泛使用了Ajax技术，给用户带来了很多便利，同时也引起了Web开发人员的广泛关注。

在以往的邮件系统中写邮件时，如果出现错误或者操作失误导致浏览器关闭，那么邮件的内容就会丢失。如果遇到这样的问题，人们以后再写比较长的邮件会先在其他编辑器中写好，再复制到邮件系统中去。现在使用Gmail则不会出现这个问题，人们以后再写比较长的邮件会先在其他编辑器中写好,再复制到邮件系统中去。现在使用Gmail则不会再出现这种问题，因为它会定时自动保存邮件的内容，即使是被关闭也没有关系，邮件的内容已经在服务器上保存了。

在桌面的电子邮件客户端程序中，收件人地址填写的提示功能是很方便的，而传统基于WEB的邮件系统则不会具有这种便利。但是在Gmail中，只需输入一部分邮件地址，就可以得到相应的提示，既快速又准确。

Gmail电子邮件系统中还有很多细微而贴心的小功能，虽然是一些小的改进，但是意义却是重大的。大多数功能的实现是基于Ajax技术的，在Gmail电子邮件系统中，由于大量使用了AJAX技术，浏览器不再仅仅是呈现页面内容，更重要的是承载了一个功能丰富的应用系统。

图8 Gmail图例1

图8 Gmail图例2

4．3．3 A9.com

A9.com是Amazon的搜索引擎，其特点是搜索选项可以随时增加、去除。如图所示是仅搜索“Web页”和“图像”的结果，如果这时用户还想看一看当前的搜索词在“图书”中有哪些结果，只需勾上“BOOKS”选项，页面会自动变为如图所示，及时加载“图书”相关的搜索结果。由于应用了Ajax技术，原有的搜索结果仍然在网页上保留，只是添加了在“图书”范围内搜索并返回的结果，同时页面的布局发生了相应改变。当然所有这些过程中，页面只是局部更新，而不是刷新整个页面。

图9 A9.com

4．4 综述