就是愛分享

Ajax基本上是一種技術,一改過去web前端和後端採用的同步溝通方式,而是使用非同步來溝通。而JavaScript是Ajax技術的一個主要組成部分,在開發Ajax應用程式的過程中,往往需要編寫大量的JavaScript程式碼,同時也會遇到瀏覽器相容性的問題。

因此為了減少JavaScript編碼量,並簡化Ajax應用程式的開發任務,目前出現了許多出色的Ajax開發框架,例如jQuery和Ext JS等。其中jQuery是比較輕量級的框架,而Ext JS則包含了許多精美的UI工具,但是相應的檔案大,載入速度並不理想,而且在低版本的瀏覽器上顯示效果不佳。

另外由於jQuery和Ext JS等都是Web前端的JavaScript框架,基本上後端程式是PHP、.NET、JAVA、Ruby或Python等都沒有影響。

jQuery - write less, do more
jQuery是John Resig在2006/01/14於BarCamp NYC首次發表,在jQuery的官方網站可以看到這句「write less, do more」的口號,同時也進一步簡述了jQuery是一個快速又簡潔的JavaScript程式庫,簡化了在HTML文件裡面尋找DOM物件、處理事件、製作動畫和處理Ajax互動的過程。由於jQuery語法簡潔,有時短短的一行程式,卻可以做很多事情。

網路上有很多先進、前輩們無私分享了jQuery的研究與心得,讓我在專案開發上獲益良多,所以在此也分享ㄧ個.NET專案應用jQuery.Ajax的範例。

通常在會員註冊時,總是希望能夠馬上知道會員帳號是否已經被人取用,因此jQuery.Ajax就可以派上用場了。

假設表單有一個填寫會員帳號的textBox,其ID是txtUserID,資料庫是使用MySQL,資料表的欄位是UserID。首先建立一個預存程序CheckUserID:
DROP PROCEDURE IF EXISTS CheckUserID;
CREATE PROCEDURE CheckUserID( User_ID VARCHAR(10) )
BEGIN
SELECT COUNT(*) FROM member WHERE UserID = User_ID;
END;

在Register.aspx的程式碼如下:



在Register.aspx.cs



在web.config已經有加入SQL連接字串:



以此類推,如果ㄧ次要判斷兩個欄位條件成立,例如我有一個簡訊通知的程式,在傳簡訊之前要馬上知道某個帳號在某個日期是否已經發送過。假設帳號和發送日期的欄位分別為txtUserID和txtPrescriptionOpen,當這兩個欄位其中之ㄧ”失去焦點”之後,分別會去執行以下兩個JQuery.ajax相對應的程式之ㄧ;而資料表message的欄位分別是UserID和Prescription_open。首先也是建立一個預存程序CheckDoubleMessage:
DROP PROCEDURE IF EXISTS CheckDoubleMessage;
CREATE PROCEDURE CheckDoubleMessage( User_ID VARCHAR(10), Prescriptionopen VARCHAR(10))
BEGIN
SELECT COUNT(*) FROM message WHERE UserID = User_ID AND Prescription_open = Prescriptionopen;
END;

在Message.aspx的程式碼如下:




在Message.aspx.cs下



後記:
1.程式中我只加success的處理方式,如果在開發過程中有必要的話也可以加入error的處理方式,一般來說當傳送的參數不正確等情況時就會進入error的。
2.在VS2008開發環境下外掛入jquery-1.4.2.js,IntelliSense會出現錯誤訊息,請也一起下載jquery-1.4.2-vsdoc.js(請下載jquery-1.4.1-vsdoc.js並改名之)到同一個資料夾下,並且再下載安裝VS90SP1-KB958502-x86.exe

參考網址:
http://jquery.com/
學習 jQuery 從入門到精通只要兩小時!


閱讀全文...