最近因為研究上的需要,看了有關AJAX的相關資料,其中有兩個可以加速妳開發AJAX的工具,他們分別是Jquery與Prototype。
它們的參考資料如下
Jquery:
http://blog.ericsk.org/archives/tag/jquery-tut
http://jsgears.com/thread-63-1-1.html
Prototype:
Ajax網頁程式設計 作者 沈時宇
http://blog.phptw.idv.tw/read-47.html
以下是jquery 傳值給後端並等待接收伺服器回傳時的寫法
範例1
function showMsg(e){ $.ajax({ //將請求送到此url url: 'hw1.jsp', //將傳送的查詢字串,取得欄位名稱name的值 data: {strname: $('#name').val()}, //成功回傳時,將執行的函式 success: function(response) { $('#msg').html(response);//改變名字為msg的element的innerHTML屬性為回傳的字串 } }); }
function show(){ var parm=$F('strname');//取得欄位為strname的值 var sparm='strname='+parm;//將取得的值變成查尋字串的型式 var ajax=new Ajax.Request("hw1.jsp",{method: 'POST',parameters: sparm,onComplete:returnValue});//將查尋字串以POST方法傳送到hw1.jsp , //當收到伺服器傳回來的值時,便會執行returnValue方法 } function returnValue(xmlhttp){ message=xmlhttp.responseText;//接收從伺服端回傳回來的值 //改變名字為result的element的nnerHTML屬性 $('result').update(message); //Element.update("result",message);上一行也可改成這樣 } |
以下則是jquery在載入html網頁時,可設定事件的打法
範例2
//當頁面讀取完畢之後的事件設定 $(document).ready(function(e){ $('#btn').click(showMsg);//使id為"btn"的按鈕當按下時會執行showMsg方法
以下則是prototype在傳送值給後端時,設定所要傳送的查詢字串即傳送方法,以及要傳送給哪個網頁,最後再設定當回傳時,要交由哪個函式接收並處理。
範例3
留言列表