Princess Party

Princess Party - 網頁教學

網頁教學

Ajax 連結

2011/11/16 (Wed)
  • AJAX其實並不是一種語法,而是一種應用技術,它可以說是採用JavaScript處理來自伺服器的回應,進而達成無需更換頁面即可取得內容的結果。

    這樣做有什麼好處呢?
    其一,通常我們在更換頁面的時候,其實有許多頁面的內容都是重複的,頁面更新時,就造成了許多的頻寬浪費。
    其二,有時候,我們會用 iframe 或是 PHP 的 include 的方式,在頁面中嵌入另一個頁面,但是 iframe 畢竟是個框架,他的大小是固定的, include方式,則同上面說的,必須要進行頁面更新。這時候,套用 Ajax 就能為您解決這樣的問題。
    其三,在表單上面有時候會有一些需要進行檢測的項目,比如說: 帳號是否已被使用、密碼是否輸入錯誤。又甚至有些需要與資料庫連結的回應如: 哪些關鍵字常被輸入、以前曾經在這裡留過言的名字之類,利用 Ajax 就能在不更新頁面的前提下取得這些資訊。但由於這些是屬於表單類的項目,就留待下次再詳述。

    當然它也是有個致命的缺點 - 它可能破壞瀏覽器後退按鈕的正常行為,通常習慣使用的瀏覽器上一頁下一頁都無法正常的跳頁。因此,使用時也必須實際考量需求,是不是有使用的必要。

    使用前需先下載 http://rei.idv.tw/sample/parts/ajax.js 這個檔案,並在 html 檔案中載入。

原始碼



設定方式

  • 【使用的方式】
    載入 ajax.js 後,便可以使用 <a href="javascript: Ajax.Get('顯示ID','頁面名稱','get',1);">1.html</a> 的方式來進行 Ajax 方式的頁面讀取。

    【參數說明】
    Ajax.Get 共有四個參數

    第一個參數代表讀入頁面內容的標籤ID,範例中為 'ajax' 所以必須寫一個 id="ajax" 的標籤供頁面內容寫入。

    第二個參數代表讀取的頁面網址,跨伺服器的頁面如果輸出格式剛好也是符合需求的,當然也可以讀取。

    第三個參數代表method方式,詳細請深入了解<form>標籤,這邊不詳述。

    第四個參數代表快取保存秒數,同一個頁面在這個秒數內連續讀取的話,會直接讀取快取中的內容,不會重新請求回應。

    【注意事項】
    這個效果可能無法直接在電腦中,需上傳到伺服器上面。

    讀進來的內容僅是文字,可以使用HTML語法,CSS則是套用母頁面的,<script>則完全不會執行。

取材網站

  • 此效果由小Rei自行開發製作
  •     

相關回應

  • 目前無相關回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

主題條列

訪客人次

最近迴響

新作塗鴉