AJAX Data Transfer Types

          Posted on 2006-02-23 11:15 BlueO2 閱讀(504) 評論(0)  編輯  收藏 所屬分類: AJAX

          AJAX與服務器端通訊,雖然XHR對象的介入使得我們可以異步處理用戶請求,但是另外一個細節(jié)也暴露給我,我們如何與服務器統(tǒng)一通信的契約?

          目前比較公認的有三種數(shù)據(jù)傳輸交互方式:XHTML Fragment,JSON,XML。當然也有不同的聲音,這里也會介紹。

          • XHTML片斷
          這種方式也被稱為AHAH, 目前很多遺留系統(tǒng)想沾AJAX的光改善一下交互,節(jié)省一下帶寬,大多數(shù)采用了此種方式。我們以 Struts為例子,比如在頁面上有一個按鈕,點擊后得到現(xiàn)在我收藏的圖書列表,則此圖書列表(Table元素組成)便可以以XHTML片斷的形式返回客戶端,然后利用XHR對象的responseText屬性得到,設知道某DIV中。
          for (Iterator it = sortedPresidentsList.iterator(); it.hasNext();) {
          HashMap hm 
          = (HashMap)it.next();
          html 
          += "<tr>";
          html 
          += "<td>" + (String)hm.get("firstName"+ "</td>";
          html 
          += "<td>" + (String)hm.get("middleName"+ "</td>";
          html 
          += "<td>" + (String)hm.get("lastName"+ "</td>";
          html 
          += "<td>" + (String)hm.get("firstYearInOffice"+ "</td>";
          html 
          += "<td>" + (String)hm.get("lastYearInOffice"+ "</td>";
          html 
          += "</tr>";
          }

          html 
          += "</table>";

          // Write the HTML to response
          response.setContentType("text/html");
          PrintWriter out 
          = response.getWriter();
          out.println(html);
          out.flush();

            這是一個Struts的例子,Action中response直接flush輸出。當然也可以讓Struts導向到結果jsp頁面,請求的XHR可以得到jsp生成的HTML內容。
            缺點是:當返回有Form的內容的時候會崩潰。CSS樣式設置復雜。

            • XML

            XML在很多AJAX示例當中作為數(shù)據(jù)傳遞的標準。而XML具有很好的數(shù)據(jù)語義描述性,服務器端生成方式眾多,而幾乎所有瀏覽器都支持對XML 的解析。以JavaScript解析服務器端返回的XML為例子,只需要XHR的responseXML屬性即可獲得XML由javascript解析 (請看我在BlogJAVA寫的操作示例) 而XML的產生方式似乎所有人都認準了

            <channel>

            <title>Dan's Data</title>
            <description>New and interesting computer hardware, gadgets and toys reviewed. And letters. Lots of letters.</description>
            <link>http://www.dansdata.com/</link>

            <item>
            <title>Ultrasone HFI-650 headphones</title>
            <description>They look like the 550s, they feel like the 550s, they've got marketing buzzwords like the 550s - are they worth the extra money?</description>
            <link>http://www.dansdata.com/quickshot025.htm</link>
            </item>..


            一類,似乎這樣子語義描述更清楚。但是我從michael那里得到啟示,確實,用此類方式傳輸數(shù)據(jù)幾乎無法在客戶端統(tǒng)一處理。從我的showcase中大家也可以看到,Javascript解析XML后更新DOM簡直就是體力活,枯燥且容易出錯,而此種XML返回的數(shù)據(jù)則會千差萬別,以尋找特定tag的節(jié)點的方式怎么能統(tǒng)一處理呢?于是,第二種XML傳輸方式應運而生。

            <list>
            <type>java.util.List</type>
            <map>
            <type>yourapp.domain.Book</type>
            <string>title</string>
            <string>JavaScript, the Definitive Guide</string>
            <string>publisher</string>
            <string>O'Reilly</string>
            <string>author</string>
            <string>David Flanagan</string>
            <string>cover</string>
            <string>/images/cover_defguide.jpg</string>
            <string>blurb</string>
            <string>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</string>
            </map>
            <map>
            <type>yourapp.domain.Book</type>
            <string>title</string>
            <string>DOM Scripting</string>
            <string>publisher</string>
            <string>Friends of Ed</string>
            <string>author</string>
            <string>Jeremy Keith</string>
            <string>cover</string>
            <string>/images/cover_domscripting.jpg</string>
            <string>blurb</string>
            <string>Praesent et diam a ligula facilisis venenatis.</string>
            </map>
            </list>

            這樣子只要客戶端和服務器端達成共識string long int等代表的數(shù)據(jù)類型就可以在兩端還原成自己可用的對象。而這也是micheal認為真正的AJAX應該有的形態(tài),其中AJAX引擎便承擔起了這份工作。
            缺點:XML的構造和解析在沒有類庫輔助的情形下是一個災難,而XML文件的傳輸效率似乎也不如簡單的文本高。我講會在后面的blog中提及XML文件的產生方法,以及客戶端一些解析的框架。

            • JSON

            JSON是JavaScript Object Notation的縮寫,是一份規(guī)范,定義了極其簡單的數(shù)據(jù)描述形式。幾乎在所有主流語言上都有實現(xiàn)。JSON對象是名/值對的集合,所以一個簡單的JSON對象為:
            var testObj={
            "name" : david,
            "sex" : Male,
            "work" : SE
            }
            客戶端javascript調用eval()就可以解析由服務器端產生的JSON串。var jsonExpression =
            ( + req.responseText + );
            var customer = eval(jsonExpression);
            而服務器端(JAVA)也有相應的lib來操作:JSONObject 的toString()
            缺點:雖然JSON簡潔高效,但是轉化為Javascript對象通過eval()也就是說,AJAX的傳輸邦定在了JSON上面,這樣,總會讓人不很放心。并且JSON對象難于閱讀與理解,不如XML直觀。

            除了會在下一篇AJAX的blog介紹JAVA對象序列化到XML以外,會一些從頭開始構建應用的例子,其中不會使用buffalo DWR一類的框架,我會嘗試選用不同的方案作為數(shù)據(jù)傳輸方式供大家參考。

            posts - 29, comments - 3, trackbacks - 0, articles - 0

            Copyright © BlueO2

            主站蜘蛛池模板: 凤翔县| 原平市| 徐州市| 安吉县| 修武县| 中江县| 剑阁县| 乐昌市| 枣阳市| 宁化县| 历史| 龙里县| 茶陵县| 巢湖市| 柳林县| 城口县| 祁门县| 拉萨市| 普陀区| 灵武市| 灵丘县| 高州市| 靖州| 黑河市| 肥东县| 桐梓县| 开远市| 德江县| 鹿泉市| 沛县| 三门县| 海伦市| 集贤县| 张家口市| 盐城市| 广宗县| 崇信县| 揭西县| 诸暨市| 高清| 尼木县|