基于WEB的遠程控制

1、物理與電子工程學院設計實驗報告PAGE PAGE 22 嵌入式系統(tǒng)設計設計性實驗報告 題目 基于web的遠程控制設計 系 別 年 級 專 業(yè) 班 級 學 號 學生姓名 指導教師 實驗時間 目 錄 TOC o 1-3 h z u HYPERLINK l _Toc343166563 前 言 PAGEREF _Toc343166563 h 2 HYPERLINK l _Toc343166564 引 言 PAGEREF _Toc343166564 h 2 HYPERLINK l _Toc343166565 課題要求 PAGEREF _Toc343166565 h 3 HYPERLINK l _Toc3

2、43166566 1、課題目的： PAGEREF _Toc343166566 h 3 HYPERLINK l _Toc343166567 2、運行環(huán)境： PAGEREF _Toc343166567 h 3 HYPERLINK l _Toc343166568 正 文 PAGEREF _Toc343166568 h 3 HYPERLINK l _Toc343166569 一、課題分析： PAGEREF _Toc343166569 h 3 HYPERLINK l _Toc343166570 二、實驗原理： PAGEREF _Toc343166570 h 3 HYPERLINK l _Toc34316

3、6571 三、系統(tǒng)設計： PAGEREF _Toc343166571 h 3 HYPERLINK l _Toc343166572 1、配置BOA 服務器： PAGEREF _Toc343166572 h 4 HYPERLINK l _Toc343166573 2、CGI原理及程序設計與編寫 PAGEREF _Toc343166573 h 5 HYPERLINK l _Toc343166603 3、網(wǎng)頁文件index.html設計 PAGEREF _Toc343166603 h 6 HYPERLINK l _Toc343166604 4、LED燈的驅(qū)動 PAGEREF _Toc343166604

4、 h 6 HYPERLINK l _Toc343166605 四、實驗現(xiàn)象 PAGEREF _Toc343166605 h 6 HYPERLINK l _Toc343166606 五、實驗注意點及問題 PAGEREF _Toc343166606 h 6 HYPERLINK l _Toc343166607 1、實驗注意點： PAGEREF _Toc343166607 h 6 HYPERLINK l _Toc343166608 2、問題： PAGEREF _Toc343166608 h 6 HYPERLINK l _Toc343166609 總結(jié)體會 PAGEREF _Toc343166609 h

5、 7 HYPERLINK l _Toc343166610 附件1：CGI程序 PAGEREF _Toc343166610 h 8 HYPERLINK l _Toc343166708 附件2：網(wǎng)頁（html文件）程序 PAGEREF _Toc343166708 h 10 HYPERLINK l _Toc343166734 設計性實驗報告成績： 指導教師簽名： PAGEREF _Toc343166734 h 11前 言隨著計算機技術和網(wǎng)絡通信技術的飛速發(fā)展，人們?nèi)粘Ｉ詈凸I(yè)生產(chǎn)等方面對基于以太網(wǎng)進行遠程通信和控制的要求日益強烈?，F(xiàn)代實驗設備由于其高度的精密和復雜性以及大量的信息獲取和處理要求,

6、基本上涵蓋網(wǎng)絡化生產(chǎn)與商業(yè)的技術問題, 使得它成為一個非常好的前期模型?；赪eb的遠程控制對遠程終端要求低,再加上互聯(lián)網(wǎng)技術的普及,基于Web的遠程控制這種方式將會廣泛應用到工業(yè)設備遠程監(jiān)控,自動化農(nóng)業(yè),網(wǎng)絡化信息家電,智能樓宇,遠程安防監(jiān)控系統(tǒng)等。目前市場上雖已有成熟的Web服務器可供遠程控制系統(tǒng)選擇，但多是基于通用計算機或?qū)Ｓ梅掌?，體積及成本不適合小型控制系統(tǒng)，尤其是在一些環(huán)境惡劣，不易值守或無法安裝計算機控制系統(tǒng)的場所。如今嵌入式技術發(fā)展迅速，嵌入式處理器的性能不斷提高，基于嵌入式的控制系統(tǒng)得到廣泛應用。這個實驗研究了基于Web 的遠程控制實驗系統(tǒng)的硬件和軟件設計方法, 重點討論了遠

7、程數(shù)據(jù)通信實現(xiàn)等關鍵技術, 并用計算機網(wǎng)絡對Led燈的控制。引 言近年來,隨著互聯(lián)網(wǎng)在全球的飛速發(fā)展,網(wǎng)絡技術廣泛應用于各種企業(yè)和工業(yè)系統(tǒng),越來越多的信息化產(chǎn)品需要能夠接入互聯(lián)網(wǎng)通過Web頁面進行遠程訪問和控制。這種程序結(jié)構也就是大家非常熟悉的B/S結(jié)構，即在 嵌入式設備上運行一個支持腳本或CGI功能的Web服務器，能夠生成動態(tài)頁面，在用戶端只需要通過Web瀏覽器就可以對嵌入式設備進行管理和監(jiān)控，非常方便實用。基于Web的遠程控制設計，我們首先需要在嵌入式設備上成功移植支持腳本或CGI功能的Web服務器，然后才能進行應用程序的開發(fā)。嵌入式Web服務器移植，我們常用的是Boa服務器的移植。課題要

8、求課題目的：在2440開發(fā)板上移植一個boa程序，使開發(fā)板可以作為一個WEB服務器使用。在PC計算機上使用瀏覽器測試嵌入式WEB服務器的功能。建立嵌入式系統(tǒng)的WEB服務功能（Boa服務器的建立參考實驗“嵌入式WEB服務器實驗”說明），利用WEB頁遠程控制嵌入式系統(tǒng)中的硬件狀態(tài)，如控制Led等的點亮、熄滅等動作。運行環(huán)境： 硬件：up-Star 認證考試實踐板、PC 機Pentium 500 以上, 硬盤10G 以上。軟件：PC 機操作系統(tǒng)REDHAT LINUX 9.0MINICOMARM-LINUX 開發(fā)環(huán)境正 文課題分析：這個實驗基于Web的遠程控制系統(tǒng)是以嵌入式Web服務器為中心,通過I

9、nternet網(wǎng)遠程訪問嵌入式Web服務器,嵌入式Web服務器通過現(xiàn)場總線控制各個LED燈,以達到遠程監(jiān)控的目的,實現(xiàn)PC機的瀏覽器可通過Internet網(wǎng)訪問嵌入式Web服務器。通過對嵌入式系統(tǒng)的結(jié)構形式主要有通用平臺、系統(tǒng)架構、硬件架構、軟件架構以及硬件、軟件的設計方案介紹,系統(tǒng)的將現(xiàn)場數(shù)據(jù)采集設備、本地Web服務器和遠端監(jiān)控主機三部分構成的基于Web的遠程控制系統(tǒng)做了較為全面的介紹和設計。實驗原理： 基于web 的遠程控制系統(tǒng)開發(fā)步驟如下：1、建立可用的軟件開發(fā)環(huán)境；2、移植Boa 服務器；3、開發(fā)所需的驅(qū)動程序；4、編寫html 頁面；5、編寫CGI 程序，實現(xiàn)遠程控制；6、登陸服務器

10、，測試系統(tǒng)功能。系統(tǒng)設計：1、配置BOA 服務器：(1) 依照實驗要求編譯BOA 服務器，并生成可執(zhí)行文件BOA，并且在開發(fā)板的/var的文件下建立實驗所需的文件夾及文件。拷貝Boa源碼目錄下已有的一個示例boa.conf，并在其基礎上進行修改:Port 80#Listen User rootGroup 0#ServerAdmin rootlocalhostErrorLog /var/web_boa/log/error_logAccessLog /var/web_boa/log/access_log#UseLocaltime#VerboseCGILogsServerName .here#Vir

11、tualHost DocumentRoot /var/web_boa/wwwUserDir public_htmlDirectoryIndex index.htmlDirectoryMaker /usr/lib/boa/boa_indexer# DirectoryCache /var/spool/boa/dircacheKeepAliveMax 1000KeepAliveTimeout 10MimeTypes /var/web_boa/mime.typesDefaultType text/plainCGIPath /bin:/usr/bin:/usr/local/binAlias /doc /

12、usr/docScriptAlias /cgi-bin/ /var/web_boa/www/cgi-bin/(2)利用掛載功能將BOA 執(zhí)行文件復制到開發(fā)板/var的文件夾下；(3)利用掛載功能將boa.conf文件復制到開發(fā)板/var的文件夾下。在/var下建立web_boa目錄等，根據(jù)boa.conf文件中的內(nèi)容相應創(chuàng)建需要的目錄。另外，在虛擬機的/etc目錄下拷貝mime.types文件到開發(fā)板。將生成的執(zhí)行文件boa、pass.cgi及index.html文件傳到開發(fā)板指定目錄（boa.conf文件中指定）。（4）運行boa文件 = 1 * GB3 * MERGEFORMAT up-t

13、ech: #cd /var = 2 * GB3 * MERGEFORMAT up-tech:/var#./boa = 3 * GB3 * MERGEFORMAT 打開瀏覽器輸入開發(fā)板的IP地址運行程序2、CGI原理及程序設計與編寫（1）CGI程序編寫（詳細程序見附件1）for ( i = 0; i (int)strlen(input); i+ ) if ( inputi = V ) j=inputi+1; if (j=1) ioctl(fd, 1, 0); ioctl(fd, 0, 1); ioctl(fd, 0, 2); if(j=2) ioctl(fd, 0, 0); ioctl(fd,

14、1, 1); ioctl(fd, 0, 2); if(j=3) ioctl(fd, 0, 0); ioctl(fd, 0, 1); ioctl(fd, 1, 2); close(fd); printf(Your POST Message is %s n, input); return 0;（2）CGI文件的生成 = 1 * GB3 * MERGEFORMAT 在虛擬機的終端環(huán)境中打開文件所在的文件夾 = 2 * GB3 * MERGEFORMAT 輸入arm-linux-gcc -o pass.cgi pass.c3、網(wǎng)頁文件index.html設計（1）網(wǎng)頁（html文件）設計（見附件2）（

15、2）利用掛載功能將文件復制到開發(fā)板的/var/web_boa/www的文件夾下（3）運行結(jié)果4、LED燈的驅(qū)動驅(qū)動的編譯：make modules；將驅(qū)動程序下載到開發(fā)板上;加載驅(qū)動程序命令： insmod 驅(qū)動名；手動創(chuàng)建設備節(jié)點：mknod /dev/led c 231 0。實驗現(xiàn)象 連好實驗設備后，執(zhí)行boa，在遠程聯(lián)網(wǎng)計算機上通過瀏覽器輸入開發(fā)板IP，就可以遠程控制實驗板上led燈的亮滅。按0即第一個燈亮，按1即第二個燈亮，按2即第三個燈亮。實驗注意點及問題1、實驗注意點：（1）容量較大的文件上傳到開發(fā)板要用ftp。如果需要用掛載則要將nolock改為nolock rsize=1024

16、,wsize=1024這樣才能順利的上傳。（2）生成文件夾mkdir *，生成文件touch *。（3）文件的移動：mv 文件的復制：cp（4） CGI文件的生成：arm-linux-gcc -o pazss.cgi pass.c2、問題：（1）掛載掛不上：可能是沒連接開發(fā)板，也可能是本地網(wǎng)絡連接禁用錯誤的原因。（2）壓縮包的解壓縮：解壓縮時我們不能像平常一樣直接右擊解壓縮到當前文件，而是應該將壓縮包拷到自己文件下，用rootlocalhost webserver#tar zxvf boa-0.94.13.tar.gz 。（3）Boa執(zhí)行后打不開網(wǎng)頁或者打開網(wǎng)頁錯誤：可能是網(wǎng)頁出現(xiàn)了錯誤，也許

17、是cgi自身出了問題，或是配置文件的路徑發(fā)生了錯誤，這些問題可以通過檢查路徑和文件解決。（4）無法控制Led燈：最可能的原因是未添加Led燈的驅(qū)動，異是Led燈的驅(qū)動程序出現(xiàn)錯誤。（5）開發(fā)板ping出錯：1.自動橋接 2.換個IP地址再激活。（6）源文件的拷貝：實驗過程中，一些源文件在虛擬機上修改以后，應該重新將其加載到開發(fā)板上，并將原來的文件覆蓋掉。總結(jié)體會此次實驗課題是基于web的遠程控制設計。通過本次實驗，我熟悉了基于Web下遠程控制Led的方法，對CGI原理有了進一步了解，掌握了BOA的移植方法。這次實驗是嵌入式實驗的最后一個綜合性設計實驗，前前后后經(jīng)歷了兩周時間。第一周我只是大概了

18、解了一下整個過程，完成了網(wǎng)頁的設計，和boa的移植。因為課前預習了實驗講義，所以過程還是順利的。第二周根據(jù)我們課前編好的CGI代碼，進行實驗的整體操作。在這個過程中問題還是蠻多的。然而我通過詢問老師還有同學以及自己的查資料，更多地了解嵌入式的一些基本術語還有這些術語的作用，以及在什么時候使用它改如何使用它。還有就是當我遇到問題或麻煩的時候我該怎樣去解決問題，我該怎么運用我所學的知識走出這個謎團，以及以最好的方式解決當前的問題。通過這次實驗我總結(jié)了要如何學習嵌入式。首先要保持良好的心態(tài)，不能急于求成，要一步一個腳印的堅持；然后要有清晰的學習規(guī)劃，明確學習步驟，明確先學什么，再學什么，比如C語言是

19、學習嵌入式的基礎，所以在學習時必須要踏踏實實，把地基給打好；最后要有良好的學習氛圍。嵌入式學習的難度和高度決定了嵌入式的學習要有個良好的學習討論氛圍，不能一味自己悶頭學，要多去討論和探討或是想老師尋求答案但自己一定要明白其中的道理，汲取大家的智慧才能更好的提高。在整個學期中，雖然嵌入式很難學習，很難掌握，但我還是挺喜歡嵌入式的，因為它可以帶給我許多接觸不到的事物，也漸漸習慣了看滿屏代碼的感覺。希望如果有機會還能對嵌入式有所學習。附件1：CGI程序 #include #include #include char* getcgidata(FILE* fp, char* requestmethod)

20、;int main() char *input; char *req_method; / char led1064; char led264; char a; int i = 0; int j = 0; int fd; printf(Content-type: text/plain; charset=iso-8859-1nn); printf(Content-type: text/htmlnn); printf(The following is query reuslt:); fd = open(/dev/led, 0); if (fd 0) perror(open device /dev/l

21、ed); exit(1); ioctl(fd, 1, 0); req_method = getenv(REQUEST_METHOD); input = getcgidata(stdin, req_method); /根據(jù)input中的字符串信息確定led燈的點亮關閉 /以下補充完善代碼 for ( i = 0; i (int)strlen(input); i+ ) if ( inputi = V ) j=inputi+1; if (j=1) ioctl(fd, 1, 0); ioctl(fd, 0, 1); ioctl(fd, 0, 2); if(j=2) ioctl(fd, 0, 0); i

22、octl(fd, 1, 1); ioctl(fd, 0, 2); if(j=3) ioctl(fd, 0, 0); ioctl(fd, 0, 1); ioctl(fd, 1, 2); close(fd); printf(Your POST Message is %s n, input); return 0;char* getcgidata(FILE* fp, char* requestmethod) char* input; int len; int size = 1024; int i = 0; if (!strcmp(requestmethod, GET) input = getenv(Q

23、UERY_STRING); return input; else if (!strcmp(requestmethod, POST) len = atoi(getenv(CONTENT_LENGTH); input = (char*)malloc(sizeof(char)*(size + 1); if (len = 0) input0 = 0; return input; while(1) inputi = (char)fgetc(fp); if (i = size) inputi+1 = 0; return input; -len; if (feof(fp) | (!(len) i+; inp

24、uti = 0; return input; i+; return NULL;附件2：網(wǎng)頁（html文件）程序Led遠程控制 嵌入式LED遠程控制系統(tǒng)亮燈位置012 設計性實驗報告成績： 指導教師簽名： 附錄資料：從 XML 生成可與 Ajax 共同使用的 JSON時下，非常流行使用 JavaScript 代碼為數(shù)據(jù)驅(qū)動的 Web 應用程序添加互動性。若能將數(shù)據(jù)編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過 JavaScript 語言使用它。通過本文，發(fā)掘使用 XSLT V2 從 XML 數(shù)據(jù)生成 JSON 的幾種不同方法。幾年前，許多開發(fā)

25、人員很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于標記的語言。現(xiàn)在，Asynchronous JavaScript and XML（AJAX）成了新的熱點，人們又將目光轉(zhuǎn)向了使用 JavaScript 代碼的數(shù)據(jù)驅(qū)動的富 Internet 應用程序。但是開發(fā)人員是否已經(jīng)消除了 XML 和這一新技術之間的鴻溝呢？當然，您可以在 Web 客戶機中使用 XML 解析器來讀取數(shù)據(jù)，但這種做法會帶來兩個問題。第一，出于安全方面的原因，XML 數(shù)據(jù)只能從與此頁面相同的那個域中讀取。這雖然不是什么大的限制因素，但它的確會引起部署方面的問題，還會阻礙 DHTML 小部件

26、的創(chuàng)建。第二，讀取和解析 XML 會非常慢。另一種做法是讓服務器執(zhí)行 XML 的解析工作，方法是設置服務器，使之向瀏覽器發(fā)送以 JavaScript 代碼或時下流行的 JavaScript Object Notation（JSON）編碼的數(shù)據(jù)。本文將展示如下三種使用 XSLT V2 語言和 Saxon XSLT V2 處理器從 XML 數(shù)據(jù)生成 JSON 的技巧： 簡單編碼 通過函數(shù)調(diào)用加載數(shù)據(jù) 編碼對象 JSON 簡介要學習如何將數(shù)據(jù)編碼成 JSON（它只是 JavaScript 的一個子集），最好的方法是從數(shù)據(jù)開始。清單 1 顯示了書籍列表的一個示例 XML 數(shù)據(jù)集。清單 1. 基本的圖形

27、化圖書館 Code Generation in Action JackHerrington Manning 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,

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

29、析。第二種方法是將日期作為一個對象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )這段代碼將 publishdate 的值設置為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_b

30、ooks = 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;這里，我將名為 g_books 的變量設置為一個包含三個散列表的數(shù)組，每個散列表包含關于該書的信息。再回過頭來看看

31、清單 3，您會發(fā)現(xiàn)第一個模板匹配 / 路徑，它也是首先應用到輸入數(shù)據(jù)集的模板，該模板使用 for-each 循環(huán)來遍歷每本書。之后，它使用 標記來將文本從該數(shù)據(jù)輸出到 JavaScript 輸出代碼。對于字符串，我使用名為 js:escape() 的定制函數(shù)，它在模板之前定義。該函數(shù)使用一個正則表達式將一個單引號標記更改為帶有反斜杠的單引號標記。最后一個重要的元素是 標記，它告知處理器要輸出的是文本而不是 XML。要檢驗此過程是否可以正常工作，我加入了一個 simple .html 文件，該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個 HTML 文件如 清單 5 所示。

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

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

34、種情況下從服務器獲得數(shù)據(jù)的惟一方法是通過動態(tài)加載 標記。獲悉 標記何時加載的最好的方法是讓 標記返回的腳本調(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 Hac

35、ks,first: Jack,last: Herrington,publisher: OReilly );清單 7 給出了相應的 .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ù)負責處理數(shù)據(jù)。而且被調(diào)用的

36、 AddBooks 函數(shù)會向頁面指示 標記被正確加載，并已加載完成。要創(chuàng)建 function1.js 文件，我只對樣式表稍微做了一點修改，如 清單 8 所示。清單 8. function1.xsl 樣式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );這里，我調(diào)用了一個函數(shù)，而不是簡單地設置一個變量。這就是我所做的惟一更改。回到頁面，我使用了 drawbooks 函數(shù)來構建書的表格，這樣我就能夠確認數(shù)據(jù)被正確編碼和正確顯示。此函數(shù)是在 drawbooks.js 內(nèi)定義的，如 清單 9 所示。清單 9. Drawbooks.jsfunct

37、ion drawbooks( books ) var elTable = document.createElement( 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(

38、 ) ); var elTD3 = elTR.insertCell( -1 ); 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.pub

39、lisher ) ); document.body.appendChild( elTable );這個簡單函數(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ù)調(diào)用這一技術，但我并不贊同將所有圖書數(shù)據(jù)都放入一個塊中。另一種方式是為每條記錄采用一個調(diào)用，如 清單 10 所示。清單

40、 10. Function2.jsAddBook( id: 1,name: Code Generation 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(

41、 book ); .這里更改了 XSLT，以使函數(shù)調(diào)用駐留在 for-each 循環(huán)體內(nèi)。清單 12 顯示了更新后的樣式表。清單 12. function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );.對這個給定示例來說，這種更改看起來有些隨意。但如果原始的 XML 數(shù)據(jù)集有多種數(shù)據(jù)類型，要為每種類型分配一個單獨的函數(shù)調(diào)用會使 XSL 和頁面上的 JavaScript 代碼更為簡單、更易于維護。編碼對象對小的頁面來講，使用 JavaScript 函數(shù)沒有問題。但對于大型項目，就需要使用 JavaScript 語言的一些面向?qū)ο筇匦?/p>

42、。是的，JavaScript 語言可以處理對象而且可以處理得很好。清單 13 顯示了如何創(chuàng)建帶有數(shù)據(jù)的對象。清單 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+ 編程語言的對象創(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 類的