最近因為研究上的需要,看了有關AJAX的相關資料,其中有兩個可以加速妳開發AJAX的工具,他們分別是Jquery與Prototype。

它們的參考資料如下

Jquery:

http://blog.ericsk.org/archives/tag/jquery-tut

 

http://jquery.com/

 

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);//改變名字為msgelementinnerHTML屬性為回傳的字串

 

 

    }

  });

}

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;//接收從伺服端回傳回來的值

//改變名字為resultelementnnerHTML屬性

    $('result').update(message);

    //Element.update("result",message);上一行也可改成這樣

}

 

以下則是jquery在載入html網頁時,可設定事件的打法

 

範例2

//當頁面讀取完畢之後的事件設定

$(document).ready(function(e){

$('#btn').click(showMsg);//使id"btn"的按鈕當按下時會執行showMsg方法

以下則是prototype在傳送值給後端時,設定所要傳送的查詢字串即傳送方法,以及要傳送給哪個網頁,最後再設定當回傳時,要交由哪個函式接收並處理。

範例3

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 roczen2007 的頭像
    roczen2007

    roczen2007

    roczen2007 發表在 痞客邦 留言(0) 人氣()