原文将这60个开源开发工具进行了用途上的简单分类，并按照字母排序，下面是这个列表：

错误跟踪

1 Bugzilla

有超过1000个团队使用它来跟踪软件错误，比如Mozilla（话说我最早听说这个软件的时候我还以为是类似firebug一类的在线js跟踪工具……）,facebook,linux kernel和NASA。这套基于web的系统更利于管理代码变更，解决补丁以及和你团队中的其他成员讨论问题。操作系统：Windows,Linux,OS X

子乌注：最早接触这个软件是大概2006年的时候，那时候在到处寻找一个方便使用的bugtracker，很容易就碰到了bugzilla，可惜，那时候的bugzilla对中文的支持还是有些弱（呃，也有可能是我不会用），再加上对perl的不熟悉，只是碰了一下就放弃，后来在自己拥有一个支持cpanel的空间的时候也试着装过它，还是基于一样的原因，放弃，不过现在bugzilla已经有了中文支持，虽然翻译还不完全，不过应该足敷使用，只是这时候暂时不需要这个东西的加入（自己公司有做类似的简单bugtracker），也就放一边了，不过说实话，它的安装要求实在是让我有些头痛，因为我不懂perl啊-_-

2 GNATS

它在数据库存储软件缺陷的信息，可通过各种接口访问并能与团队成员交流。操作系统：操作系统无关

完全没听过这玩意儿……

业务规则管理系统

3 JBoss Drools

包括5个独立模块：Drools Guvnor（BRMS/BPMS），Drools Expert（rule engine），Drools Flow（process/workflow），Drools Fusion (event processing/temporal reasoning) and Drools Planner (automated planning). 操作系统：操作系统无关

没接触过，这里有相关资料：使用 Drools 规则引擎实现业务逻辑 和JBoss Drools 4.0：业务逻辑正变得更加平易近人

文档生成

4 Javadoc

将你内嵌在java代码中的注释转换成html文档（就和java SDK长的一模一样）。操作系统：Windows, Linux, OS X

作为一个java开发者来说，这个东西熟悉地就好像自己的手指一样，而且大部分的成熟IDE都会将其悄无声息地内置于系统中，不需要个人手工干预生成，当然，手工生成也很简单。不过我不知道作者为什么将其单独列出，它总是随着java一起发布，只要有jdk就会有它。

5 JSDoc

基于JavaDoc，JSDoc会解析你的javascript脚本来生成文档（长的还是和java sdk一模一样）。注意：如果在windows下运行，需要Perl运行环境。操作系统：Windows, Linux

在我某一段很短的工作经历中，我是以javascript为主要工作目标，那段时间我在公司推广了这个软件，因为我实在无法忍受他们用word写的丑陋的文档，那还不如直接生成的好看……

6 phpDocumentor

类似JavaDoc，phpDocumentor将代码注释转换成可阅读的文档，生成速度很快且包含多个模板。操作系统：操作系统无关

这玩意儿没碰过（这也和我没做过完整的php项目有关），标记一下~~

编译器

7 DotGNU Portable.NET

作为Microsoft.net的替代者出现，它提供了多种工具用于编译和运行程序。目前它可以编译C和C#。操作系统：Windows, Linux, OS X

它和mono有啥区别呢？话说在linux下看到的c# like program有好多个啊

8 GCC

这个"GNU Compiler Collection"为C，C++，Objective-C，Fortran，Java，Ada提供前端和库。它可能是最广泛使用的跨平台编译器。操作系统：Windows, Linux

记得98年还在学校的时候，那时候还在使用三寸盘复制东西，为了在学校的电脑上写个代码是煞费苦心，因为那时候常用的几个IDE还是相当的大，基本上一张盘装得满满甚至装不下。在听说了这个东西之后（那时候这玩意儿好小），开心的要死，上网花了1个多小时（T_T，教育网……）终于下载下来，整天抱着跟什么似的，只可惜后来也没变成比尔盖茨~

9 MinGW

"Minimalist GNU for Windows"将GCC编译器和GNU二进制组件移植到了windows上。可以通过这个工具在windows和linux系统上编写windows程序。操作系统：Windows, Linux

GCC的windows版，不过描述里说的“可以在linux里写windows程序”倒是个蛮有意思的功能。

10 Open64

也叫做Pro64,由Interl和中科院创建。它包括针对IA-64 Linux ABI和标准API的C/C++编译器，Fortran90/95编译器。操作系统：Linux

数据库

11 MySQL

现在归Oracle所有，是“世界上最流行的开源数据库”，Yahoo，Alcatel-Lucent, Google, Nokia, YouTube 以及Zappos.com等都是它的用户。它高度可扩展、灵活、迅速，已成为“事实上的高流量网站的标准。”操作系统：Windows, Linux, OS X

直到知道Google是利用完全定制化的MySQL来实现它的数据存储的时候，我才觉得这个数据库的开源是件多么伟大的事情，只要你有实力，你就可以将其改为符合自己需求的工具。不过，总觉得Oracle将MySQL买下居心叵测啊……虽然我主要用Oracle来着……

12 PostgreSQL

虽然MySQL被冠以“世界上最流行”的头衔，不过PostgreSQL的头衔却是“世界上最先进的开源数据库”。V9.0刚刚发布，并提供了内置的二进制复制、热备份、更简单的权限管理以及一些其他的新功能。操作系统：Windows, Linux, OS X

分布式计算

13 Hadoop

Hadoop提供了各种在分布式计算环境中处理大量数据的工具。值得注意的用户有Yahoo, Facebook, Google, Hulu, IBM, LinkedIN, 纽约时报等。操作系统：操作系统无关

集成式开发环境（IDE）

14 Anjuta DevStudio

支持C/C++的GNOME下的IDE。包括了应用向导、互动调试、源码编辑、版本控制、GUI设计及其他更多功能。操作系统：Linux

15 Code::Blocks

这个跨平台的C++ IDE高度可扩展，这让它更容易添加你所需要的功能。它包含了内置的编译器和调试更，以及一个易用的界面。操作系统：Windows, Linux, OS X

16 Dev-C++

Dev-C++是一个支持所有基于GCC编译器的C/C++ IDE。关键功能有综合调试，项目管理，自定义语法编辑器，代码完成等。操作系统：Windows

17 Eclipse

它从一开始的Java IDE成长为如今的完整的开发生态系统。从它的官网上你可以找到除了Eclipse自身之外其他很多有价值的内容：其他的一些Java开发工具、教育资源以及其他的帮助。操作系统：操作系统无关

个人不太喜欢Eclipse，真正使用过的只有当年那个号称“Web 2.0 IDE”的aptana，虽然它的优点相当之多（最突出的就是插件的支持，可以让它无所不能），但是它的缺点也是相当之多（同样是因为插件，因为插件的崩溃导致整个Eclipse出现各种奇怪错误的情况比比皆是，而且插件加载多了之后它占用的内存实在是令人瞠目）。不过萝卜白菜各有所爱，很多人依旧在使用这个杰出的IDE。

18 KDevelop

这个KDE的开发环境已经出现了近十年，并获得了多项殊荣，它提供了对下列语言的良好支持：C、C++、PHP，并有限支持了：Ada、Bash、Fortran、Haskell、Java、Pascal、Perl、Python、Ruby以及SQL。操作系统：Windows, Linux, OS X

19 MonoDevelop

Novell旗下的mono是一个跨平台的C#及.NET开发环境。它支持桌面应用和ASP.NET的快速创建。是一个轻松将VS.NET创建的应用移植到Linux下的途径。操作系统：Windows, Linux, OS X

呃……我已经成浆糊了……mono只是一个IDE- -？我一直以为是mono language来着……

20 SharpDevelop

一个针对Microsoft .NET平台的免费IDE，SharpDevelop（或叫做#develop）支持C#、VB.NET、IronPython、IronRuby、F#和Boo。它提供了综合调试、代码分析、整合的SVN支持等。操作系统：Windows

早期学习.net的时候，因为讨厌VS.net的庞大体积，曾经使用过SharpDevelop一段时间，说真的，它确实不错，最重要的是，还是免费的哦~~~对国人来说，省了到处找key或crack的烦恼-_-

21 NetBeans

除了它的主业：Java开发环境外，NetBeans还支持JavaFX、PHP、Javascript和Ajax、Ruby和RoR、Groovy和Grails，以及C/C++。它可以帮助开发者快速创建网页、企业级、桌面及移动应用。操作系统：Windows, Linux, OS X

写java代码时最早使用的成规模的IDE就是NetBeans（更早的light IDE是jCreator，NetBeans之后是Sun One Studio），后来因为公司统一使用jBuilder而停止使用。前一段时间在考虑写桌面应用时又将其捡了起来。虽说它的功能是很强劲，不过和VS.net有一个一样的问题，它创建的桌面应用有太多不允许我修改的代码了……每次想改个参数都要调个半天，对我这种实在懒得研究如何“可视化”配置参数的人实在是痛苦，于是，我又回到用最基本的editor来写代码……

22 Ultrimate++

这个快速应用开发框架包括了一个C++库以及一个可处理“大”应用的IDE。它注重于提高开发进程并包含了一个“BLITZ-build”技术以使C++重建速度提高4倍。操作系统：Windows, Linux

javascript库

23 jQuery

jQuery自称“the write less do more Javascript Library”，这是个很贴切的描述。它为快速web应用开发简化了HTML document遍历、事件处理、动画以及Ajax互动。操作系统：操作系统无关

呃……和java框架一样，我觉得在熟练掌握javascript的前提下jQuery是个好东西，否则的话，不如不用。

界面设计器

24 Glade

Glade让开发者可以为GTK+工具包及桌面环境快速创建界面。它将界面保存为XML以使其可以为使用不同语言实现的应用所使用。操作系统：Windows, Linux, OS X

无法访问……

移动应用开发

25 PhoneGap development framework

PhoneGap是一个跨平台开发工具，让你使用HTML5和JavaScript创建原生iOS、Android、Palm、Symbian、和BlackBerry应用。它已经被下载超过20万次并获得一系列奖项。操作系统：Windows, Linux, OS X

标记一下，看着不错。

26 Sencha Touch

使用Sencha Touch，开发者可以做出风格如原生iOS和Android应用的HTML5应用。它自称：“the world’s first app framework built specifically to leverage HTML5, CSS3, and JavaScript for the highest level of power, flexibility, and optimization.”操作系统：操作系统无关

哇哇哇，看着很开心啊，全都是用HTML5做的~~有时间去翻翻介绍仔细看看。

建模工具

27 ArgoUML

自称为“领先的开源UML建模工具”的ArgoUML支持所有标准的UML 1.4图表以及10种不同的语言。因为它基于Java实现，它可以运行于任何平台，并能将图表导出为六种不同的文件格式操作系统：操作系统无关

我在ubuntu下使用的是名为Dia的图表编辑器，除了标准UML外还可以画一大堆你想得到想不到的图表……嗯，据说号称类似Microsoft的Visio。

28 StarUML

它的设计目的是为了代替Rational Rose和其他商业建模工具。StarUML支持最新的UML标准以及模型驱动架构（MDA）。它有一个易于使用的界面并可使用插件。操作系统：Windows

看到描述我很开心，看到OS required我很伤心……

并行程序设计

29 Intel Threaded Building Blocks

这个类库帮助C++开发者充分利用多核处理系统的性能，即使他们对线程并不太了解。它有开源和商业两个版本。操作系统：Windows, Linux, OS X

编程语言

30 Go

由Google开发，Go致力于通过提供一个干净简单的编程语言来提高程序员们的生产力。不同于早期的语言，它提供了垃圾收集和并行运算的功能。操作系统：Linux, OS X

31 Java

由Sun开发而现在归属于Oracle，Java允许用户编写可运行于多操作系统上的代码。据Tiobe所言，它是世界上最流行的编程语言。新手可以从上述链接针找到额外的帮助，并为开发者提供了大量的开发工具。操作系统：Windows, Linux, OS X

Java一直是我使用的赚钱用语言，而且我想这个东西应该也不需要什么额外的说明了，从工资上来说，他的性价比来说算还不错的了，而且从跨平台的角度来说也是个不错的开发C/S系统的选择之一（因为总是看不懂VC++里的MFC，所以我觉得java比C++简单……）。

32 Perl

Perl已经存在了22年，并运行于超过100种的不同平台之上。它是一个理想的web编程语言并能轻易地与流行数据库整合。操作系统：Windows, Linux, OS X

因为对perl不熟悉，所以感觉“理想的web编程语言”说不上啦，不过在过去的某个时代，几乎所有的动态网站都是它的天下倒是真的。不过我对perl印象最深的就是它强大的正则功能，我用过的几个编程语言中都能兼容它的正则语法，甚至几个比较强悍的编辑器中也可以选择使用兼容perl正则的语法来进行替换。

33 PHP

这个通用多用途脚本语言特别适用于web开发，使开发人员能够快速编写动态页面。其语法来自于C、Java和Perl，而且它可以嵌入HTML中。操作系统：Windows, Linux, OS X

作为一个成功的大杂烩，我喜欢它的大部分语法（并极度讨厌其小部分长得奇形怪状的语法……），从开发速度上来说（个人角度），它的速度应该算相当快的（无论是从asp还是从jsp过来的程序员应该都能体会到，你可以用asp的那种malformed写法写php，也可以将其封装成一个个类一个个模板来实现MVC）

34 Python

Python的优势在于它的速度、扩展性和易于阅读的语法。它经常被用于网页开发，但它也能用于开发其他类型的应用。操作系统：Windows, Linux, OS X

呃……我计划学习python有几年了都，但一直都没有真正去用心学，到目前为止对它的印象就是便于阅读的格式（很喜欢它的缩进～～）以及超简单的http服务器（时常用来共享本地目录给同事复制内容用），哦，还有很多个会用但不会写的小工具。

35 Ruby

以感觉起来“自然”为设计目的，Ruby的创造者 Yukihiro “matz” Matsumoto 将Perl、SmallTalk、Eiffel、Ada和Lisp揉合成一个新的被称为“方便”且“美丽”的语言。它在世界上最受欢迎的编程语言中排名第十，这和框架Ruby on Rails的流行不无关系。操作系统：Windows, Linux, OS X

我一直用一个很拙劣的借口拒绝了解这个语言：它是日本人写的……不过心底里我知道就算我再不爽Ruby，它也绝对比国人开发的那个“易语言”要值得学习，易语言简直是个笑话……

服务器软件

36 Apache HTTP Server

互联网上使用最广的Web服务器。Apache已经运转了15年，它支撑着超过一半的现存网站的运行。操作系统：Windows, Linux, OS X

彪悍的Apache不需要理由，虽然我用的都是商业版的web服务器，但这只代表着我很懒……因为商业软件的配置简单些，而且我的客户也买得起它们。只要有时间、有经验，apache可以实现不输于商业版服务器的性能与功能。

37 Apache Tomcat

标准的Apache HTTP服务器基于C，而Tomcat则是由Java servlet实现。它的用户包括：E*Trade、Wal-mart、The Weather Channel及其他。操作系统：Windows, Linux, OS X

呃……基于和Apache同样的原因，我只拿tomcat作为测试服务器，相同情况下（嗯……我指的是不怎么优化配置的情况下），商业软件对应用的容错性比Tomcat强大许多。不过Tomcat 7的新特性让我对tomcat的期望值很高，也许在未来的项目中会考虑使用tomcat。

38 EasyPHP

EasyPHP让你用区区几分钟就在系统或移动驱动器上配置好一个WAMP(Windows, Apache, MySQL, Php)。它还包含了一些可选模块：WordPress、Spip、PreastaShop、Drupal、Joomla等。操作系统：Windows

39 XAMPP

这个下载包将Apache Web服务器，MySQL，PHP和Perl绑定在一起方便安装。它有四个可选版本——Windows, Linux, OS X和Solaris，而每个版本还包含了针对该平台的一系列服务应用。操作系统：Windows, Linux, OS X

嗯，在sf.net上你只要搜索和apache/mysql/php有关的内容，你永远都会看到XAMPP飘荡在你搜索结果的最上方……它的下载量太大了。

统计计算

40 R

R是一款用于统计计算及图形应用的编程语言，同时也提供开发环境。它和商业版开发语言S非常类似。操作系统：Windows, Linux, OS X

文本编辑器

41 Emacs

1970年诞生，emacs一直是程序员最爱的文本编辑器（之一）。它提供针对不同语言的语法高亮，以及一个庞大的插件库，提供了对项目计划、调试、日历等的支持。操作系统：Windows, Linux, OS X

呃，好用是好用，不过有点胖（从安装角度来说，毕竟我的ubuntu是安装在u盘上的），而且，对我来说，同时使用多个文本编辑器时快捷键是个困扰……我老是把几个编辑器的快捷键搞混。更喜欢vim的快捷键……当然，这又是一个萝卜白菜的问题了。

42 jEdit

基于Java实现的jEdit是一个针对程序员的全功能文本编辑器。包括自动缩进、语法高亮（130种编程语言）。其他值得注意的功能包括无限撤销与重做，大量的键盘快捷键，一个可以记住删除文本、标记、多选的“Kill ring”。操作系统：操作系统无关

嗯，这个编辑器我也在用，不过属于备用编辑器，不过主要是用它的替换功能（vim的替换长得和sed差不多，虽然快捷，但是有时候并不那么顺手，我还是习惯于类似editplus或ultraedit那样的替换方式——特指perl兼容的正则……），不过jEdit也有个小小的缺点（也是它被我当成备用编辑器的重要原因之一，另外一个原因就是操作起来没vim速度快-_-），那就是它的字体太难看了（貌似是java desktop app的通病）……一样的字体，在其他app下一切正常，在jEdit下就是那么奇怪，见下面抓图（看大图清楚些）：

43 Notepad++

这个Notepad（记事本）的替代者采用了Scintilla引擎来以提供代码编辑和调试工具。它支持超过50种语言，以及大量的插件。操作系统：Windows

它有一个很有特色的功能：你选中一个词后，整个文档中相同的词都会高亮显示。但是我不用这个编辑器的理由很简单：它的正则我一直学不会……虽然看它的帮助，似乎是标准的perl正则，但是好像在使用的过程中并不是那么一回事，用起来还不如editplus里那个被阉割的perl正则好用。

44 TEA

虽然它非常轻量级，但是它依然提供了上百个不同的文本编辑功能。例如，它支持超过20种语言的语法高亮，拼写检查（子乌注：一直觉得对中国人来说拼写检查并无大用，特别是现在火星文和新词满天飞的情况下。），代码片断(code snippets)，书签及其他。操作系统：Windows, Linux, OS X

完全没听说过，先标记一下，以后找来试试。

45 Vim

对标准Unix VI文本编辑器的升级(VI iMproved)。对那些将其当成IDE使用的程序员来说VIM非常有用（虽然我只是将其当成text editor，我也觉得它so helpful……）。它提供了诸如可扩展的语法助手，代码完成，分屏，撤销/重做及其他的许多功能。操作系统：Windows, Linux, OS X

对于这款目前我最爱的编辑器，网上的帮助很多（例如善用佳软的VIM教程与学习资料汇总（2010-02-19更新）），可以去看看，我只是新手，就不多说了，反正我认为它的上手速度比emacs快多了，除了没默认内置游戏外……

版本控制

46 Bazaar

由Canonical赞助以及作为GNU项目的成员，Bazaar支持分布式版本控制。它可跨平台运行，有一个GUI界面并拥有一个广受欢迎的社区和易用的设计。操作系统：Windows, Linux, OS X

木有用过，不做评论

47 Git

作为在linux下可能是最知名的版本控制系统，Git也是其他知名开源项目如Perl，Gnome，Ruby on Rails，Fedora和Debian的选择。它为跟踪历史和修改提供了一个飞快的分布式方法，及对分支(branch)和合并(merge)的良好支持。操作系统：Windows, Linux, OS X

git最有名的在线服务应该就是GitHub了。一直在考虑如何将svn转移到git上……毕竟项目已经进行了相当长一段时间，目前还处于半开发状态，实在是不想将之前的历史放弃掉，万一有问题就头大了。

48 TortoiseSVN

如果你打算在Windows下使用Subversion。你应该使用这个TortoiseSVN客户端。它允许你使用命令及通过Windows资源浏览器查看文件的状态。操作系统：Windows

它和windows的结合还算不错，将svn的使用成本降到了相当低的程度，基本上不需要经过学习就会使用（只要你能看懂那几个很常见的英文单词应该就没太大问题了~）

Web开发

49 Amaya

由W3C研发，Amaya包含了一个浏览器和一个web页面编辑器。它支持HTML，CSS，XML和一些XML应用（包括XHTML族，MathML和SVG）。操作系统：Windows, Linux, OS X

冲着W3C，做个标记~

50 Bluefish

尽管轻量化且迅速，Bluefish依然提供了一整套网页创建功能。针对开发动态网站的高级网页开发者，它支持许多不同的编程语言及脚本。操作系统：Windows, Linux, OS X

作为一个从frontpage,dreamweaver,aptana,然后回到editplus、vim的使用者来说，我已经厌倦了各种繁复的web开发IDE，我需要的只是一个支持高亮的编辑器（最多再提供个支持调用外部程序的插件以方便我编译java），不知道bluefish如何，标记一下。

51 Catalyst

“优雅的MVC框架”，Catalyst遵循KISS（Keep it simple, stupid）原则。它易于安装，易于使用，灵活，可扩展并拥有丰富的文档资源（包括两本关于这个主题的书）。操作系统：Windows, Linux, OS X

子乌注：这个是perl的框架。

52 DotNetNuke

DotNetNuke是一个基于微软的ASP.NET的CMS系统，在全世界已经有50万个站点部署了它。它最适合于创建那种拥有大量“动态内容及交互功能”的网站。操作系统：Windows

直接无视，对.NET站点无爱（其实主要是因为我自己在用的服务器不支持.NET…），不过我记得有看过类似的CMS系统，叫做PHPNuke，不晓得哪个比较新。

53 KompoZer

起源于NVI,KompoZer支持网页文件管理以及所见即所得的网页编辑功能。它的界面和Adobe的DreamWeaver非常接近。操作系统：Windows, Linux, OS X

54 NVU

“第一的免费网页制作系统”，NVU适合初学者的需求，但也能够被高级网页开发者所使用。它基于Mozillia Composer代码基础，和KompoZer非常相像。操作系统：Windows, Linux, OS X

55 Prototype

这个JavaScript框架意图让创建动态web应用更加简单。它提供了一个经典的OO框架，简单的DOM操纵，还拥有号称“最好的ajax库”。操作系统：操作系统无关。

56 Quanta Plus

KDE Web开发包的组成之一，Quanta Plus是一个支持HTML、XHTML、CSS、XML和PHP的Web IDE。关键功能包括模板、用户自建工具栏、集成预览以及和其他KDE Web开发应用程序的整合。操作系统：操作系统无关。

57 Ruby on Rails

专为使用敏捷方法快速应用开发设计，RoR提供了“不受伤害的web开发”。它被上千个应用幕后的开发者所使用，包括Twitter、Basecamp、Github和Groupon。操作系统：Windows, Linux, OS X

58 soapUI

超过2亿次下载，soapUI被称为世界上最流行的web service及SOA测试工具。它对SOAP、REST、HTTP、JMS服务进行功能测试，也包括数据库。操作系统：操作系统无关。

59 Zend Framework

基于PHP5,Zend框架旨在帮助开发者创建“更安全，更可靠，更时尚的web 2.0应用及web服务”。它专注于简单，最好的面向对象体验，企业友好（enterprise-friendly）的许可，和一个经过仔细测试的敏捷代码库。它被下载超过1000万次操作系统：Windows, Linux, OS X

子乌补充

呃，作者的原标题是60 Great Open Source Developer Tools，不过我怎么找也只看到59个……下面这些是我用过或者别人曾经向我推荐过的几个open source的开发相关的工具。

1 Nginx

我是正在使用的轻量级web服务器。Nginx是一款免费、开源、高性能的服务器以及反向代理，同时也可以作为IMAP/POP3 服务器。第一个版本于2004年发布，如今已经有接近6.55%(13.5M)域名使用其为服务器。有名的站点：Wordpress.com，Hulu，Github，Ohloh，SourceForge和TorrentReactor（上述资料来自其wiki）。对我个人来说，它可以在比Apache消耗更少的服务器资源的同时提供更高的服务器性能！唯一的麻烦就是它不兼容Apache的.htaccess，需要为它单独配置解析方案而无法套用现成的.htaccess操作系统：Windows, Linux, (从官网上看不出对OS X的支持如何)

2 Povray

Povray（Persistence of Vision Raytracer）严格说起来和开发无关，它是一个3D建模工具。它使用类似于c语言的描述语言来进行场景及模型的创建。之所以在这里列出，那是因为最早接触它时（1994年……），我被它所震撼，我当时的感觉是：这是一个用代码就能画图的语言（见下图）。

那时候最热衷的事情之一就是用1个小时写好一段代码，然后用10个小时画一个640×480大小的tga图出来，然后再修改，再展示，热此不疲。操作系统：Windows, Linux, OS X

3 GanttProject（网站需翻墙才能访问……）

GanttProject一个跨平台的项目计划及管理系统，可以画Gantt图、安排人力资源、根据Gantt图生成PERT图，可转换Microsoft Project格式的文件（导入/导出），使用WebDAV分享计划。另外，除了桌面版之外还有web start版本哦。基本上可以代替Microsoft Project了（嗯，界面和Project也很像，见下图）。操作系统：Windows, Linux, OS X

小小地抱怨一下：丫丫的，甘特图和政治有啥子关系，连这也封……

先加这几个，其他的以后想到再补充。

在这个系列的第四部分中，你将会学习如何在不刷新页面的前提下通过form来提交数据。 这能在很多方面发挥作用。让我们现从表单(form)的HTML开始，然后我们再给它加上javascript脚本，通过ajax提交表单。

请注意，在这篇文章中我会使用php来响应javascript提交的服务端请求，所以在文章中提及的代码需要保存为一个后缀为.php的文件并在一个支持php的服务器上运行。它没法直接在你的本地硬盘上工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
 
</head>
<body>
<form action="ajax_output.php" method="post">
<fieldset>
<label>姓名:
<input type="text" name="name"></label><br>
<label>出生地:
<input type="text" name="born"></label><br>
<label>
<input type="submit" value="Submit form"></label>
</fieldset>
</form>
 
</body>

这个表单会提交到这个php文件：ajax_output.php－－将接受数据并输出它。

<?php
if(isset($_POST)){
echo '
<div class="note">';
if(isset($_POST['name']) && !empty($_POST['name'])){
echo '
 
你好, '.$_POST['name'].'.
 
';
}
if(isset($_POST['born']) && !empty($_POST['born'])){
echo '
 
你出生于风景如画的'.$_POST['born'].'!
 
';
}
echo '</div>
 
';
}
?>

这个php文件将输出一个包含两个段落的DIV。如果文本域name填写了内容，将输出”你好, [你的名字]“。如果文本域born填写了内容，将会输出”你出生于风景如画的[出生地名]!”，如果你两个空格都填了，那将输出两个消息到同一个DIV中。

该添加javascript了，下面是javascript代码以及说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
 
<script type="text/javascript">
function submitForm(f){
if(window.XMLHttpRequest){
var xmlReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
}
var formData = '', elem = '';
for(var s=0; s<f.elements.length; s++){
elem = f.elements[s];
if(formData != ''){
formData += '&';
}
formData += elem.name+"="+elem.value;
}
xmlReq.onreadystatechange = function(){
if(xmlReq.readyState == 4){
document.getElementById('insert').innerHTML = xmlReq.responseText;
}
}
xmlReq.open(f.method, f.action, true);
xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlReq.send(formData);
return false;
}
</script>
</head>
<body>
<div id="insert"></div>
<form action="ajax_output.php" method="post" onsubmit="return submitForm(this)">
<fieldset>
<label>姓名:
<input type="text" name="name"></label><br>
<label>出生地:
<input type="text" name="born"></label><br>
<label>
<input type="submit" value="提交表单"></label>
</fieldset>
</form>
 
</body>

查看示例

你先注意以下javascript标签部分。这是一个将在表单被提交的时候触发的函数（表单里的onsubmit事件句柄(event handler)将调用这个函数）。这个函数首先创建一个XMLHttpRequest，它用于传输数据到表单的action（ajax_output.ph[）。下一步，我们遍历每一个表单元素并将它们使用（&）连接起来以便于数据可以被正确地传送给action。接下来，我们创建了一个onReadyStateChange函数用于将这个id为insert的DIV和ajax_output.php传输回来的数据组合起来。然后我们打开表单的method(ajax_output.php)－－用POST或者GET（在我们的ajax_output.php中，我们只接受POST的数据）－－以及action (ajax_output.php)。我们需要设置正确的请求头（request header）以便于javascript能够发送经过URL编码的form数据(form urlencoded data)给ajax_output.php，最后就是让javascript发送数据了。

结论

这个脚本是非常通用并且在很多方面都很有用的，因为你能够将form里面的任何表单元素组合成数据并post给这个表单的action而不需要重新加载页面。你只需要简单的修改这个表单的action指向的文件，相应地修改和表单对应的输入域的名字以及如何处理数据。

关于作者

　　Jonathan Fenocchi是一个网络开发者，主攻web设计，客户端脚本，php脚本。他的网站位于：http://www.slightlyremarkable.com

子乌注：忍不住在翻译完发一下牢骚。这个家伙的最后一篇文章在隔了一年之后才面世，而这么长的时间过后，连像我这种迟钝的人都能够摸进ajax的大门……

ajax mistakes

在某网站瞎逛时，发现这个链接，进去逛了逛，觉得很有意思，大家也可以去看看，姑且不论你是否同意里面的观点，看看别人看待ajax的角度，这对于理解一个事物很有帮助。

下面是我对一部分缺陷的看法：

• 为Ajax而Ajax(Using Ajax for the sake of Ajax.)

  （很同意这点，当一个技术本身的生存意义由于它自身的亮点而被抹杀，不知道是这个技术的幸运还是不幸）

• 干掉了back按钮(Breaking the back button)

  back按钮是一个标准的web站点UI的重要功能。然后，后退按钮没法和js很好的合作……

  （gmail似乎作的很好？不过没去仔细看过gmail如何实现后退和js相容的，被这个mistake一提醒，也许这也是ue的一个切口哦）

• 点击的时候没有提供一个可视化的提示(Not giving immediate visual cues for clicking widgets)

  （……也许是我没看懂，觉得写这段的人自相矛盾。。他说没提供可视化提示，不过是拿gmail右上角的红色提示作为例子）

• 阻挡了离线用户于门外(Leaving offline people behind)

  （看标题就清楚了，不过我持保留意见，web application和离线浏览本身似乎就存在着矛盾，要整合，可能要动很多脑子）

• 别让我等(Don’t make me wait)

  （不过，ajax本身就存在着如果客户端的带宽不够，它的展示就会一塌糊涂的问题，这是它的先天缺陷，也是它崛起的先天因素－－由于网速和带宽的不断增大，使得服务端与客户端的频繁通信成为可能）。

• 显式的传递敏感信息(Sending sensitive information in the clear)

  （使用js传递数据，本身似乎就存在着这个风险，在我找到反对意见之前，我倾向认同这点－－https协议除外）

• 假设ajax发展是一个单平台的发展。(Assuming AJAX development is single platform development)

  （作者文中的观点是ajax由于必须兼容多个浏览器，而没法做到只需要编码到标准的js就行，还要考虑到各个浏览器的问题……这个是js的问题，和ajax关系不大吧？）

• 忘掉了可能多人在同时使用同一个应用(Forgetting that multiple people might be using the same application at the same time)

  （嗯，这其实是一个同步的问题，在b/s系统中这是一个麻烦的问题……当然，也许并不麻烦，做一个标记位就解决了吧？）

• 太多代码让浏览器慢下来(Too much code makes the browser slow)

  （呃……同意这点，虽然在代码优化之后会有很大改善，但js本身运行速度慢这个缺陷还是会成为一个瓶颈）

• 不计划要那些禁用或者没有js的用户(Not having a plan for those who do not enable or have JavaScript)

  （呃……我在页面上用ajax的时候就准备放弃这些用户了，我没google那么闲，作两套系统，一套用ajax，一套纯页面。不过养成一个良好的编码习惯还是有必要，比如在超链接中不要直接设置href=”javascript:…”而使用onmouseup或者onclick来触发事件，偶尔也为别人考虑考虑嘛，而且我也不能保证我的js程序在所有的浏览器上同吃）

• 不期然的页面闪烁和改变(Blinking and changing parts of the page unexpectedly)

  （我没经历过以前网页中blink标签的骚扰，所以我对作者的反感有点摸不着头脑，我觉得在适当的提示之后刷新某块页面总比整个页面的刷新看起来舒服）

• 没法把超链接发给朋友以及收藏(Not using links I can pass to friends or bookmark)

  （嘿嘿，这就是我上面提及的那点，如果编码习惯够好－－而且时间够多，在超链接中为非js用户和js用户提供两套方案是可行的）

• 同步导致的批量操作(Asynchronously performing batch operations)

  （作者的意思是说ajax一次性把原来要分几次作的操作一次做掉，而导致他没法跟踪每个元素变化，没法回溯，呃……也许是有这种需求吧。。不过似乎也是可以解决的吧？）

• 导致页面滚动并让我迷失位置（Scrolling the page and making me lose my place）

  （作者认为插入文本到一个页面中会导致页面发生滚动，并让其迷失方向，我没看过这么恶心的效果，没法评价，不过我对于一些ajax的导航作的不好表示不满意，我经常会迷失于一些ajax程序中而不知道我刚才上一步到了哪里……）

• 发明了新的UI习惯（Inventing new UI conventions）

  （呵呵，作者用了一句话来描述这个缺点：“点击一个不明显的东东来产生一个不明显的结果”。这个归纳倒是满准确的，在很多ajax程序中，用户完全是作为一个瞎子，在抖抖索索的摸着这个ajax程序大象，在到处瞎点一气并瞎拖一气之后才掌握这个程序的用法。但是换个角度来说，最开始的web页面不也是一样？没有开始的困难接触，不会有之后的进步，只要有足够的帮助，上手任何东西都应该不会太难－－除非这东西本来就不想让人觉得好用，那就是其它的问题了）

• 阻止了爬虫（Blocking Spidering）

  （同意这点，我在犹豫着使用ajax的时候，就在考虑爬虫对js的不感冒，以及爬虫该如何理解我那些以奇怪方式加载的页面，去解析ajax库似乎是一个不可能的事情，爬虫又不是人脑，如果爬虫可以媲美人脑，那就是《骇客帝国4》了）

• 字符集（Character Sets）

  （ajax本身对字符集的支持比较缺失，这个这个……设置成utf-8吧，不过作者最后也是这么说的）

• 使用超链接改变状态（Changing state with links (GET requests)）

  （作者认为主流的ajax应用程序都是用get方式来工作，而这违反了W3对GET和POST方法的使用建议……我少见多怪，主流的ajax应用程序我没怎么去看，不知道是不是真的都用get，虽然ajax编码用get简单，但不表示ajax不能用post吧？）

• 没有连带改变页面中其它相关部分（Not cascading local changes to other parts of the page）

  （因为ajax让人很容易控制页面中的特定部分，所以也容易导致过于关注某个点而失去对整体布局的关注。嗯嗯……这是编码的问题，表怪到ajax头上）

• 问题报告（Problem reporting）

  （作者认为服务端的程序错误，很容易再现并捕捉，而客户端的错误要重现就比较麻烦，嗯，支持这点，不过还是和ajax关系不大……）

• 投资回报(Return on Investment)

  （作者认为ajax能够提升应用程序的可用性，但是富客户端程序并不会比纯html版本好多少……忽略这个观点，来人，把作者拖出去，账责五十）

• 拙劣地模仿浏览器页面跳转行为（Mimicing browser page navigation behavior imperfectly）

  （……忽略，没看到作者所描述的情况）

条件编译概述

在IE中，有一个鲜为人知的功能叫做条件编译。自从IE4开始支持这个功能，它由于在一些Ajax相关的javascript脚本中出现而受到一些关注。条件编译作为一种独立形式的对象判断，使得IE可以根据预定义或用户定义的条件来决定你的jscript或javascript代码特定部分是否编译。也可以把它看成是你的代码的条件注释,使你的代码能够在非IE浏览上也顺利运行。

语法概述

通过在你的脚本中使用@cc_on来激活条件编译，或者直接使用@if或者@set等等作为CC逻辑中一部分的句子来激活它。这里是一个示范例子：

<script type="text/javascript">
 
/*@cc_on
document.write("JScript 版本: " + @_jscript_version + ".<br>");
   /*@if (@_jscript_version >= 5)
      document.write("JScript 版本 5.0+.<br \/>");
      document.write("只有当浏览器支持JScript5+的时候你才能看到这些文字.<br>");
   @else @*/
      document.write("当你使用其他浏览器(比如: Firefox, IE 4.x 之类)的时候看到这行文字<br>");
   /*@end
@*/
 
</script>

例子:

如果你使用IE（任何版本），你应该能够看到第一个document.write()的输出，如果是IE5+,接下来的两个document.write()你也能够看见（因为从IE5开始支持JScript 5）。最后一个document.write()方法是为了其他非IE5+浏览器服务的，无论是Firefox，opera，IE4,或者什么别的。条件编译依赖于类似在条件注释中使用的注释标签，以确保它在所有浏览器中都能工作顺畅。

当使用条件编译的时候，最好先通过@cc_on语句来激活它，只有这样你才能在你的脚本中包含注释标签以保证浏览器兼容，、就好像上面例子中所显示的那样。(子乌注：这句英文我翻译的不是很顺...看起来似乎与上面的句子矛盾)

@if, @elif, @else,@end 语句

在这个奇怪的开场白之后，这里是一些用于条件便于的条件语句：

• @if
• @elif
• @else
• @end

现在让我们看一些“古怪”的例子。

if else 逻辑 (排除IE外的浏览器)

/*@cc_on
   @if (@_win32)
      document.write("操作系统是32位windows。浏览器是IE。");
   @else
      document.write("操作系统不是32位windows。浏览器是IE。");
   @end
@*/

这是一段完整的脚本，只被ie浏览器所识别并忽略其他所有浏览器，这段脚本在不同的操作系统上将显示不同的内容。对比一下下面这个例子……

if else 逻辑2 (包含其他浏览器)

/*@cc_on
   /*@if (@_win32)
      document.write("操作系统是32位windows。浏览器是IE。");
   @else @*/
      document.write("浏览器不是IE (如: Firefox)或者浏览器不是在32位windows下的IE。");
   /*@end
@*/

熟练使用注释标签，这个例子中的else部分能够包含所有的非ie浏览器（如firefox），以及非32位windows下的IE。努力的研究这段注释，直到你脑袋发昏，你就会明白这个逻辑了:)

if, elseif, else逻辑 (排除IE外的浏览器)

继续吧，可以看全部内容了：

/*@cc_on
   @if (@_jscript_version >= 5)
      document.write("IE Browser that supports JScript 5+");
   @elif (@_jscript_version >= 4)
      document.write("IE Browser that supports JScript 4+");
   @else
      document.write("Very old IE Browser");
   @end
@*/

if, elseif, else 逻辑2(包含其他浏览器)

/*@cc_on
   /*@if (@_jscript_version >= 5)
      document.write("IE Browser that supports JScript 5+");
   @elif (@_jscript_version >= 4)
      document.write("IE Browser that supports JScript 4+");
   @else @*/
      document.write("Non IE Browser (one that doesn't support JScript)");
   /*@end
@*/

全面的处理。在这最后一个例子中，最后一个else语句包含了所有非IE浏览器。

条件编译变量

在之前一部分中你看到了一些奇怪变量比如@_win32。这是一些你能够用来判断IE或计算机大致描述的预定义条件编译变量：

在大多数情况下，你也许只需要使用@_win和@jscript_build:

/*@cc_on
   @if (@_win32)
      document.write("OS is 32-bit. Browser is IE.");
   @else
      document.write("OS is NOT 32-bit. Browser is IE.");
   @end
@*/

用户自定义变量

你也可以在条件编译块中定义你自己的变量，语法如下：

@set @varname = term

在条件编译中，数字与布尔类型的变量可以使用，但字符型无法使用。比如：

@set @myvar1 = 35
@set @myvar3 = @_jscript_version

在条件编译逻辑中能够使用标准的运算符：

• ! ~
• * / %
• + -
• << >> >>>
• < <= > >=
• == != === !==
• & ^ |
• && |

你能够通过判断是否返回NaN来确定是否定义了一个用户自定义变量:

@if (@newVar != @newVar)
//该变量未定义

由于NaN是唯一一个不等于其自身的值，所以这段脚本能够正常运行。

条件编译示例－－try catch语句

在教程的开始，我曾经提及条件编译如何由于在一些Ajax的JavaScript中的出现而显示出它值得自夸的一面。现在我要告诉你我所指的内容。一个Ajax脚本通常包含一个中心函数用于判断浏览器（ie、ff等）对产生异步请求对象的支持:

典型的ajax函数:

function HttpRequest(url, parameters){
var pageRequest = false //variable to hold ajax object
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      pageRequest = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      } 
      catch (e){
         try{
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e){}
      }
   }
   else
   return false
}

许多人认为try/catch语句能够顺利的测试Ajax支持，很不幸，这不是真的。那些不支持throw/catch的浏览器，比如IE 4.x，实际上会阻塞上面这段代码并返回一个错误。为了克服这个问题，条件编译能够用来粗行减一个真正跨浏览器的友好的Ajax处理函数:

真正的跨浏览器函数:

function HttpRequest(url, parameters){
var pageRequest = false //variable to hold ajax object
/*@cc_on
   @if (@_jscript_version >= 5)
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
         try {
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e2){
         pageRequest = false
         }
      }
   @end
@*/
 
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()
}

使用条件编译，完整的try/catch块只用于IE5+, 其余的浏览器，比如IE4或非IE浏览器则试着破译它(dicipher it...这个dicipher是什么？“破译”这个解释是google到的,个人感觉翻译成“忽略”似乎更好？)。明显的Firefox会继续并使用XMLHttpRequest代替。现在你就得到了它－－一个真正跨浏览器的ajax函数！（子乌注：在我翻译的另外一篇文章中，可以看到这个函数更全面的写法。）

　　在这个关于AJAX系列的第三部分中，我们将学习如何使用AJAX与服务端进行写作以及这些技术如何产生强大的web应用程序。如果你对学习如何构建类似GMail或者Google Maps的web程序感兴趣的话，这是一篇基础的入门（虽然那两个东东会比我们在这篇文章中提及的内容复杂的多）。在这篇文章中，我使用PHP作为服务端语言，但AJAX能够和任何服务端语言进行很好的兼容，所以你尽可以选择你所钟爱的任何语言！

　　我们还是从我们上一篇文章的代码开始我们的学习，你可以去阅读它来作为参考。

　　这里就是这个HTML页面（带js）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn" dir="ltr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <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('users')[0].childNodes;
   var dataArrayLen = dataArray.length;
   var insertData = '
<table>
<tr>
<th>'
    + 'Pets</th>
<th>Tasks</th>
</tr>
 
';
   for (var i=0; i<dataArrayLen; i++){
     if(dataArray[i].tagName){
        insertData += '
<tr>
<td>' + dataArray[i].tagName + '</td>
 
'
                   +  '
<td>' + dataArray[i].getAttribute('tasks') + '</td>
</tr>
 
';
     }
   }
   insertData += '</table>
 
';
   document.getElementById ('dataArea').innerHTML = insertData;
  }
  //--></script>
<style type="text/css"><!--
  table, tr, th, td {
   border: solid 1px #000;
   border-collapse: collapse;
   padding: 5px;
  }
  --></style>
 
 </head>
 <body>
<h1>使用Ajax开发web应用程序</h1>
 
这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。
 
这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
  <a href="#" onclick="ajaxRead('data_3.php'); return false">查看演示</a>.
<div id="dataArea"></div>
 
 </body>
</html>

(sheneyan注：见示例)

　　注意：这里唯一的变化就是我们将我们的ajaxRead()中的“data_2.xml”改成了“data_3.php”。这是因为我们将使用php来输出XML（如果你在你的浏览器里打开这个PHP文件，它会以一个XML文件的形式展现出来－－我们只是要在这个文件中进行操作而不只是一个简单的XML）。这个PHP文件的输出类似：

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

(Sheneyan注：示例就不提供了，参考底下说明即可。)

　　这只是输出结果，我们准备从一个mysql数据库中获取这些信息。从现在起，我们可以直接在我们的数据库中修改数据而不是手动修改XML文件。用AJAX通过PHP来取得数据，并将它获取到一个页面上－－所有这些，仍然不需要重新加载网页。

　　第一步是连接到mysql去获取数据。这篇文章的重点在javascript，所以我不会解释下面的代码如何工作，你需要自己去了解如何连接mysql数据库。

<?php
 $user = "admin";
 $pass = "adminpass";
 $host = "localhost";
 $conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
 $db   = mysql_select_db("pets",$conn) or die("Could not select the database.");
 mysql_close($db);
?>

　　只要你连接了数据库，你可以通过底下的查询来获取信息：

<?php
 $user = "admin";
 $pass = "adminpass";
 $host = "localhost";
 $conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
 $db   = mysql_select_db("pets",$conn) or die("Could not select the database.");
 $result = mysql_query("SELECT * FROM `pets`");
  if(mysql_num_rows ($result) == 0){
     die ('Error: no data found in the database.');
  }
  while ($row = mysql_fetch_assoc($result)){
     echo 'Pet: '.$row['pet'].', tasks: '.$row['tasks'].'. ';
  }
 
 mysql_close($db);
?>

　　这段代码给了你需要的信息，但它输出并不正确。我们需要修改这PHP代码来分隔数据为XML，而不是纯文本。为了实现这个目标我们得作几个修改。

<?php
 header('Content-Type: text/xml');
 echo '<?xml version="1.0" encoding="UTF-8"?>';
 echo "\n<data>\n
<pets>\n";
 $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";
  }
  echo "</pets>\n</data>";
 mysql_close($db);
?>

　　让我们从上面开始，一次一行的来分析它是如何输出XML的.

行2:　　这部分代码发送一个http头来让用户客户端明白这个php文件输出的是一个XML。这就是为什么你在你的浏览器里看这个文档的时候它以一个XML文件的形式展现，即使你的文件有一个“.php”后缀。

行3:　　这部分的代码输出了XML声明。这是我之前展示给你看的XML的第一行。

行4:　　这部分的代码输出的最开始的两个标签：我们的根标签，和我们用来放置所有宠物的 标签。

行15:　　这部分的代码最困难的。这里包含了一个循环用来遍历你数据库里所有的数据。每次循环，它会输出一个新的节点，这个节点用每一种动物作为标签名以及一个"任务"属性。例如，如果你数据库中的第一只宠物是“猫”而且它相应的任务字段是“喂食, 饮水, 抓跳蚤”，那php将输出在XML文档中输出 <猫 tasks="喂食, 饮水, 抓跳蚤" /> 。这个“\n” 部分只是在结尾插入一个新行，保证这个XML代码不至于都在同一行。

行17:　　这部分的代码结束了 我们开始时打开的 和 节点。因为XML必须是格式良好的（well-formed），所以我们必须认真对待这部分以确认我们的程序能够正确运行。

　　现在我们已经让PHP输出XML了，我们现在所要作的就是登录我们的mysql数据库，并进行我们所需要的修改，来更新这个XML。很酷，不是吗？我们仍然能够使用上一篇文章中的js脚本来获取代码，因为XML输出和之前的完全一样。

结论

　　你可以再进一步的扩展，使用XML来保存和获取数据。换句话说，你能够使用php来写你的XML文件，然后让javascript来读。用ajax，你也能够定时的检查xml文件是否已经更改而且，如果XML已经更新，也可以更新本页面。

关于作者

　　Jonathan Fenocchi是一个网络开发者，主攻web设计，客户端脚本，php脚本。他的网站位于：http://www.slightlyremarkable.com

　　在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断（取决于它们是如何被标识的）。

　　这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章。

开始～

　　让我们开始我们的第一步：构造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编码），一个根元素（）将下面所有的元素组合在一起，一个 元素组织了所有的宠物，然后一个 节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在 元素中设置了文本节点：猫，狗，鱼。

<!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>
 
这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。
 
这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
<a href="#" onclick="ajaxRead('data_2.xml'); return false">查看演示</a>.
<div id="dataArea"></div>
 
  </body>
</html>

（Sheneyan注：完整代码示例见example_2.html，XML文件见data_2.xml）

　　你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个DIV（这次这个东东叫做dataArea）。这个ajaxRead()函数和上次很接近，除了一点不同：onreadystatechange函数。让我们先看一下这个函数：

xmlObj.onreadystatechange = function(){
      if(xmlObj.readyState == 4){
          processXML(xmlObj.responseXML);
     }
}

　　我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。这个函数将得到XML文档本身（也就是被ajaxRead函数取回的）并处理它。（这XML文档本身我指的是参数xmlObj.responseXML）

　　现在让我们分析一下这个函数processXML。下面是它的代码：

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;
}

　　首先，我们定义了一些变量。dataArray作为所有 节点的数组（不是节点数据，只是节点）。dataArrayLen是这个数组的长度，用于我们的循环。insertData则是一个表格的开头的HTML。

　　我们的第二步则是遍历所有的 元素（通过变量dataArray）并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个 元素的文本包含进这个表格数据节点，并将这些都添加进变量insertData。因此，每循环一次，变量insertData将添加一行包含三个宠物中之一名称的新数据。

　　新数据行添加完后，我们插入一个

结束标签到变量insertData。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感谢innerHTML属性，这很简单。我们通过函数document.getElementById()取得DIVdataArea并将变量insertData中的HTML插进去。嗯，这个表格冒出来了！

我们继续之前……

　　我得指出两点：

　　首先，你会注意到我们并没有使用节点 。这事因为我们只有一个数据组（ ）以及后来所有的元素（每一个 元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素 放进 元素还是比较好，而不是让这些 元素自己散放（但仍然在data元素里面）。

　　另外一种方式是给每一个宠物放一个指定的标签，比如：

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

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

	function processXML(obj){
      var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
      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++){
       if(dataArray[i].tagName){
          insertData += '
<tr>
<td>' + dataArray[i].tagName + '</td>
</tr>
 
';
       }
    }
    insertData += '</table>
 
';
    document.getElementById ('dataArea').innerHTML = insertData;
  }

（Sheneyan注：修改后的示例见：example_2_1.html，XML文件见：data_2_1.xml）

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

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

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

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

    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注：修改后的示例见：example_2_2.html，XML文件见：data_2_2.xml）

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

继续...

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

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

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

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

  table, tr, th, td {
    border: solid 1px #000;
    border-collapse: collapse;
    padding: 5px;
 }

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

  function processXML(obj){
    var dataArray = obj.getElementsByTagName('pet');
    var dataArrayLen = dataArray.length;
    var subAry, subAryLen;
    var insertData = '
<table>
<tr>
<th>'
      + 'Pets</th>
<th>Tasks</th>
</tr>
 
';
    for (var i=0; i<dataArrayLen; i++){
          insertData += '
<tr>
<td>' + dataArray[i].firstChild.data + '</td>
 
';
          subAry = dataArray[i].getElementsByTagName('task');
          subAryLen = subAry.length;
          insertData += '
<td>';
            for(var j=0; j<subAryLen; j++){
              insertData += subAry[j].firstChild.data;
              if( subAryLen != j+1 ) { insertData += ', '; }
            }
        insertData += '</td>
</tr>
 
';
  }
  insertData += '</table>
 
';
  document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：example_2_3.html，XML文件见：data_2_3.xml）

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

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

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

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

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

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

有其他方法吗？

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

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

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

  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注：修改后的示例见：example_2_4.html，XML文件见：data_2_4.xml）

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

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

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

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

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

（Sheneyan注：修改后的示例见：example_2_5.html，XML文件见：data_2_5.xml）

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

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

结束语

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

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

关于作者

　　Jonathan Fenocchi是一个网络开发者，主攻web设计，客户端脚本，php脚本。他的网站位于：http://www.slightlyremarkable.com

　　在过去，由于为了获得新数据而不得不重新加载web页面（或者加载其他页面）导致web应用程序发展被限制。虽然有其他方法可用（不加载其他页面），但是这些技术都没有被很好地支持而且有bug成灾的趋向。在过去的几个月里，一个过去并不被广泛支持的技术已经被越来越多的web冲浪者（web surfers??是指浏览器还是浏览者？）所接受，它给了开发者更多的自由开发先进的web应用程序。这些通过javascript来异步取得xml数据的应用程序，被亲切的称为Ajax应用程序。在这篇文章中，我将会解释如何通过Ajax来取回一个远程的XML文件并更新一个web page，并且随着这个系列的继续，我将讨论更多的方法，使用ajax技术将你的web应用程序提升到一个新的层次。

　　这第一步就是创建一个带一些数据的XML文件。我们将这个文件命名为data.xml。它是一个简单的XML文件，而在一个真实的程序中，它会复杂许多，但对于我们的例子来说，简单明了是最合适地。

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <data>
    这是一些示例数据，它被保存在一个XML文件中，并被JavaScript取回。
  </data>
</root>

　　现在让我们创建一个简单的web页面包含一些示例数据。这个页面将是我们的js脚本所在，并且这个页面将会让用户们访问柄看到Ajax脚本的运行。我们把它命名为ajax.html

<!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=utf-8"> 
  <title>使用ajax开发web应用程序 - 示例</title> 
 </head> 
 <body> 
  <h1>使用ajax开发web应用程序</h1> 
  <p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的 
	内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p> 
  <p id="xmlObj"> 
  这是一些示例数据，它是这个网页的默认数据 <a href="data.xml" 
  title="查看这个XML数据."  
	onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML数据.</a> 
  </p> 
 </body> 
</html>

注意，对于那些没有javascript的用户，我们直接链接到data.xml文件。对于那些允许运行javascript的用户，函数ajaxRead将被运行，这个链接被隐藏，并不会被转向到那个data.xml文件。函数ajaxRead现在还没定义。所以如果你要检验上面的示例代码，你会得到一个javascript错误。让我们继续并定义这个函数（还有其他的），让你能够看到ajax是如何工作的，下面的脚本要放到你的head标签里：

<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){
       updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
     }
    }
    xmlObj.open ('GET', file, true);
    xmlObj.send ('');
  }
  function updateObj(obj, data){
   document.getElementById(obj).firstChild.data = data;
  }
  //-->
 </script>

（Sheneyan注：完整代码示例见example.html，XML文件见：data.xml）

　　这堆代码有点多，让我们一点点的进行。第一个函数叫做ajaxRead－也就是我们在页面的查看XML数据链接中调用的函数，我们定义了一个xmlObj变量－这将作为客户端（用户正在查看的这个web页面）以及服务端（web站点本身）之间的中间件。我们在一个if/else块中定义这个对象：

if(window.XMLHttpRequest){
   xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
   xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
   return;
}

　　这只是一个对不同对象是否可用的测试－某些浏览器实现了不同的XMLHttpRequest对象，所以当我们定义xmlObj作为我们的XMLHttpRequest对象时，我们不得不根据浏览器所实现的来定义它。如果没有可用的XMLHttpRequest对象，我们将执行return语句结束这个函数以避免脚本错误。在大部分情况下，这个检验将返回一个XMLHttpRequest对象－这部分代码应该能够在绝大部分的浏览器上工作，除了少部分比较老的浏览器的异常情况（它能够工作在ie5.01上，但是在netscape4上会使函数终止）。

　　接下来是这些代码块:

xmlObj.onreadystatechange = function(){
  if(xmlObj.readyState == 4){
      updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
  }
}

　　每次XMLHttpRequest的状态发生变化，事件onreadystatechange就会被触发。通过使用xmlObj.onreadystatechange = function(){...}我们能够创建一个函数并让它在这个XMLHttpRequest对象的状态每次发生改变的时候立刻运行。这里总共有五个状态，由0走到4。

0. 尚未初始化（在这个XMLHttpRequest开始前）
1. 加载（XMLHttpRequest初始化一结束）
2. 加载结束（XMLHttpRequest一从服务器上获得一个回应）
3. 交互（当XMLHttpRequest对象和服务器连接中）
4. 结束（当XMLHttpRequest被告知它已经完成了所有人物并结束运行）

　　这第五个状态（数字4）就是我们能够确定数据已经可用的标志，所以我们检验这个xmlObj.readyState是否等于4来确定数据是否可用，如果是4，我们运行updateObj函数。这个函数带两个参数：一个当前web页面的元素ID（当前web页面中要更新的元素）以及用于填充这个元素的数据。这个函数的运行方式在稍后将更详细地解释。

　　我们的web页面的p元素有一个idxmlData，这就是我们准备更新的段落。我们正在取得的数据来自于XML文件，但它有点复杂。这里是它如何工作的原理。

　　xmlObj.responseXML属性是一个DOM对象 － 它很象document对象，除了它来自远程的XML文件。换句话说，如果你在data.xml中运行脚本，那xmlObj.responseXML就是一个document对象。因为我们知道这些，我们能够通过getElementsByTagName方法取得任何XML节点。数据包含在一个命名为<data>的XML节点中，所以我们的任务很简单：取得第一个（而且只有这一个）数据节点。因而，xmlObject.responseXML.getElementsByTagName("data")[0]返回XML文件中的第一个<data>节点。

注意：它返回的是XML节点，而不是节点中的数据－这个数据必须通过访问XML节点的属性取得，这就是下一步要说的。

　　接下来，取得数据只需要简单的指定firstChild.data（firstChild指向了那个被<data>节点包含的文本节点，而这个data属性则是这个文本节点的实际文本）。