AJax+Json+JQuery----前沿

        今天想寫點個人的感想,當然肯定有很多不足的地方,若有哪位仁兄發現不妥之處,還望指出。首先這邊文章是引言,是從大局的角度給大家介紹下我的想法,然後具體的實現我會從下一篇文章開始詳細講解。

 

       現在網絡上大部分網站(個人認爲)的數據傳輸方式都不是基於像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中的每個步驟,到時候會更好理解。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章