今天想寫點個人的感想,當然肯定有很多不足的地方,若有哪位仁兄發現不妥之處,還望指出。首先這邊文章是引言,是從大局的角度給大家介紹下我的想法,然後具體的實現我會從下一篇文章開始詳細講解。
現在網絡上大部分網站(個人認爲)的數據傳輸方式都不是基於像Ajax這樣數據傳輸是異步的。Ajax有兩個特點:數據的異步傳輸和頁面無刷新,從某種角度上也可以說這就是它的優點。但是Ajax有兩點不好:第一:從服務器端發送回來的數據(一般情況下是XML格式)要綁定到控件上有點麻煩。第二:運用Ajax技術就一定要涉及到Js代碼,一旦其中的的Js代碼出錯,要找出錯誤就顯得不是那麼容易。所以個人覺得因爲上面的兩點才讓Ajax在網頁設計領域中不能大展身手,關於Ajax會在下一篇文章中介紹。
我需要申明的是這一系列文章都是圍繞Ajax這種技術來實現數據的異步傳輸,只是利用了Json和JQuery這兩種技術來提高Ajax在網站開發中的效率,也彌補了Ajax在上面談到的那兩方面的不足,而這也是我寫這篇文章的主要目的。
原理是通過Json和JQuery寫一些邏輯通用的Js方法,這些方法主要處理兩個任務:第一組裝要發送的數據;第二:處理從服務器端發送回來的數據,如:將服務器端發送回來的數據綁定到控件上等,而Ajax的方法體只需要負責發送和接受這兩個動作。有了Json和JQuery這兩個助手,Ajax實現網站開發就很容易了。
我們不如假設這裏要實現一個業務邏輯:顯示Student表中的一條記錄。其中Student表的結構如圖2所示,那麼利用我們說的方法處理這個業務邏輯的數據流就如圖1所示了。(本文章所用的後臺代碼語言是C#,數據庫是SQLServer)
圖1
圖2
對照圖1各個步驟的相應說明:
1、 這個Js方法涉及到Json+JQuery技術,主要作用是遍歷一個DIV,獲取裏面所有控件的ID屬性,然後配成一個邏輯條件字符串。而這些顯示數據的控件的ID命名將有一些規定,必須包含表名和表的屬性名稱。具體的規定以後的章節裏會詳細講解。
這裏爲了下面的說明需要我假設客戶端有三個Span控件和一個DIV
<div id="StudentID">
<span id="LbStudent_Name"></span>
<span id="LbStudent_Age"></span>
<span id="LbStudent_Number"></span>
<div>
2、 在這裏大家可以這樣理解,這個業務邏輯條件是通過遍歷DIV獲取其中的Span控件的ID來獲取的,最後就得到這樣的一條字符串:
"Student_Name:Student_Age:Student_Number"
3、 在後臺代碼中,調用一個方法(大家自己也可以寫的),可以將上面的邏輯條件配成一個SQL語句,如下:
"Select Student.Name,Student.Age,Student.Number From Student"
有些讀者會問在第1步中控件的ID命名爲什麼要包含表名和屬性名。這裏就是爲了動態的配置SQL語句的。
4、 這個Js方法涉及到Json+JQuery技術,然後到數據庫中獲取數據,所獲取出來的數據依照大家自己的習慣,可以是DataTable或者Student實體等。
5、 這這裏大家要寫一個方法,就是將上面的那條SQL語句所查出來的結果要拼成一個Json格式的字符串,如:獲取的數據如圖2所示的話,那麼最後的Json格式的字符串可以爲如下:
{"Student_Name":"斌羽","Student_Age":"23","Student_Number":"200717030102"}
這裏也提示下,現在網上很多關於把實體轉換成Json格式的插件,大家可以去下載。
6、 讀者肯定有個疑問,第5點,爲什麼從數據庫中獲取的數據要轉換成Json格式的字符串,還有Json格式的字符串每個鍵的名稱爲什麼要包含表名和屬性名,如:Student_Name
,這是爲了將這個Json格式的字符串發送到客戶端,客戶端只要調用一個通用的Js方法就可以動態的將這些數據綁定到每個控件上。具體的我會在後面的文章中給大家一個例子來講述。
上面寫的這部分內容可能有點抽象,明天開始我會寫一些例子,來說明上面圖1中的每個步驟,到時候會更好理解。