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>則完全不會執行。

取材網站

相關回應

目前無相關回應

發表回應

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

  • 表情:            
紙娃娃設定

次選單

訪客人次

  • Total: 109584
  • Today: 02
  • Yesterday: 07

新作塗鴉

最近迴響

  • 台灣頂級打炮聖地**看照選妹: 大★台★灣★喝★茶+LINE:【tw5205】 ...
  • 香草: 香草本地純兼職加LINE:love58966 SK:wh...
  • 香草: 香草本地純兼職加LINE:love58966 SK:wh...
  • 麥莉: 台中.外.送.茶.LINE:clear258豐原.外.約....
  • 麥莉: 免費到府服務:台中市 西區.北區.中區.東...
  • 麥莉: 有氣氛@放鬆讓我們從身體開始 很溫柔唷~...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 志玲: 安唷 我是小鈴鐺 是一名新人GTO 每天重複...
  • 騎姬正妹外約: 騎姬正妹外約+賴mar339看照 全台出差旅...

素材版權

  • Princess PartyDesign: Rei
  • 幻想素材サイトFirst MoonSozai: 糸宇 睦月

標籤貼紙

  • Valid XHTML 1.0
  • Valid CSS 2.1
  • WCAG 1.0 Triple-A