程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 結合AJAX進行PHP開發之入門(三)

結合AJAX進行PHP開發之入門(三)

編輯:關於PHP編程

將 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 函數在同一個頁面上即可,即使頁面位置發生了變化也沒有關系。

  擴展相冊

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved