2013年3月23日 星期六

AJAX簡單說

介紹一下最簡單的AJAX模式,看前端如何跟後端溝通,然後讓前端只更新部分畫面,而不會重刷(Reflash),作法很簡單,請先下載範例程式。從client.html中可以看到裡面很簡單,有個按鈕,會觸發JS的function,去做AJAX,而那個JS的function可以從client.js當中看出來,他有一個JQuery提供的,ajax特定格式跟語法。知道了之後,就非常簡單。

利用JQuery提供的,ajax()函式,寫好url : ,告訴程式要呼叫後端哪個PHP,error : 當Ajax失敗,則執行這個函式,看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作,比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值:Hello Ajax字串。這樣就不會整頁重刷,而只是更新某些元件,也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效,來達成更完美的更新。

沒有留言:

張貼留言