快速进入Ajax开发的实例解说(1)

在这篇文章里，你将建立一个简单的AJAX(Asynchronous JavaScript and XML，异步JavaScript和XML)。这个练习适合于大多数没有耐心从ASAP开始编码的读者，但是假定你已经熟悉JavaScript，PHP和XML。

你将创建一个名为quickstart简单的AJAX Web应用。在这个应用中，用户要填写他/她的名字，同时在用户填写的过程中服务器及时返回响应。图1显示了用户装载的初始界面，index.html(注意当请求quickstart Web文件夹时，index.html被默认装载，即使文件名没有被显示得提及)。

图1

当用户在输入的时候，以一定的间隔异步联系服务器以检查它此时能否识别。服务器自动地被呼叫，大概一秒钟一次。这就说明了我们不需要在输入完后点击按钮(如Send按钮)来进行验证(这种方法或许不适合实际的登入机制，但是确实能很好地展示AJAX的一些功能)。

根据不同的输入名字，服务器返回的信息会不同，参见图2中的例子。

图2

大概看第一眼的时候觉得没有什么特别之处。我们刻意把第一个例子写的简单，使得它易于理解。这个应用的特别之处就是自动显示来自服务器的消息而不需要打断用户的动作(消息在用户输入名字的同时被显示)。显示这些数据不需要页面重新装载，即使一个服务器连接被建立以获得这些数据。使用非AJAX Web开发技术完成这并不是一个简单的任务。

这个应用包含下面三个文件：

• 1. index.html是用户请求的初始HTML文件
• 2. quickstart.js是包含了JavaScript代码的文件，随着index.html在客户端的装载而装载。当需要服务器端的功能时，这个文件就处理向服务器发送异步请求
• 3. quickstart.php是驻留在服务器上的PHP脚本，处理来自客户端quickstart.js文件里JavaScript代码的请求。

图3 显示了运行该应用时发生的动作：

图3

1到5步是典型的HTTP请求。在做出这个请求后，用户需要等待直到页面被装载。通过使用XMLHttpRequest对象服务器在后台被访问。在这段时间内，用户可以继续正常使用这个页面，就像它是一个桌面程序。从服务器重新获得数据和用这些数据更新页面不需要刷新和重载。

现在是时候在你自己的机子上实现这个代码了。在开始之前，确定你已经像附录A中显示的那样准备好工作环境。附录A中指导你如何安装、设置PHP和Apache，以及如何安装本书中例子用到的数据库(在这个quickstart例子中你不需要数据库)。

开始行动――Quickstart AJAX

在附录A中，指导你建立一个Web服务器并创建一个名为ajax的Web文件夹。在这个文件夹里存放了这本书的代码。

1. 在ajax目录下创建一个名为quickstart的子目录。

2. 在quickstart目录下，创建一个名为index.html的文件，在文件中添加如下代码：