uIP處理動態(tài)頁面方法

1、uIP 處理動態(tài)頁面方法本文以uIP0.9 WEBSERVER 為例簡單介紹一下WEB動態(tài)頁面的方法為直觀說明問題需要使用HttpWatch 工具來查看瀏覽器與webserver如何交互。下面是一個HTML的頁面（about.html）歡迎使用遠控系統(tǒng)本系統(tǒng)由 -淘寶三只熊當(dāng)家研發(fā)-/.請在下面表單中輸入用戶名驗證身份,驗證成功后您將可以操控LED。用戶名: 選擇你要點亮的LEDLED1 LED2 LED3 LED4選擇樣式點亮一個點亮兩個點亮三個全部點亮選擇樣式首先我們來分析一下第一個表單提交的內(nèi)容是如何處理的。做一下準(zhǔn)備工作安裝完HttpWatch，選中IE的查看-瀏覽器欄-HttpWat

2、ch?，F(xiàn)在我們可以監(jiān)視瀏覽器提交的及從webserver返回的數(shù)據(jù)。我們打開about.html頁面。開發(fā)板的缺省ip是默認的首頁框架頁面里下面是about.html,也即是說先打開主頁。如下圖：在輸入框填上“123”點擊確定，瀏覽器向webserver 提交的URL字符串是 HYPERLINK /6?user=123 /6?user=123 ，方法是 GET。完整的http請求數(shù)據(jù)流GET /6?user=123 HTTP/1.1Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-f

3、lash, application/x-silverlight, */*Referer: /about.htmlAccept-Language: zh-cnUser-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727)Accept-Encoding: gzip, deflateHost: Connection: Keep-Alive這一個完整的http請求數(shù)據(jù)流，GET /6?user=123 HTTP/1.1 這一部分是我們關(guān)心的?？纯磚IP的webse

4、rver如何處理的，下面的程序段是httpd.c里的處理程序。if(uip_newdata() & hs-state = HTTP_NOGET) /新數(shù)據(jù)到達且之前的狀態(tài)是HTTP_NOGET if(uip_appdata0 != ISO_G |/*判斷瀏覽器的請求是不是GET，如果第一個字符不是g那肯定就不是get*/ uip_appdata1 != ISO_E | uip_appdata2 != ISO_T | uip_appdata3 != ISO_space) uip_abort();return; for(i = 4; i script = NULL;hs-state = HTTP_

5、FILE;hs-dataptr = fsfile.dat;hs-count = fsfile.len; 附錄資料：從 XML 生成可與 Ajax 共同使用的 JSON時下，非常流行使用 JavaScript 代碼為數(shù)據(jù)驅(qū)動的 Web 應(yīng)用程序添加互動性。若能將數(shù)據(jù)編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過 JavaScript 語言使用它。通過本文，發(fā)掘使用 XSLT V2 從 XML 數(shù)據(jù)生成 JSON 的幾種不同方法。幾年前，許多開發(fā)人員很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于標(biāo)記的語言

6、?，F(xiàn)在，Asynchronous JavaScript and XML（AJAX）成了新的熱點，人們又將目光轉(zhuǎn)向了使用 JavaScript 代碼的數(shù)據(jù)驅(qū)動的富 Internet 應(yīng)用程序。但是開發(fā)人員是否已經(jīng)消除了 XML 和這一新技術(shù)之間的鴻溝呢？當(dāng)然，您可以在 Web 客戶機中使用 XML 解析器來讀取數(shù)據(jù)，但這種做法會帶來兩個問題。第一，出于安全方面的原因，XML 數(shù)據(jù)只能從與此頁面相同的那個域中讀取。這雖然不是什么大的限制因素，但它的確會引起部署方面的問題，還會阻礙 DHTML 小部件的創(chuàng)建。第二，讀取和解析 XML 會非常慢。另一種做法是讓服務(wù)器執(zhí)行 XML 的解析工作，方法是設(shè)置

7、服務(wù)器，使之向瀏覽器發(fā)送以 JavaScript 代碼或時下流行的 JavaScript Object Notation（JSON）編碼的數(shù)據(jù)。本文將展示如下三種使用 XSLT V2 語言和 Saxon XSLT V2 處理器從 XML 數(shù)據(jù)生成 JSON 的技巧： 簡單編碼 通過函數(shù)調(diào)用加載數(shù)據(jù) 編碼對象 JSON 簡介要學(xué)習(xí)如何將數(shù)據(jù)編碼成 JSON（它只是 JavaScript 的一個子集），最好的方法是從數(shù)據(jù)開始。清單 1 顯示了書籍列表的一個示例 XML 數(shù)據(jù)集。清單 1. 基本的圖形化圖書館 Code Generation in Action JackHerrington Mann

8、ing PHP Hacks JackHerrington OReilly Podcasting Hacks JackHerrington OReilly 這個數(shù)據(jù)集很簡單，只包含三本書，每本書都具有惟一的 ID、書名、作者姓名及出版商的名字。（沒錯，我只選擇了我自己的書作為數(shù)據(jù)集，但能怨我嗎？這些書實在是不可多得的節(jié)日和生日禮物。）清單 2 顯示了這些數(shù)據(jù)在 JSON 中的效果。清單 2. JSON 中的示例數(shù)據(jù)集 id: 1, title: Code Generation in Action, first: Jack, last: Herrington, publisher: Manning

9、 , . 方括號 () 表明這是一個數(shù)組。大括號 () 則表明這是一個散列表，該散列表由一組名稱和值對組成。在本例中，我創(chuàng)建了一個散列表的數(shù)組 用來存儲這類結(jié)構(gòu)式數(shù)據(jù)的一種常見方法。另外一點值得注意的是字符串是通過單引號或雙引號被編碼的。所以，如果我想用單引號編碼 OReilly，我就必須使用反斜杠對它進行轉(zhuǎn)義：OReilly。 這讓我編寫的這個 XSLT 樣式表更為有趣了一些。我并未在本例中放上任何日期，但您也可以通過如下兩種方法來編碼日期。第一種方法是將日期作為字符串，該字符串必須在后面被解析。第二種方法是將日期作為一個對象，比如：publishdate: new Date( 2006,

10、6, 16, 17, 45, 0 )這段代碼將 publishdate 的值設(shè)置為6/16/2006 5:45:00 p.m.。簡單編碼接下來我將陸續(xù)介紹 JSON 編碼的幾種技巧。第一種也是其中最簡單的一種，此樣式表如 清單 3 所示。清單 3. simple.xsl 樣式表 var g_books = 1, id: ,name: ,first: ,last: ,publisher: ;要理解此樣式表，不妨先來看一下 清單 4 所示的輸出。清單 4. simple.xsl 的輸出var g_books = id: 1,name: Code Generation in Action,first

11、: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly;這里，我將名為 g_books 的變量設(shè)置為一個包含三個散列表的數(shù)組，每個散列表包含關(guān)于該書的信息。再回過頭來看看 清單 3，您會發(fā)現(xiàn)第一個模板匹配 / 路徑，它也是首先應(yīng)用到輸入數(shù)據(jù)集的模板，該模板使用 for-e

12、ach 循環(huán)來遍歷每本書。之后，它使用 標(biāo)記來將文本從該數(shù)據(jù)輸出到 JavaScript 輸出代碼。對于字符串，我使用名為 js:escape() 的定制函數(shù)，它在模板之前定義。該函數(shù)使用一個正則表達式將一個單引號標(biāo)記更改為帶有反斜杠的單引號標(biāo)記。最后一個重要的元素是 標(biāo)記，它告知處理器要輸出的是文本而不是 XML。要檢驗此過程是否可以正常工作，我加入了一個 simple .html 文件，該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個 HTML 文件如 清單 5 所示。清單 5. simple.html 文件Simple JS loaderdocument.write

13、( Found +g_books.length+ books );.html 文件使用 標(biāo)記簡單地加載已編碼了的 JavaScript 代碼。之后，第二個 標(biāo)記將數(shù)組的長度寫出到瀏覽器頁面，如 圖 1 所示。圖 1. simple.html 的輸出好了！數(shù)據(jù)文件包含三本書，相應(yīng)的 JavaScript 文件也包含三本書。它真的可以工作！通過函數(shù)加載上述第一個示例很簡單，而且在大多數(shù)情況下可以發(fā)揮其作用，但它存在一些問題。第一個問題是對于數(shù)據(jù)何時被加載沒有任何提示。如果數(shù)據(jù)是像頁面那樣被靜態(tài)加載的，這不成問題。但是如果頁面動態(tài)創(chuàng)建了一個 標(biāo)記來按需加載數(shù)據(jù)，那么就很有必要知道 標(biāo)記是何時完成的。

14、實現(xiàn)此功能的最好的方法是讓編碼了的數(shù)據(jù)調(diào)用一個 JavaScript 函數(shù)，而不是只設(shè)置數(shù)據(jù)。這個概念很重要，所以我將花一些時間來介紹一下為什么您必須要通過動態(tài)生成的 標(biāo)記來加載數(shù)據(jù)。頁面加載后，從服務(wù)器獲得數(shù)據(jù)是 Web 2.0 的核心功能。一種方法是使用 AJAX 機制通過到服務(wù)器的調(diào)用來加載 XML。然而，出于安全性的原因，AJAX 機制只限于從單一域獲取數(shù)據(jù)。這在大多數(shù)情況下都沒有問題，但有時，您可能需要 JavaScript 代碼運行在他人的頁面上（例如，Google Maps）。在這種情況下從服務(wù)器獲得數(shù)據(jù)的惟一方法是通過動態(tài)加載 標(biāo)記。獲悉 標(biāo)記何時加載的最好的方法是讓 標(biāo)記返回

15、的腳本調(diào)用函數(shù)而不是簡單地加載數(shù)據(jù)。清單 6 顯示了在函數(shù)調(diào)用中編碼的數(shù)據(jù)。清單 6. Function1.jsAddBooks( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly

16、 );清單 7 給出了相應(yīng)的 .html 文件。清單 7. Function1.htmlFunction 1 JS loadervar g_books = ;function AddBooks( books ) g_books = books; drawbooks( g_books );稍后將詳細介紹 drawbooks 函數(shù)。這里重要的是了解一下頁面如何定義 AddBooks 函數(shù)，該函數(shù)隨后會由 function1.js 文件中的腳本調(diào)用。該 AddBooks 函數(shù)負責(zé)處理數(shù)據(jù)。而且被調(diào)用的 AddBooks 函數(shù)會向頁面指示 標(biāo)記被正確加載，并已加載完成。要創(chuàng)建 function1.js

17、 文件，我只對樣式表稍微做了一點修改，如 清單 8 所示。清單 8. function1.xsl 樣式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );這里，我調(diào)用了一個函數(shù)，而不是簡單地設(shè)置一個變量。這就是我所做的惟一更改?；氐巾撁?，我使用了 drawbooks 函數(shù)來構(gòu)建書的表格，這樣我就能夠確認數(shù)據(jù)被正確編碼和正確顯示。此函數(shù)是在 drawbooks.js 內(nèi)定義的，如 清單 9 所示。清單 9. Drawbooks.jsfunction drawbooks( books ) var elTable = document.crea

18、teElement( table ); for( var b in books ) var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( ) ); var elTD3 = elTR.insertCell( -1

19、); elTD3.appendChild( document.createTextNode( booksb.first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( booksb.publisher ) ); document.body.appendChild( elTable );這

20、個簡單函數(shù)創(chuàng)建了一個表格節(jié)點，然后循環(huán)訪問書的列表并為每本書創(chuàng)建一行，為每個數(shù)據(jù)元素分配一個單元格。此頁面上的代碼的結(jié)果如 圖 2 所示。圖 2. function1.html 的結(jié)果現(xiàn)在我就可以查看一下此頁面的輸出并確認來自原始 .xml 文件的一切均已被正確轉(zhuǎn)換成 JavaScript 代碼，且數(shù)據(jù)被發(fā)送到 AddData 函數(shù)并被正確添加到頁面。細化函數(shù)調(diào)用技術(shù)我很喜歡函數(shù)調(diào)用這一技術(shù)，但我并不贊同將所有圖書數(shù)據(jù)都放入一個塊中。另一種方式是為每條記錄采用一個調(diào)用，如 清單 10 所示。清單 10. Function2.jsAddBook( id: 1,name: Code Generat

21、ion in Action,first: Jack,last: Herrington,publisher: Manning );AddBook( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly );.對 .html 頁面只需做少許修改，如 清單 11 所示。清單 11. Function2.html.var g_books = ;function AddBook( book ) g_books.push( book ); .這里更改了 XSLT，以使函數(shù)調(diào)用駐留在 for-each 循環(huán)體內(nèi)。清單 12

22、 顯示了更新后的樣式表。清單 12. function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );.對這個給定示例來說，這種更改看起來有些隨意。但如果原始的 XML 數(shù)據(jù)集有多種數(shù)據(jù)類型，要為每種類型分配一個單獨的函數(shù)調(diào)用會使 XSL 和頁面上的 JavaScript 代碼更為簡單、更易于維護。編碼對象對小的頁面來講，使用 JavaScript 函數(shù)沒有問題。但對于大型項目，就需要使用 JavaScript 語言的一些面向?qū)ο筇匦浴Ｊ堑?，JavaScript 語言可以處理對象而且可以處理得很好。清單 13 顯示了如何創(chuàng)建帶有數(shù)據(jù)

23、的對象。清單 13. Object1.jsg_books.push( new Book( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning ) );g_books.push( new Book( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly ) );在本例中，我只簡單地向名為 g_books 的數(shù)組添加了 Book 對象。JavaScript 的對象創(chuàng)建與 Java、C# 或 C+

24、 編程語言的對象創(chuàng)建十分相似。都是一個 new 操作符后跟一個類名。參數(shù)放到隨后的括號內(nèi)。在本例中，我傳入了一個帶值的單一散列表，并將其分割成單獨的一些參數(shù)。創(chuàng)建此對象的代碼如 清單 14 所示。清單 14. Object1.xslg_books.push( new Book( id: ,name: ,first: ,last: ,publisher: ) );此頁面內(nèi)最值得注意的是定義 Book 類的那部分代碼。清單 15 顯示了該頁面。清單 15. object1.html.var g_books = ;function Book( data ) for( var d in data )

25、thisd = datad; .Book 類的構(gòu)造函數(shù)循環(huán)訪問散列表的所有數(shù)據(jù)。對于每個鍵，會在對象上創(chuàng)建一個具有對象名稱和數(shù)據(jù)的實例變量。不需要對 drawbooks 函數(shù)做任何修改，因為對象都有與原始的散列表相同的鍵和值。JavaScript 語言并不區(qū)分訪問的是散列表內(nèi)的命名值還是對象上的命名值。當(dāng)然，Book 類應(yīng)該有像 set 和 get 這樣的訪問程序。 清單 16 顯示了我是如何對 JavaScript 數(shù)據(jù)進行編碼的。清單 16. Object2.jsvar b1 = new Book();b1.setId ( 1 );b1.setTitle ( Code Generation in Action );b1.setFirst ( Jack );b1.setLast ( Herrington );b1.setPublisher ( Manning );g_books.push( b1 );var b2 = new Book();b2.setId ( 2 );b2.setTitle ( PHP Hacks );.沒錯，這有些大同小