掌握AJAX之AJAX通讯技术简介(2)_H5之家 - 中国HTML5教程资源分享第一站

function displayCustomerInfo(sText) {
　var divCustomerInfo = document.getElementById("divCustomerInfo");
　divCustomerInfo.innerHTML = sText;
}

　　在这个函数中，第一行代码将查询对用于数据显示的＜div/＞元素的引用。第二行代码将把包含客户信息的字符串（sText）的值赋给＜div/＞元素的innerHTML属性。使用innerHTML属性，可以将HTML嵌入到格式化的字符串中。这将由主显示页面的代码来完成。现在我们将创建服务器端程序逻辑。

　　getcustomerdata.php中的基本代码是在基本的HTML页面上添加两处PHP代码：

＜html＞
＜head＞
＜title＞Get Customer Data＜/title＞
＜?php
//php代码
?＞
＜/head＞
＜body＞
＜div＞＜?php echo $sInfo ?＞＜/div＞
＜/body＞
＜/html＞

　　在该页面中，第一个PHP代码块将包括查询客户数据的逻辑（很快将讨论到）。而第二个PHP代码块则负责将包含客户数据的$sInfo变量的值输出到＜div/＞元素中。从这个＜div/＞元素中，你可以读取该数据并将数据传送给显示帧。为此，需要创建在页面完全载入后调用的JavaScript函数。

window.onload = function () {
　var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};

　　该函数将直接赋给window.onload事件处理函数中。它首先获取对包含客户信息的＜div/＞元素的引用，然后使用数组top.frames访问显示帧，并调用前面定义的display CustomerInfo()函数，将其传给＜div/＞元素的innerHTML属性。这就是所有与发送该信息相关的JavaScript。但首先如何获取这些信息呢？需要一些PHP代码来从数据库查询信息。

　　在PHP代码中的第一步是定义所有需要的数据块。在本例中，这些数据块包括用来查询的客户ID、返回信息的$sInfo变量，以及访问数据库所需要的信息（数据库服务器、数据库名、用户名、密码以及SQL查询字符串）：

　　这段代码首先从查询字符串中获取id参数。为了便于获取，PHP将所有的查询字符串参数组织于$-GET数组中。这个id存储在$sID中，它将用来创建存储于$sQuery中的SQL查询字符串。在此还将创建$sInfo变量，并将其设置为空字符串。在这段代码中的所有其他变量，都包含了指定特定数据库配置的信息，根据你自己的实现环境将其替换为正确的值。

　　获取了用户的输入，做好了连接数据库的基本准备，下一步就是创建数据库连接，执行查询，返回结果。如果存在一个指定ID的客户，$sInfo将填入包含所有数据的HTML字符串，包括对电子邮件地址创建一个链接，如果客户ID是无效的，那么$sInfo将填入错误消息，以传给显示帧：

＜?php
　$sID = $_GET["id"];
　$sInfo = "";
　$sDBServer = "your.databaser.server";
　$sDBName = "your_db_name";
　$sDBUsername = "your_db_username";
　$sDBPassword = "your_db_password";
　$sQuery = "Select * from Customers where CustomerId=".$sID;
　$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
　@mysql_select_db($sDBName) or $sInfo="Unable to open database";

　if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) ＞ 0) {
　　$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
　　$sInfo = $aValues['Name']."＜br /＞".$aValues['Address']."＜br /＞".
$aValues['City']."＜br /＞".$aValues['State']."＜br /＞".
$aValues['Zip']."＜br /＞＜br /＞Phone: ".$aValues['Phone']."＜br /＞".
"＜a href=\"mailto:".$aValues['E-mail']."\"＞".
$aValues['E-mail']."＜/a＞";
　} else {
　　$sInfo = "Customer with ID $sID doesn't exist.";
　}
　mysql_close($oLink);
?＞

　　突出显示的头两行代码用来完成从PHP到MySQL数据库的连接。紧接着，调用mysql_ query()函数来执行SQL查询。如果函数返回结果，并且该结果至少包括一行，那么程序将获取该信息，并将其存入变量$sInfo中；否则，$sInfo将填入一个错误消息。最后两行则负责释放数据库连接。

　　关于更复杂的PHP和MySQL编程的阐述已超出了本文讨论的范围。

　　现在当$sInfo输出到＜div/＞元素时，它将包含正确的信息。onload事件处理函数将读取这些数据，然后将其发送到显示帧上。如果查询到客户，其相应的信息将会显示出来，如图2-2所示。

　　另一方面，如果客户不存在，则会在屏幕的相同位置显示错误消息。无论如何，客户服务代表都将获得一个很好的用户体验。你的第一个Ajax程序也就完成了。

图 2-2

（作者：蒋涛责任编辑：方舟）

欢迎在新浪微博上关注我们