下载本文示例代码
当在网上冲浪时，将在浏览器和服务器之间存在大量的请求。最初，所有的这种请求都是在用户做出需要这一步骤的明显操作时发生的。Ajax技术将开发人员从等待用户做出这样的操作中解放出来，允许他在任何时间创建一个对服务器的调用。 Ajax通信支持许多不同的技术。每一种技术都有自己的优点和缺点，因此了解什么情况使用哪一种技术是很重要的。 隐藏帧技术 随着HTML帧的引入，隐藏帧（hidden frame）技术也应运而生了。该技术后面的基本想法是创建一个帧集，其中包含用于客户端—服务器通信的隐藏帧。可以通过将帧的宽度或高度设置为0像素来隐藏一个帧，以使其不显示。尽管一些早期的浏览器（诸如Netscape 4）不能够完全隐藏帧，经常会留下一些明显的帧边框，但该技术还是广泛地为开发人员所采用。 1. 模式 隐藏帧技术遵循一种特定的四步模式（参见图2-1）。第一步总是从一个与用户交互的Web页面中的可见帧开始的。显然，用户并不知道隐藏帧的存在（在现代浏览器中，它是不显示的），以通常的形式与网页进行交互。在某些时间，用户执行了一个需要从服务器获取额外数据的操作。当这个操作发生时，第一步就发生了：产生一个对隐藏帧的JavaScript函数调用。这个调用可以简单地将隐藏帧重定向到另一个页面，或者复杂地传送表单数据。不管这个函数有多复杂，其结果都是产生第2步：向服务器发送一个请求。图 2-1 该模式中的第3步是从服务器上接收一个响应。由于处理的是帧，因此该响应必然是另一个网页。该网页必须包含从服务器返回的所请求的数据，同时一些JavaScript将把这些数据传给可见的帧。通常，这是通过在返回的网页中分配一个onload事件处理函数（event handler）做到的，该网页在其全部载入之后调用可见帧中的函数（这就是第4步）。当数据位于可见帧中后，该帧就可以决定如何处理这些数据了。 2. 隐藏帧的GET请求 我们已经阐述了隐藏帧技术的基本原理，现在将更深入地研究它。对于任何一种新技术，最好的方法就是通过具体的实例来学习。在该实例中，将创建一个简单的查询页面，客户服务代表通过该页面可以查询客户的信息。由于这是本书的第一个例子，因此它十分的简单：用户输入客户ID，然后接收与该客户相关的信息。由于该功能通常需要数据库支持，因此还必须做一些服务器端的开发。该例子使用的是PHP——这是一种优秀的开源服务端语言，还将使用到MySQL（在从下载）——这是一种与PHP结合得很好的开源数据库。 尽管本例确定为使用MySQL，但只需少量的修改就可以在其他数据库上运行。 首先，在实现客户资料查询之前，你必须有一个包含该信息的数据库表。可以使用以下SQL脚本来创建一个客户表：
CREATE TABLE `Customers` ( `CustomerId` int(11) NOT NULL auto_increment, `Name` varchar(255) NOT NULL default '', `Address` varchar(255) NOT NULL default '', `City` varchar(255) NOT NULL default '', `State` varchar(255) NOT NULL default '', `Zip` varchar(255) NOT NULL default '', `Phone` varchar(255) NOT NULL default '', `E-mail` varchar(255) NOT NULL default '', PRIMARY KEY (`CustomerId`)) TYPE=MyISAM COMMENT='Sample Customer Data'; 在这张数据库表中最重要的字段是CustomerId，我们将通过它来查询客户信息。 你可以在下载这个脚本以及一些测试数据。 当建好数据库表后，就可以将精力转到HTML代码上了。要使用隐藏帧技术，首先必须创建一个HTML帧集，例如：
＜frameset rows="100%,0" frameborder="0"＞ ＜frame name="displayFrame" src="display.htm" noresize="noresize" /＞ ＜frame name="hiddenFrame" src="about:blank" noresize="noresize" /＞＜/frameset＞ 这部分代码中最重要的是＜frameset/＞元素的rows属性。通过将其设置为100%,0，浏览器就知道不显示名为hiddenFrame的第二个帧了。紧接着，将frameborder属性设置为0则是确保每个帧都没有可见的边框。在帧集声明中最后一个重要的步骤是为每个帧设置noresize属性，使得用户不可能在不经意间调整帧的大小而发现隐藏帧，隐藏帧的内容永远不会成为可显示的用户界面的一部分。 接下来要处理的是一个请求和显示客户信息的页面。这是一个相对简单的页面，由一个用来输入客户ID的文本框，一个执行请求的按钮，以及用来显示查询到的客户信息的＜div＞元素所组成：
＜p＞Enter customer ID number to retrieve information:＜/p＞＜p＞Customer ID: ＜input type="text" id="txtCustomerId" value="" /＞＜/p＞＜p＞＜input type="button" value="Get Customer Info"onclick="requestCustomerInfo()" /＞＜/p＞＜div id="divCustomerInfo"＞＜/div＞ 注意，按钮调用的是名为requestCustomerInfo()的函数，该函数将负责与隐藏帧交互以获取数据。它将获取文本框中的值，将其添加到getcustomerdata.php的查询字符串上，以getcustomerdata.php?id=23的格式创建一个URL。然后将这个URL指派给隐藏帧，以下就是这个函数的代码：
function requestCustomerInfo() { var sId = document.getElementById("txtCustomerId").value; top.frames["hiddenFrame"].location = "getcustomerdata.php?id=" sId;} 该函数的第一步是从文本框中获取客户标识号（"txtCustomerId"）。这是将文本框的ID txtCustomerId作为参数，调用document.getElementById()函数，并获取返回的value属性（value属性保存了文本框中的文本内容）来实现的。然后，将这个ID添加到字符串getcustomerdata.php?id=之后生成完整的URL。第二行代码则是创建此URL并将其赋给隐藏帧。为了获得对隐藏帧的引用，首先要使用top对象来获取浏览器的顶级窗口（topmost window）。该对象拥有一个frames数组，在其中可以找到这个隐藏帧。由于每个帧都是一个窗口对象，因此可以将其位置设置为预期的URL。 这是发出请求所需的所有信息。注意，由于这是一个GET请求（通过一个查询字符串传递信息），因此是很简单的。（很快，你将看到如何使用隐藏帧技术来执行一个POST请求。） 除了requestCustomerInfo()函数之外，还需要另一个在查询后显示客户信息的函数。当数据返回时，隐藏帧将调用这个displayCustomerInfo()函数，其唯一的参数是包含要显示的客户数据的字符串：
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 id="divInfoToReturn"＞＜?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查询字符串）：
＜?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; //更多代码?＞ 这段代码首先从查询字符串中获取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共4页。 1 2 3 4 :
当在网上冲浪时，将在浏览器和服务器之间存在大量的请求。最初，所有的这种请求都是在用户做出需要这一步骤的明显操作时发生的。Ajax技术将开发人员从等待用户做出这样的操作中解放出来，允许他在任何时间创建一个对服务器的调用。 Ajax通信支持许多不同的技术。每一种技术都有自己的优点和缺点，因此了解什么情况使用哪一种技术是很重要的。 隐藏帧技术 随着HTML帧的引入，隐藏帧（hidden frame）技术也应运而生了。该技术后面的基本想法是创建一个帧集，其中包含用于客户端—服务器通信的隐藏帧。可以通过将帧的宽度或高度设置为0像素来隐藏一个帧，以使其不显示。尽管一些早期的浏览器（诸如Netscape 4）不能够完全隐藏帧，经常会留下一些明显的帧边框，但该技术还是广泛地为开发人员所采用。 1. 模式 隐藏帧技术遵循一种特定的四步模式（参见图2-1）。第一步总是从一个与用户交互的Web页面中的可见帧开始的。显然，用户并不知道隐藏帧的存在（在现代浏览器中，它是不显示的），以通常的形式与网页进行交互。在某些时间，用户执行了一个需要从服务器获取额外数据的操作。当这个操作发生时，第一步就发生了：产生一个对隐藏帧的JavaScript函数调用。这个调用可以简单地将隐藏帧重定向到另一个页面，或者复杂地传送表单数据。不管这个函数有多复杂，其结果都是产生第2步：向服务器发送一个请求。图 2-1 该模式中的第3步是从服务器上接收一个响应。由于处理的是帧，因此该响应必然是另一个网页。该网页必须包含从服务器返回的所请求的数据，同时一些JavaScript将把这些数据传给可见的帧。通常，这是通过在返回的网页中分配一个onload事件处理函数（event handler）做到的，该网页在其全部载入之后调用可见帧中的函数（这就是第4步）。当数据位于可见帧中后，该帧就可以决定如何处理这些数据了。 2. 隐藏帧的GET请求 我们已经阐述了隐藏帧技术的基本原理，现在将更深入地研究它。对于任何一种新技术，最好的方法就是通过具体的实例来学习。在该实例中，将创建一个简单的查询页面，客户服务代表通过该页面可以查询客户的信息。由于这是本书的第一个例子，因此它十分的简单：用户输入客户ID，然后接收与该客户相关的信息。由于该功能通常需要数据库支持，因此还必须做一些服务器端的开发。该例子使用的是PHP——这是一种优秀的开源服务端语言，还将使用到MySQL（在从下载）——这是一种与PHP结合得很好的开源数据库。 尽管本例确定为使用MySQL，但只需少量的修改就可以在其他数据库上运行。 首先，在实现客户资料查询之前，你必须有一个包含该信息的数据库表。可以使用以下SQL脚本来创建一个客户表：
CREATE TABLE `Customers` ( `CustomerId` int(11) NOT NULL auto_increment, `Name` varchar(255) NOT NULL default '', `Address` varchar(255) NOT NULL default '', `City` varchar(255) NOT NULL default '', `State` varchar(255) NOT NULL default '', `Zip` varchar(255) NOT NULL default '', `Phone` varchar(255) NOT NULL default '', `E-mail` varchar(255) NOT NULL default '', PRIMARY KEY (`CustomerId`)) TYPE=MyISAM COMMENT='Sample Customer Data'; 在这张数据库表中最重要的字段是CustomerId，我们将通过它来查询客户信息。 你可以在下载这个脚本以及一些测试数据。 当建好数据库表后，就可以将精力转到HTML代码上了。要使用隐藏帧技术，首先必须创建一个HTML帧集，例如：
＜frameset rows="100%,0" frameborder="0"＞ ＜frame name="displayFrame" src="display.htm" noresize="noresize" /＞ ＜frame name="hiddenFrame" src="about:blank" noresize="noresize" /＞＜/frameset＞ 这部分代码中最重要的是＜frameset/＞元素的rows属性。通过将其设置为100%,0，浏览器就知道不显示名为hiddenFrame的第二个帧了。紧接着，将frameborder属性设置为0则是确保每个帧都没有可见的边框。在帧集声明中最后一个重要的步骤是为每个帧设置noresize属性，使得用户不可能在不经意间调整帧的大小而发现隐藏帧，隐藏帧的内容永远不会成为可显示的用户界面的一部分。 接下来要处理的是一个请求和显示客户信息的页面。这是一个相对简单的页面，由一个用来输入客户ID的文本框，一个执行请求的按钮，以及用来显示查询到的客户信息的＜div＞元素所组成：
＜p＞Enter customer ID number to retrieve information:＜/p＞＜p＞Customer ID: ＜input type="text" id="txtCustomerId" value="" /＞＜/p＞＜p＞＜input type="button" value="Get Customer Info"onclick="requestCustomerInfo()" /＞＜/p＞＜div id="divCustomerInfo"＞＜/div＞ 注意，按钮调用的是名为requestCustomerInfo()的函数，该函数将负责与隐藏帧交互以获取数据。它将获取文本框中的值，将其添加到getcustomerdata.php的查询字符串上，以getcustomerdata.php?id=23的格式创建一个URL。然后将这个URL指派给隐藏帧，以下就是这个函数的代码：
function requestCustomerInfo() { var sId = document.getElementById("txtCustomerId").value; top.frames["hiddenFrame"].location = "getcustomerdata.php?id=" sId;} 该函数的第一步是从文本框中获取客户标识号（"txtCustomerId"）。这是将文本框的ID txtCustomerId作为参数，调用document.getElementById()函数，并获取返回的value属性（value属性保存了文本框中的文本内容）来实现的。然后，将这个ID添加到字符串getcustomerdata.php?id=之后生成完整的URL。第二行代码则是创建此URL并将其赋给隐藏帧。为了获得对隐藏帧的引用，首先要使用top对象来获取浏览器的顶级窗口（topmost window）。该对象拥有一个frames数组，在其中可以找到这个隐藏帧。由于每个帧都是一个窗口对象，因此可以将其位置设置为预期的URL。 这是发出请求所需的所有信息。注意，由于这是一个GET请求（通过一个查询字符串传递信息），因此是很简单的。（很快，你将看到如何使用隐藏帧技术来执行一个POST请求。） 除了requestCustomerInfo()函数之外，还需要另一个在查询后显示客户信息的函数。当数据返回时，隐藏帧将调用这个displayCustomerInfo()函数，其唯一的参数是包含要显示的客户数据的字符串：
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 id="divInfoToReturn"＞＜?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查询字符串）：
＜?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; //更多代码?＞ 这段代码首先从查询字符串中获取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共4页。 1 2 3 4 :
下载本文示例代码
掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介掌握AJAX之AJAX通讯技术简介
阅读(115) | 评论(0) | 转发(0) |
