节选：快速进入AJAX开发

图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例子中你不需要数据库）。[编注：附录A不包含在本篇文章中。]

1. 在附录A中，指导你建立一个Web服务器并创建一个名为ajax的Web文件夹。在这个文件夹里存放了这本书的代码。
1.        在ajax目录下创建一个名为quickstart的子目录。
2.        在quickstart目录下，创建一个名为index.html的文件，在文件中添加如下代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
   head
      titleAJAX with PHP: Quickstart/title
      script type="text/javascr
;  // make the server request
      xmlHttp.send(null);
   }
   else
      // if the connection is busy, try again after one second
      setTimeout('process()', 1000);
}


// executed automatically when a message is received from the server
function handleServerResponse()
{
   // move forward only if the transaction has completed
   if (xmlHttp.readyState == 4)
   {
      // status of 200 indicates the transaction completed successfully
      if (xmlHttp.status == 200)
      {
         // extract the XML retrieved from the server
         xmlResponse = xmlHttp.responseXML;
         // obtain the document element (the root element) of the XML structure
         xmlDocumentElement = xmlResponse.documentElement;
         // get the text message, which is in the first child of
         // the the document element
         helloMessage = xmlDocumentElement.firstChild.data;
         // update the client display using the data received from the server
 document.getElementById("divMessage").innerHTML ='i' + helloMessage + '/i';
         // restart sequence
         setTimeout('process()', 1000);
      }
      // a HTTP status different than 200 signals an error
      else
      {
         alert("There was a problem accessing the server: " + xmlHttp.statusText);
      }
   }
}

？php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '？xml version="1.0" encoding="UTF-8" standalone="yes"？';
// create the response element
echo 'response';
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('CRISTIAN', 'BOGDAN', 'FILIP', 'MIHAI', 'YODA');
if (in_array(strtoupper($name), $userNames))
   echo 'Hello, master ' . htmlentities($name) . '!';
else if (trim($name) == '')
   echo 'Stranger, p
器端。当把这个信息回传给客户端时，我们使用了PHP里的函数htmlentities来取代HTML代码里的特殊字符（如&,），以确保在浏览器里能够安全地显示这些信息，消除潜在的问题和安全风险。


    在服务器端为客户端格式化信息（而不是直接在客户端来做）在编写商业代码时实际上是个不好的做法。一般来讲，服务器的职责就是以普通的格式发送数据，而由接受端来处理安全和格式化事务。如果你想某一天你要往数据库中插入完全相同的信息，但是数据库需要不同的格式化的序列（在这种情况下，应该由数据库来格式化数据而不是服务器），这样似乎更有意义。对于quickstart，在PHP中格式化HTML可以使得我们保持代码简短，易于理解和解释。

    如果你好奇，想测试quickstart.php看看它产生了什么，你可以在你的浏览器里装载http://localhost/ajax/quickstart/quickstart.php？name=Yoda。在客户端通过GET传递参数的好处是在你的浏览器它可以简单地产生个类似的请求，因为GET只是意味着你在URL查询字符串中附加了name/value这么一对参数。你将得到类似下面的东西：

这个XML消息在客户端通过quickstart.js的handleServerResponse()方法处理。更明确地说，是下面几行代码提取了“Hello,master Yoda”消息：
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the document element
helloMessage = xmlDocumentElement.firstChild.data; 


    这里xmlHttp是XMLHttpRequest的对象，用来在客户端调用服务器上的quickstart.php脚本文件。它的responseXML属性处理得到的XML文档。XML的结构天然就是层次的。XML文件的根元素被称为文档元素。在我们这个例子中，文档元素是response元素，它只包含了一个子元素，就是我们感兴趣的文本信息。一旦获取了这个文本信息，那么它将被显示在客户页面上，即通过DOM（Document Object Model）来访问index.html里的divMessage元素实现：

// update the client display using the data received from the server
document.getElementById('divMessage').innerHTML = helloMessage; 

document是JavaScript里的默认对象，允许你对页面的HTML代码里的元素进行操作。
quickstart.js里的其他代码用来向服务器产生请求以或得XML消息。createXmlHttpRequestObject()方法创建并返回XMLHttpRequest对象。这个方法要比它本来的要长些，这是因为我们要保持它对各个浏览器兼容。XMLHttpRequest的实例，即xmlHttp在process()方法里被使用以向产生服务器产生异步请求：

// make asynchronous HTTP request using the XMLHttpRequest object
function process()
{
   // proceed only if the xmlHttp object isn't busy
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
   {
      // retrieve the name typed by the user on the form
      name = encodeURIComponent(document.getElementById("myName").value);
      // execute the quickstart.php page from the server
      xmlHttp.open("GET", "quickstart.php？name=" + name, true);
      // define the method to handle server responses
      xmlHttp.onreadystatechange = handleServerResponse;
      // make the server request
      xmlHttp.send(null);
   }
   else
      // if the connection is busy, try again after one second
      setTimeout('process()', 1000);
} 


 
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
 
你在这里看到的实际
ates the transaction completed successfully
      if (xmlHttp.status == 200)
      {

     // restart sequence
      setTimeout('process()', 1000);