首頁  >  文章  >  php教程  >  透過PHP和Sajax使用Ajax之JavaScript

透過PHP和Sajax使用Ajax之JavaScript

高洛峰
高洛峰原創
2016-11-25 09:55:221258瀏覽

多年來,創建真正具有響應性的 Web 應用程式這一目標一直被 Web 開發的一個簡單事實所阻礙:要改變頁面某一部分的信息,用戶就必須重載整個頁面。但是以後不再會這樣了。感謝非同步 Java? 腳本和 XML(Ajax),我們現在可以從伺服器端請求新內容,只修改頁面的一部分。這個教學解釋如何把 Ajax 用於 PHP ,並介紹了簡單 Ajax 工具包(Sajax),這是一個用 PHP 寫的工具,可以把伺服器端 PHP 與 JavaScript 整合。

  開始之前

  這份教程針對的是對於開發富Web 應用程式感興趣的人,富Web 應用程式把異步JavaScript 和XML(Ajax)與PHP 結合起來,用戶每次點擊時,不必刷新整個頁面,就可以動態更新內容。這份教學假設讀者了解基本的 PHP 概念,包括 if 和 switch 語句以及函數的使用。

  關於本教程

  在本教程中,將學習 Ajax 以及圍繞它的應用的問題。將用 PHP 建立一個 Ajax 應用程序,顯示以前寫的一個教程中的面板。點擊面板連結只會重新載入內容區,並用選定面板的內容替換它,從而節省了頻寬和頁面裝入的時間。然後將把簡單 Ajax 工具包(Sajax)整合進 Ajax 應用程序,它可以同步 Ajax 的使用,從而簡化開發。

  概述

  在深入之前,先看看 Ajax、範例 PHP 應用程式和 Sajax。 Ajax

  Ajax 允許 Web 開發人員建立互動的 Web 頁面,同時避免必須等候頁面載入這一瓶頸。透過 Ajax 創建的應用程序,只需點擊按鈕,就可以用全新的內容替換 Web 頁面某一區域的內容。它的精彩之處在於不必等待頁面裝入,只有這一個區域的內容需要載入。以 Google Maps 為例:可以點選並四處移動地圖,卻不必等待頁面載入。

  Ajax 的問題

  在使用 Ajax 時有些事需要注意。像其他 Web 頁面一樣,Ajax 頁面是可以加書籤的,所以在使用 GET 與 POST 進行請求時就會造成問題。國際化和編碼方案數量的增加,使得把這些編碼方案標準化變得日益重要。在這份教程中將了解這些重要的問題。

  範例 PHP 應用程式

  首先要用 Ajax 創建一個應用程序,然後用 Sajax 創建,以展現使用這個工具包的好處。應用程式是以前編寫的教程中的一部分,帶有面板連結。它被用作示例,以展示使用 Ajax 的優勢。因為在各個面板上點擊時,它們會非同步裝入,而不必等待頁面剩下的部分再次裝入。這個範例應用程式還會展示如何建立自己的 Ajax 應用程式。

  Sajax

  如果想創建 Ajax 應用程序,又不想受 Ajax 複雜的細節所累。答案就是 Sajax。透過使用 ModernMethod 人員開發的函式庫,Sajax 為 Web 開發人員抽象化了 Ajax 的高層細節。在底層,Sajax 的工作與 Ajax 相同。但是,透過使用 Sajax 函式庫提供的高層函數,可以忽略 Ajax 的技術細節。

  什麼是 Ajax?

  這一節是個入門介紹,用範例解釋 Ajax 的概念,包括在點擊連結時發生了什麼,Ajax 用於 PHP 應用程式時需要的 HTML 和 JavaScript 程式碼。下一節將更深入一些,實際地使用在這一節學習的 Ajax 概念來創建 PHP 應用程式。

  幕後內容

  Ajax 是非同步 JavaScript 和 XML 的組合。之所以說異步,是因為可以點擊頁面上的鏈接,然後它只裝入與點擊對應的內容,同時保持標題或其他任何設定的信息不動。

  點擊連結時,在背後工作的是 JavaScript 函數。 JavaScript 建立與 Web 瀏覽器通訊的對象,並告訴瀏覽器要裝入特定頁面。然後可以像平常一樣瀏覽同一頁面上的其他內容,當瀏覽器完全裝入新頁面的時候,瀏覽器會在 HTML 的 div 標記指定的位置顯示內容。

  CSS 樣式程式碼用來和 span 標記一起建立連結。
  範例應用程式需要CSS 程式碼,這樣span 標記看起來就像使用常規的錨標記(<a href="http://www.php1.cn/"> 
清單  1.指定標記的顯示訊息



...
<style type="text/css">

span:visited{ text-decoration:none; color:#293d6b; }

span:hover{ text-deco:hover}; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style> 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn