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中的每個步驟，到時候會更好理解。