基于WEB的遠(yuǎn)程控制

1、物理與電子工程學(xué)院設(shè)計(jì)實(shí)驗(yàn)報(bào)告PAGE PAGE 22 嵌入式系統(tǒng)設(shè)計(jì)設(shè)計(jì)性實(shí)驗(yàn)報(bào)告 題目 基于web的遠(yuǎn)程控制設(shè)計(jì) 系 別 年 級(jí) 專 業(yè) 班 級(jí) 學(xué) 號(hào) 學(xué)生姓名 指導(dǎo)教師 實(shí)驗(yàn)時(shí)間 目 錄 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、運(yùn)行環(huán)境： PAGEREF _Toc343166567 h 3 HYPERLINK l _Toc343166568 正 文 PAGEREF _Toc343166568 h 3 HYPERLINK l _Toc343166569 一、課題分析： PAGEREF _Toc343166569 h 3 HYPERLINK l _Toc343166570 二、實(shí)驗(yàn)原理： PAGEREF _Toc343166570 h 3 HYPERLINK l _Toc34316

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

4、 h 6 HYPERLINK l _Toc343166605 四、實(shí)驗(yàn)現(xiàn)象 PAGEREF _Toc343166605 h 6 HYPERLINK l _Toc343166606 五、實(shí)驗(yàn)注意點(diǎn)及問題 PAGEREF _Toc343166606 h 6 HYPERLINK l _Toc343166607 1、實(shí)驗(yàn)注意點(diǎn)： PAGEREF _Toc343166607 h 6 HYPERLINK l _Toc343166608 2、問題： PAGEREF _Toc343166608 h 6 HYPERLINK l _Toc343166609 總結(jié)體會(huì) 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 設(shè)計(jì)性實(shí)驗(yàn)報(bào)告成績： 指導(dǎo)教師簽名： PAGEREF _Toc343166734 h 11前 言隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)通信技術(shù)的飛速發(fā)展，人們?nèi)粘Ｉ詈凸I(yè)生產(chǎn)等方面對(duì)基于以太網(wǎng)進(jìn)行遠(yuǎn)程通信和控制的要求日益強(qiáng)烈?，F(xiàn)代實(shí)驗(yàn)設(shè)備由于其高度的精密和復(fù)雜性以及大量的信息獲取和處理要求,

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

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

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

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

10、，測試系統(tǒng)功能。系統(tǒng)設(shè)計(jì)：1、配置BOA 服務(wù)器：(1) 依照實(shí)驗(yàn)要求編譯BOA 服務(wù)器，并生成可執(zhí)行文件BOA，并且在開發(fā)板的/var的文件下建立實(shí)驗(yàn)所需的文件夾及文件?？截怋oa源碼目錄下已有的一個(gè)示例boa.conf，并在其基礎(chǔ)上進(jìn)行修改: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ù)制到開發(fā)板/var的文件夾下；(3)利用掛載功能將boa.conf文件復(fù)制到開發(fā)板/var的文件夾下。在/var下建立web_boa目錄等，根據(jù)boa.conf文件中的內(nèi)容相應(yīng)創(chuàng)建需要的目錄。另外，在虛擬機(jī)的/etc目錄下拷貝mime.types文件到開發(fā)板。將生成的執(zhí)行文件boa、pass.cgi及index.html文件傳到開發(fā)板指定目錄（boa.conf文件中指定）。（4）運(yùn)行boa文件 = 1 * GB3 * MERGEFORMAT up-t

13、ech: #cd /var = 2 * GB3 * MERGEFORMAT up-tech:/var#./boa = 3 * GB3 * MERGEFORMAT 打開瀏覽器輸入開發(fā)板的IP地址運(yùn)行程序2、CGI原理及程序設(shè)計(jì)與編寫（1）CGI程序編寫（詳細(xì)程序見附件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 在虛擬機(jī)的終端環(huán)境中打開文件所在的文件夾 = 2 * GB3 * MERGEFORMAT 輸入arm-linux-gcc -o pass.cgi pass.c3、網(wǎng)頁文件index.html設(shè)計(jì)（1）網(wǎng)頁（html文件）設(shè)計(jì)（見附件2）（

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

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

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

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

19、學(xué)習(xí)嵌入式的基礎(chǔ)，所以在學(xué)習(xí)時(shí)必須要踏踏實(shí)實(shí)，把地基給打好；最后要有良好的學(xué)習(xí)氛圍。嵌入式學(xué)習(xí)的難度和高度決定了嵌入式的學(xué)習(xí)要有個(gè)良好的學(xué)習(xí)討論氛圍，不能一味自己悶頭學(xué)，要多去討論和探討或是想老師尋求答案但自己一定要明白其中的道理，汲取大家的智慧才能更好的提高。在整個(gè)學(xué)期中，雖然嵌入式很難學(xué)習(xí)，很難掌握，但我還是挺喜歡嵌入式的，因?yàn)樗梢詭Ыo我許多接觸不到的事物，也漸漸習(xí)慣了看滿屏代碼的感覺。希望如果有機(jī)會(huì)還能對(duì)嵌入式有所學(xué)習(xí)。附件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燈的點(diǎn)亮關(guān)閉 /以下補(bǔ)充完善代碼 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遠(yuǎn)程控制 嵌入式LED遠(yuǎn)程控制系統(tǒng)亮燈位置012 設(shè)計(jì)性實(shí)驗(yàn)報(bào)告成績： 指導(dǎo)教師簽名： 附錄資料：從 XML 生成可與 Ajax 共同使用的 JSON時(shí)下，非常流行使用 JavaScript 代碼為數(shù)據(jù)驅(qū)動(dòng)的 Web 應(yīng)用程序添加互動(dòng)性。若能將數(shù)據(jù)編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過 JavaScript 語言使用它。通過本文，發(fā)掘使用 XSLT V2 從 XML 數(shù)據(jù)生成 JSON 的幾種不同方法。幾年前，許多開發(fā)

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

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

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

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

29、析。第二種方法是將日期作為一個(gè)對(duì)象，比如：publishdate: new Date( 2006, 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_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è)置為一個(gè)包含三個(gè)散列表的數(shù)組，每個(gè)散列表包含關(guān)于該書的信息。再回過頭來看看

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

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

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

34、種情況下從服務(wù)器獲得數(shù)據(jù)的惟一方法是通過動(dòng)態(tài)加載 標(biāo)記。獲悉 標(biāo)記何時(shí)加載的最好的方法是讓 標(biāo)記返回的腳本調(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 給出了相應(yīng)的 .html 文件。清單 7. Function1.htmlFunction 1 JS loadervar g_books = ;function AddBooks( books ) g_books = books; drawbooks( g_books );稍后將詳細(xì)介紹 drawbooks 函數(shù)。這里重要的是了解一下頁面如何定義 AddBooks 函數(shù)，該函數(shù)隨后會(huì)由 function1.js 文件中的腳本調(diào)用。該 AddBooks 函數(shù)負(fù)責(zé)處理數(shù)據(jù)。而且被調(diào)用的

36、 AddBooks 函數(shù)會(huì)向頁面指示 標(biāo)記被正確加載，并已加載完成。要?jiǎng)?chuàng)建 function1.js 文件，我只對(duì)樣式表稍微做了一點(diǎn)修改，如 清單 8 所示。清單 8. function1.xsl 樣式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );這里，我調(diào)用了一個(gè)函數(shù)，而不是簡單地設(shè)置一個(gè)變量。這就是我所做的惟一更改。回到頁面，我使用了 drawbooks 函數(shù)來構(gòu)建書的表格，這樣我就能夠確認(rèn)數(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 );這個(gè)簡單函數(shù)創(chuàng)建了一個(gè)表格節(jié)點(diǎn)，然后循環(huán)訪問書的列表并為每本書創(chuàng)建一行，為每個(gè)數(shù)據(jù)元素分配一個(gè)單元格。此頁面上的代碼的結(jié)果如 圖 2 所示。圖 2. function1.html 的結(jié)果現(xiàn)在我就可以查看一下此頁面的輸出并確認(rèn)來自原始 .xml 文件的一切均已被正確轉(zhuǎn)換成 JavaScript 代碼，且數(shù)據(jù)被發(fā)送到 AddData 函數(shù)并被正確添加到頁面。細(xì)化函數(shù)調(diào)用技術(shù)我很喜歡函數(shù)調(diào)用這一技術(shù)，但我并不贊同將所有圖書數(shù)據(jù)都放入一個(gè)塊中。另一種方式是為每條記錄采用一個(gè)調(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 );.對(duì) .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: );.對(duì)這個(gè)給定示例來說，這種更改看起來有些隨意。但如果原始的 XML 數(shù)據(jù)集有多種數(shù)據(jù)類型，要為每種類型分配一個(gè)單獨(dú)的函數(shù)調(diào)用會(huì)使 XSL 和頁面上的 JavaScript 代碼更為簡單、更易于維護(hù)。編碼對(duì)象對(duì)小的頁面來講，使用 JavaScript 函數(shù)沒有問題。但對(duì)于大型項(xiàng)目，就需要使用 JavaScript 語言的一些面向?qū)ο筇匦?/p>

42、。是的，JavaScript 語言可以處理對(duì)象而且可以處理得很好。清單 13 顯示了如何創(chuàng)建帶有數(shù)據(jù)的對(duì)象。清單 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 對(duì)象。JavaScript 的對(duì)象創(chuàng)建與 Java、C# 或 C+ 編程語言的對(duì)象創(chuàng)建十分相似。都是一個(gè) new 操作符后跟一個(gè)類名。參數(shù)放到隨后的括號(hào)內(nèi)。在本例中，我傳入了一個(gè)帶值的單一散列表，并將其分割成單獨(dú)的一些參數(shù)。創(chuàng)建此對(duì)象的代碼如 清單 14 所示。清單 14. Object1.xslg_books.push( new Book( id: ,name: ,first: ,last: ,publisher: ) );此頁面內(nèi)最值得注意的是定義 Book 類的