将 Sajax 连接到相册

　　利用刚刚创建的代码，我们将用 Sajax 迅速把相册从多页面应用程序转化成活动的 Ajax 应用程序。

　　因为相册主要有两个函数，get_table() 和 get_image()，这也是需要用 Sajax 导出的全部函数。事实上，为了通过 Sajax 调用这些函数，这些函数本身基本上不需要修改，很快我们就会看到，我们只需要修改生成的链接即可。

　　清单 9. Sajax 相册的头部

＜?php require("Sajax.php"); function get_image () { } // Defined later function get_thumbs_table () { } // Defined later // Standard Sajax stuff. Use Get, and export two // main functions to javascript $sajax_request_type = "GET"; sajax_init(); sajax_export("get_thumbs_table", "get_image"); sajax_handle_client_request(); ?＞

　　对于本文而言，文档主体部分很简单。我们将使用 div 和 window 的 id 来显示服务器的输出。

　　清单 10. 显示服务器输出的 div 和 window id

＜body＞ ＜h1＞Sajax photo album＜/h1＞ ＜div id="window"＞＜/div＞ ＜/body＞

　　最后还要编写 Javascript 回调函数。该例中，因为所有的服务器输出都直接输出到 window div 标记，所以可以重复使用简单的回调函数。将回调函数添加到 Sajax 函数调用中，就可以得到头（head）。

　　清单 11. 简单的头

＜head＞ ＜title＞Creating a Sajax photo album＜/title＞ ＜style type="text/css"＞ body { text-align: center } div#window { margin: 0 auto 0 auto; width: 700px; padding: 10px; border: 1px solid #ccc; background: #eee; } table.image_table { margin: 0 auto 0 auto; } table.image_table td { padding: 5px } table.image_table a { display: block; } table.image_table img { display: block; width: 120px padding: 2px; border: 1px solid #ccc; } img.full { display: block; margin: 0 auto 0 auto; width: 300px; border: 1px solid #000 } ＜/style＞ ＜script language="javascript"＞ ＜? sajax_show_javascript(); ?＞ // Outputs directly to the "window" div function to_window(output) { 　document.getElementById("window").innerHTML = output; } window.onload = function() { 　x get table to window); }; ＜/script＞ ＜/head＞

　　最后一步是保证应用程序中的所有链接都是自定义的 Sajax调用。只需要取上一节中的代码并作如下替换：href="index.php?start=0&step=5" 变为onclick="x_get_table(0, 5, to_window)"，href="expand.php?index=0" 变为onclick="x_get_image(0, to_window)"。

　　并在相应的函数中做同样修改：get_image_link() 和 get_table_link()。这样向 Sajax 的转化就完成了（如图 6所示）。所有链接都变成了与远程 PHP 调用对应的 Javascript 调用，PHP 使用 Javascript 响应处理程序to_window() 直接输出到页面。

　　整个应用程序都包含在一个页面中，还可以把其余功能（get_table()、get_image() 等）放在不能从 Web 访问的单独的库文件中。在大多数 Ajax应用程序中，每个发往服务器的请求都需要由单独的脚本处理，或至少需要编写一个非常庞大的处理程序脚本来重定向请求。将所有这些文件都集中到一起可能非常麻烦。使用 Sajax 永远只需要一个文件，在该文件中只需定义我们使用的函数即可。Sajax 代替了处理程序脚本。


　　可以看到 URL 仍然保持不变，并带来了更多愉快的用户体验。window div 显示在一个灰色的框中，通过 Sajax生成的内容非常清楚。脚本不一定要知道自身或者它在服务器上的位置，因为所有的链接最终都成为直接对页面自身的 Javascript调用。因此我们的代码能够很好的模块化。我们只需要保持 Javascript 和 PHP函数在同一个页面上即可，即使页面位置发生了变化也没有关系。

评论 (0) All

登陆 还没注册？