【正文】 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 Ajax編程技術(shù) 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 Ajax XHTML CSS JavaScript XML Ajax技術(shù) 結(jié)構(gòu)化 HTML XHTML語法 XHTML應(yīng)用實(shí)例 CSS 簡介 CSS選擇器與各種屬性 CSS應(yīng)用實(shí)例 基本語法 運(yùn)算符 控制語句 函數(shù) 事件處理 內(nèi)置對象 窗口中的對象和元素 JavaScript案例 XML基礎(chǔ) XML文檔結(jié)構(gòu) XML文檔解析 了解 DTD 了解 Schema SAX編程 DOM編程 Ajax介紹 Ajax概念 Ajax框架 Ajax示例演示 現(xiàn)狀與需要解決的問題 為什么使用 Ajax XMLHttpRequest簡介與創(chuàng)建該對象 Java Web技術(shù) (Servlert、 JSP、 Ajax應(yīng)用 ) DWR、 Dojo、 EXTJS、 Prototype等 Google Web Toolkit 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 Inter、 Web和 HTML Inter就是互聯(lián)網(wǎng)，是用于連接各個(gè)計(jì)算機(jī)平臺的網(wǎng)絡(luò)。 Inter本身可以提供多種網(wǎng)絡(luò)服務(wù)， Web就是其中的一種。 HTML是用來制作網(wǎng)頁的計(jì)算機(jī)語言，使用該語言可以制作用于瀏覽的網(wǎng)頁和網(wǎng)站。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 什么是 Web 從廣義上來說， Web是 World Wide Web的簡稱 (也可以簡稱為 “ W3”或 “ WWW”)。 Web服務(wù)是 Inter中的一個(gè)服務(wù)，只是這個(gè)服務(wù)實(shí)在是運(yùn)用得太廣了，以至于很多人都把 Web看成是 Inter了。 Web使用的是 HTTP即超文本傳輸協(xié)議，使用該協(xié)議可以將文檔中的不同部分或不同文檔之間用鏈接建立聯(lián)系，使信息可以用交互的方式進(jìn)行搜索。 Web也是一種超文本信息系統(tǒng)，可以從一個(gè)位置跳轉(zhuǎn)到另一個(gè)位置，即從一個(gè)網(wǎng)站跳轉(zhuǎn)到另一個(gè)網(wǎng)站。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 什么是網(wǎng)頁 網(wǎng)頁是用 HTML語言編寫的一種文件，將這種文件放在Web服務(wù)器上可以讓在互聯(lián)網(wǎng)上的其他用戶瀏覽。比如訪問百度網(wǎng)站，看到的就是百度網(wǎng)站所編寫的網(wǎng)頁。網(wǎng)頁也是通過 HTTP協(xié)議來傳遞給瀏覽者的。 網(wǎng)頁的表現(xiàn)形式很豐富，可以是文字，也可以是圖片，甚至可以將一些多媒體文件如音頻、視頻等插入到網(wǎng)頁里。 網(wǎng)站是網(wǎng)頁的集合，多個(gè)網(wǎng)頁可以共同組成一個(gè)網(wǎng)站。兩站的第一個(gè)網(wǎng)頁稱為首頁。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 什么是 HTML HTML(Hyper Text Markup Language)是超文本標(biāo)記語言，是用來編寫網(wǎng)頁的語言。雖然目前有很多種用來編寫交互性網(wǎng)站的語言，如 asp、 jsp、 php、 ，但是追根到底，用這些語言編寫出來的程序也是生成一個(gè)標(biāo)準(zhǔn)的 HTML網(wǎng)頁來傳遞給瀏覽者觀看。 HTML的功能 HTML語言是網(wǎng)頁的描述語言，可以把文字、圖片、音頻、視頻等多種文件集成到一個(gè)文件中，形成一個(gè)整體，這個(gè)文件就是上面所說的網(wǎng)頁。當(dāng)打開一個(gè)網(wǎng)頁時(shí)，看到的圖片、聽到的音頻，可能存放在計(jì)算機(jī)中不同目錄下的不同文件，但是都可以呈現(xiàn)在同一個(gè)網(wǎng)頁中。這就是描述語言的力量。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 HTML的組成 HTML是標(biāo)記性語言，是由眾多標(biāo)簽組成的，例如 “ b你好 /b”這幾個(gè)文字，在網(wǎng)頁上只會顯示 “ 你好 ” 兩個(gè)字，并且這兩個(gè)字將會顯示成為粗體。 “ b”與 “ /b”是一對標(biāo)簽，該標(biāo)簽的作用是將包含在其中的文字顯示為粗體，而標(biāo)簽本身在網(wǎng)頁上并不會顯示出來。 HTML語言就是由很多類似于這樣的標(biāo)簽組成的，學(xué)習(xí) HTML語言的過程也就是學(xué)習(xí)這些標(biāo)簽、了解這些標(biāo)簽的過程。 HTML也不是一成不變的，隨著網(wǎng)絡(luò)技術(shù)的發(fā)展， HTML自身也在發(fā)展，目前 HTML的最高版本是 HTML 。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 常用的瀏覽器 4. Firefox瀏覽器 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 第 1部分 (X)HTML語言 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 (X)HTML語言 HTML語言是 Web頁面的基礎(chǔ)，開發(fā)的 Web頁面最終要轉(zhuǎn)換為 HTML語言顯示在客戶端的瀏覽器上。 Script語言是可以運(yùn)行的腳本語言，可以彌補(bǔ)HTML語言不夠靈活的缺點(diǎn)，使得頁面更加豐富多彩，功能強(qiáng)大。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 第 1 章 (X)HTML基礎(chǔ) 基本標(biāo)記 1. (X)HTML標(biāo)記概述 HTML是超文本標(biāo)記語言 (Hyper Text Markup Language)的縮寫，可以滿足跨平臺的需要，使 Web頁面在各種系統(tǒng)上都能瀏覽。 HTML語言是一種描述文檔結(jié)構(gòu)的語言，可以指定 Web頁的外觀和布局；圖形放在什么地方，文本的外觀如何，單擊某個(gè)鏈接跳轉(zhuǎn)到哪些頁面等內(nèi)容。 HTML語言使用描述性的標(biāo)記符（稱為標(biāo)簽）來指明文檔的不同內(nèi)容，這些標(biāo)記用尖括號括起來使用特定的字符表示特定的含義，并且不區(qū)分大小寫。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 1. (X)HTML標(biāo)記概述 html head title 這是標(biāo)題部分 /title /head body p這是正文部分 !/p /body /html 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 使用 HTML標(biāo)簽的注意事項(xiàng)： 因?yàn)?HTML是標(biāo)記性語言，所以 HTML是由眾多標(biāo)簽組成的，學(xué)習(xí) HTML語言也就是學(xué)習(xí)這些標(biāo)簽及其代表的含義的過程。下面先講一下使用 HTML標(biāo)簽的注意事項(xiàng)： (1)標(biāo)簽都是以“ ” 開始，以“ ” 結(jié)束的字符串，在“ ” 與“ ”之間是 HTML的元素及其屬性。 HTML元素的屬性在后面介紹。并不是每個(gè)元素都會包含屬性，如“ b” 標(biāo)簽與“ br” 標(biāo)簽里的元素都是不包含屬性的。 (2)標(biāo)簽里包含的必須是 HTML語言中的有效元素，如果在“ ” 與“ ”之間包含的不是 HTML的元素，那么“ ” 與“ ” 之間的文字將會被忽略。例如，以下代碼： b你好 /b，晚上好 !thanks謝謝 ,我很好。 /thanks 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 (3)大多數(shù)標(biāo)簽都是成對出現(xiàn)的，如上面的“ b” 標(biāo)簽與“ b” 標(biāo)簽就是一對標(biāo)簽，其中“ b” 標(biāo)簽是開始標(biāo)簽，“ /b” 標(biāo)簽是結(jié)束標(biāo)簽。結(jié)束標(biāo)簽里只包含 HTML元素，不包含元素的屬性，并且在元素之前要增加一個(gè)“ /” 符號。并不是所有標(biāo)簽都是成對出現(xiàn)的，例如“ br” 標(biāo)簽就沒有結(jié)束標(biāo)簽，其含義為“換行”。 (4)包含在開始標(biāo)簽與結(jié)束標(biāo)簽之間的文本才是受標(biāo)簽元素影響的文本。如，“ b” 標(biāo)簽的意思是加粗字體，那么只有包含在“ b” 標(biāo)簽與“ /b” 標(biāo)簽之間的文字才會被加粗， 在“ B” 標(biāo)簽與“ /b”標(biāo)簽之外的文字，不受“ b” 標(biāo)簽與“ /b” 標(biāo)簽的影響。 (5)HTML語言中的標(biāo)簽不區(qū)分大小寫，“ b” 標(biāo)簽與“ b” 標(biāo)簽是同一個(gè)標(biāo)簽。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 元素的屬性 在 HTML里有很多元素都是有屬性的，它們可以為包含在其中的文本提供多種選項(xiàng)，如下面的代碼： font color=red你好 /font晚上好 ! br font size=5謝謝 /font,font color=blue size=7我很好 /font 在上面的例子里有一個(gè)這樣的標(biāo)簽 :“font color=red” ，在這個(gè)標(biāo)簽里，“ font” 是 HTML的元素，用于設(shè)定字體屬性；color是 font元素的屬性； red是 color的屬性值，也就是紅色。 在使用元素的屬性時(shí)有以下幾點(diǎn)是值得注意的： (1)元素與元素屬性必須放在同一個(gè)標(biāo)簽里，也就是說，元素屬性與元素都必須放在同一個(gè)“ ” 與“ ” 符號之內(nèi)。以下代碼是不正確的： fontcolor=red你好 /font 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 元素的屬性 (2)元素與元素屬性之間必須用空格分開，以下代碼是不正確的： fontcolor=red你好 /font (3)元素的屬性值可以用“ ”或“ 39?！薄ㄆ饋恚部梢圆挥?。以下 3行代碼的運(yùn)行結(jié)果是一樣的： font color=red font color=39。red39。 font color=red (4)如果元素的屬性值中含有空格，必須用“ ”或“ 39?！崩ㄆ饋?。例如，以下兩行代碼的運(yùn)行結(jié)果是不一樣的： a href=39。39。 title=this is my html a href= title=this is my html 以上代碼里，第一行標(biāo)簽里的 title屬性的值為 this is my html，而第二行標(biāo)簽里的 title 屬性的值為 this。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 元素的屬性 (5)一個(gè)標(biāo)簽里只能包含一個(gè) HTML元素，但是一個(gè)標(biāo)簽里可以包含多個(gè) HTML元素的屬性，多個(gè)元素屬性之間用空格隔開。 在上面例子里的 font color=blue size=7標(biāo)簽里， color與 size都是 font元素的屬性，它們可以同時(shí)出現(xiàn)在同一個(gè)標(biāo)簽里。其中 size 屬性指定文字大小，其值可以為 17。由于在 font元素里同時(shí)指定了 color 與 size屬性，所以包含在 font color=blue size=7標(biāo)簽與 /font標(biāo)簽里的文字既是藍(lán)色又是 7號大小的字。 (6)元素的屬性也是不區(qū)分大小寫，以下幾行代碼的運(yùn)行結(jié)果是相同的： font color=red font COLOR=red font color=RED 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 元素的屬性 (7)當(dāng)輸入的屬性不屬于標(biāo)簽內(nèi)的元素時(shí)，瀏覽器將會忽略該屬性，例如以下代碼： 這是一行普通文字 br a href= size=7這是一個(gè)超級鏈接 /a 雖然在“ a”元素里指定了“ size”屬性，但是因?yàn)椤?size”屬性屬于“ font”元素而并不屬于“ a”元素，所以瀏覽器會將該屬性忽略。 注意：在 HTML里有很多標(biāo)簽的屬性都是通用的，例如 TITLE屬性在大多 html元素里都可以使用。 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 HTML 控制標(biāo)記的格式 (1) 標(biāo)記名稱 單一型 , 無設(shè)置值的。 如： br (2) 標(biāo)記名稱屬性 =屬性值 單一型，有設(shè)置值的。如 ： hr width=80% (3) 標(biāo)記名稱 …/ 標(biāo)記名稱 對稱型，無設(shè)置值。 如： title…/title (4) 標(biāo)記名稱屬性 =“屬性值” …/ 標(biāo)記名稱 對稱型，有設(shè)置值。 如： body bgcolor=“red”… /body font size= “7”… /font 數(shù)學(xué)與計(jì)算機(jī)科學(xué)技術(shù)學(xué)院 空格與特殊字符 HTML中的空格與“ ”、“ ”、“ ”等字符都是比較特殊的字符，這些字符在 HTML的源碼里需要特別處理。 (1)空格的處理 現(xiàn)在常用的瀏覽器通常都會忽略 HTML文檔中標(biāo)簽之外的空格。以 IE ，它會把兩個(gè)連續(xù)標(biāo)簽之間的多個(gè)連續(xù)空格當(dāng)作一個(gè)空格來顯示，而如果不是連續(xù)標(biāo)簽之間的多個(gè)連續(xù)空格則不顯示，請看以下代碼：