任務(wù)6_動態(tài)腳本開發(fā).ppt

1、任務(wù)6 動態(tài)腳本開發(fā),計算機部 劉冰玲,前 言,之前的任務(wù)中，雖然我們可以通過Flash為靜態(tài)頁面加上動畫效果，但是Flash開發(fā)的代價以及運行時消耗的資源還是很可觀的。我們?nèi)绻爰尤敫嗟呐c用戶間的互動效果，僅靠Flash是不夠的。為此，我們引入了頁面的腳本語言，一般來說是JavaScript。并且引入AJAX的概念來異步的處理用戶的請求。這樣可以在用戶不用傻傻等待的情況下，為用戶提供所需要的功能，提供了更好的用戶體驗。 本章節(jié)適用于WEB開發(fā)中的用戶體驗工程師或者前端的軟件開發(fā)工程師閱讀。,任務(wù)描述,1.通過閱讀資訊單、案例單、信息單等，并進行相關(guān)資料查找，完成過程記錄相應(yīng)表格填寫 2.編

2、寫酒店查詢頁面的日期選擇控件的JavaScript代碼,知識鏈接,隨著互聯(lián)網(wǎng)的發(fā)展，WEB應(yīng)用的后臺邏輯越來越復(fù)雜。往往用戶要等待服務(wù)器處理完一個請求并返回，需要越來越長的時間。為了解決這個問題，工程師們想出了講一部分計算工作放在客戶端的處理方法，這樣可以充分利用客戶端資源，以減少用戶等待的時間，提供給用戶更好的用戶體驗。 由此而生的Javascript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭討B(tài)類型的區(qū)分大小寫的客戶端腳本語言。在Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一

3、就是“看上去像Java”1，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計原則源自Self和Scheme。 一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）（如圖）。,JavaScript是一個運行于瀏覽器的解釋性語言，所以它就要以適當(dāng)?shù)男问角度朐贖TML/XHTML中。通常是用以下方式來完成的： 內(nèi)嵌的js代碼段，這種情況下多為不可重用，或頁面打開時就要加載的

4、大量代碼. /.javascript段 直接引用.js文件，這種情況多為已經(jīng)可以通用的函數(shù)或類，將之放在一個文件里，使凡用到它的頁面都可以使用 HTML標簽內(nèi)調(diào)用JavaScript，用于較少代碼較簡單功能的使用，或函數(shù)的調(diào)用，可以在onclick/onload/onkeypress/onkeydown等事件中。 ,JavaScript語法,JavaScript的變量,如何在頁面中添加JavaScript腳本？, JavaScript語法結(jié)構(gòu) 編寫的腳本代碼 .頁面內(nèi)容代碼 ,腳本代碼必須包含在標簽之間,指定腳本所使用的語言,JavaScript的變量,var name; name=“孫悟空”

5、; var name=“孫悟空”; var name,age,sex;,聲明變量時直接賦值,聲明變量,變量賦值,聲明多個變量,JavaScript的函數(shù),函數(shù)就是包裹在花括號中的代碼塊，前面使用了關(guān)鍵詞 function： function functionname() 這里是要執(zhí)行的代碼 當(dāng)調(diào)用該函數(shù)時，會執(zhí)行函數(shù)內(nèi)的代碼。 可以在某事件發(fā)生時直接調(diào)用函數(shù)（比如當(dāng)用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調(diào)用。JavaScript 對大小寫敏感。關(guān)鍵詞 function 必須是小寫的，并且必須以與函數(shù)名稱相同的大小寫來調(diào)用函數(shù)。,示例代碼,點擊這里 function m

6、yFunction(name,job) alert(Welcome + name + , the + job); ,上面的函數(shù)會當(dāng)按鈕被點擊時提示 Welcome Bill Gates, the CEO。,示例代碼,示例代碼： 點擊這里 點擊這里 根據(jù)您點擊的不同的按鈕，上面的例子會提示 Welcome Harry Potter, the Wizard 或 Welcome Bob, the Builder。,函數(shù)很靈活，您可以使用不同的參數(shù)來調(diào)用該函數(shù)，這樣就會給出不同的消息,示例代碼,有時，我們會希望函數(shù)將值返回調(diào)用它的地方。這通過使用 return 語句就可以實現(xiàn)。在使用 return 語

7、句時，函數(shù)會停止執(zhí)行，并返回指定的值。整個 JavaScript 并不會停止執(zhí)行，僅僅是函數(shù)。JavaScript 將繼續(xù)執(zhí)行代碼，從調(diào)用函數(shù)的地方。 示例代碼： function myFunction() var x=5; return x; ,上面的函數(shù)會返回值 5。,示例代碼,示例代碼： 計算兩個數(shù)字的乘積，并返回結(jié)果： function myFunction(a,b) return a*b; document.getElementById(demo).innerHTML=myFunction(4,3); demo 元素的 innerHTML 將是：12 在您僅僅希望退出函數(shù)時 ，也可使

8、用 return 語句。返回值是可選的： function myFunction(a,b) if (ab) return; x=a+b 如果 a 大于 b，則上面的代碼將退出函數(shù)，并不會計算 a 和 b 的總和。,函數(shù)調(diào)用將被返回值取代： var myVar=myFunction(); myVar 變量的值是 5，也就是函數(shù) myFunction() 所返回的值。 即使不把它保存為變量，您也可以使用返回值： document.getElementById(demo).innerHTML=myFunction(); demo 元素的 innerHTML 將成為 5，也就是函數(shù) myFunctio

9、n() 所返回的值。 您可以使返回值基于傳遞到函數(shù)中的參數(shù)：,示例代碼,有時，我們會希望函數(shù)將值返回調(diào)用它的地方。這通過使用 return 語句就可以實現(xiàn)。在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值。整個 JavaScript 并不會停止執(zhí)行，僅僅是函數(shù)。JavaScript 將繼續(xù)執(zhí)行代碼，從調(diào)用函數(shù)的地方。 示例代碼： function myFunction() var x=5; return x; ,上面的函數(shù)會返回值 5。,JavaScript的對象,JavaScript 中的所有事物都是對象：字符串、數(shù)字、數(shù)組、日期，等等。對象是擁有屬性和方法的數(shù)據(jù)。 屬性是與對象

10、相關(guān)的值。方法是能夠在對象上執(zhí)行的動作。在面向?qū)ο蟮恼Z言中，屬性和方法常被稱為對象的成員。,舉例：汽車就是現(xiàn)實生活中的對象。 汽車的屬性： =Fiat car.model=500 car.weight=850kg car.color=white 汽車的方法： car.start() car.drive() car.brake() 汽車的屬性包括名稱、型號、重量、顏色等。所有汽車都有這些屬性，但是每款車的屬性都不盡相同。汽車的方法可以是啟動、駕駛、剎車等。所有汽車都擁有這些方法，但是它們被執(zhí)行的時間都不盡相同。,JavaScript的函數(shù),當(dāng)您像這樣聲明一個 JavaScript

11、 變量時： var txt = Hello; 您實際上已經(jīng)創(chuàng)建了一個 JavaScript 字符串對象。字符串對象擁有內(nèi)建的屬性 length。對于上面的字符串來說，length 的值是 5。字符串對象同時擁有若干個內(nèi)建的方法。 屬性： txt.length=5 方法： txt.indexOf() txt.replace() txt.search() 根據(jù)需要，在JavaScript中可以創(chuàng)建自己的對象。下面例子創(chuàng)建名為 person 的對象，并為其添加了四個屬性。,AJAX,AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJ

12、AX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。 Web應(yīng)用的交互如Flickr和Google在這方面已經(jīng)有質(zhì)的飛躍。這個術(shù)語源自描述從基于Web的應(yīng)用到基于數(shù)據(jù)的應(yīng)用的轉(zhuǎn)換。在基于數(shù)據(jù)的應(yīng)用中，用戶需求的數(shù)據(jù)如聯(lián)系人列表，可以從獨立于實際網(wǎng)頁的服務(wù)端取得并且可以被動態(tài)地寫入網(wǎng)頁中，給緩慢的Web應(yīng)用體驗著色使之像桌面應(yīng)用一樣。 Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以

13、使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。 AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務(wù)器請求少量的信息，而不是整個頁面。所以AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。 AJAX 是一種獨立于Web服務(wù)器軟件的瀏覽器技術(shù)。AJAX 基于下列Web標準：JavaScript，XML，XHTML，CSS。在 AJAX 中使用的Web標準都已被良好定義，并被所有的主流瀏覽器支持，所以AJAX 應(yīng)用程序獨立于瀏覽器和平臺。,認識JavaScript事件,JavaScript中常用的鼠標事件有哪些？,前 言, functi

14、on changetext(id) id.innerHTML=謝謝!; 請點擊該文本 ,在下面的例子中，當(dāng)用戶在 元素上點擊時，會改變其內(nèi)容： 請點擊該文本 在下面的例子中，我們將從事件處理器調(diào)用一個函數(shù)：,有以下方法可以為HTML元素分配事件：,可以使用事件屬性。例如，向 button 元素分配 onclick 事件： 點擊這里 在上面的例子中，名為 displayDate 的函數(shù)將在按鈕被點擊時執(zhí)行。 通過HTML DOM來向 HTML 元素分配事件，例如，向 button 元素分配 onclick 事件： document.getElementById(myBtn).onclick=fu

15、nction()displayDate(); 在上面的例子中，名為 displayDate 的函數(shù)被分配給 id=myButn 的 HTML 元素。當(dāng)按鈕被點擊時，會執(zhí)行該函數(shù)。,了解異步調(diào)用,多數(shù) Web 應(yīng)用程序都使用請求/響應(yīng)模型從服務(wù)器上獲得完整的 HTML 頁面。常常是點擊一個按鈕，等待服務(wù)器響應(yīng)，再點擊另一個按鈕，然后再等待，這樣一個反復(fù)的過程。有了 Ajax 和 XMLHttpRequest 對象，就可以使用不必讓用戶等待服務(wù)器響應(yīng)的請求/響應(yīng)模型了。 要實現(xiàn)異步的請求，必須非常熟悉一個 JavaScript 對象，即 XMLHttpRequest。下面是該對象的幾個方法和屬性。

16、 open()：建立到服務(wù)器的新請求。 send()：向服務(wù)器發(fā)送請求。 abort()：退出當(dāng)前請求。 readyState：提供當(dāng)前 HTML 的就緒狀態(tài)。 responseText：服務(wù)器返回的請求響應(yīng)文本。,了解異步調(diào)用,首先需要創(chuàng)建一個新變量并賦給它一個 XMLHttpRequest 對象實例。這在 JavaScript 中很簡單，只要對該對象名使用 new 關(guān)鍵字即可，如下面所示。 var request = new XMLHttpRequest(); 得到請求對象之后就可以進入請求/響應(yīng)循環(huán)了。記住，XMLHttpRequest 惟一的目的是讓您發(fā)送請求和接收響應(yīng)。其他一切都是

17、JavaScript、CSS 或頁面中其他代碼的工作：改變用戶界面、切換圖像、解釋服務(wù)器返回的數(shù)據(jù)。準備好 XMLHttpRequest 之后，就可以向服務(wù)器發(fā)送請求了。,了解異步調(diào)用,接著要確定連接的服務(wù)器的 URL。這并不是 Ajax 的特殊要求，但仍然是建立連接所必需的。多數(shù)應(yīng)用程序中都會結(jié)合一些靜態(tài)數(shù)據(jù)和用戶處理的表單中的數(shù)據(jù)來構(gòu)造該 URL。例如： function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?ph

18、one= + escape(phone); 代碼創(chuàng)建了一個新變量 phone，并把 ID 為 “phone” 的表單字段的值賦給它。 Enter your phone number: ,了解異步調(diào)用,有了要連接的 URL 后就可以配置請求了?？梢杂?XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數(shù)： request-type：發(fā)送請求的類型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請求。 url：要連接的 URL。 asynch：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認為 true。 username：如果需

19、要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值。 password：如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值。 通常使用其中的前三個參數(shù)。事實上，即使需要異步連接，也應(yīng)該指定第三個參數(shù)為 “true”。這是默認值，但堅持明確指定請求是異步的還是同步的更容易理解。 function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(G

20、ET, url, true); ,了解異步調(diào)用,有了要連接的 URL 后就可以配置請求了?？梢杂?XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數(shù)： request-type：發(fā)送請求的類型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請求。 url：要連接的 URL。 asynch：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認為 true。 username：如果需要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值。 password：如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值。 通常使用其中的

21、前三個參數(shù)。事實上，即使需要異步連接，也應(yīng)該指定第三個參數(shù)為 “true”。這是默認值，但堅持明確指定請求是異步的還是同步的更容易理解。 function getCustomerInfo() var phone = document.getElementById(phone).value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); ,了解異步調(diào)用,在一般的請求/響應(yīng)模型中，比如 Web 1.0，客戶機（瀏覽器或者本地機器上運行的代碼）向服務(wù)器發(fā)出請求

22、。該請求是同步的，換句話說，客戶機等待服務(wù)器的響應(yīng)。當(dāng)客戶機等待的時候，至少會用某種形式通知您在等待： 沙漏（特別是 Windows 上）。 旋轉(zhuǎn)的皮球（通常在 Mac 機器上）。 應(yīng)用程序基本上凍結(jié)了，然后過一段時間光標變化了。 這正是 Web 應(yīng)用程序讓人感到笨拙或緩慢的原因 缺乏真正的交互性。按下按鈕時，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請求得到響應(yīng)。如果請求需要大量服務(wù)器處理，那么等待的時間可能很長（至少在這個多處理器、DSL 沒有等待的世界中是如此）。 而異步請求不等待服務(wù)器響應(yīng)。發(fā)送請求后應(yīng)用程序繼續(xù)運行。用戶仍然可以在 Web 表單中輸入數(shù)據(jù)，甚至離開表單。沒有旋轉(zhuǎn)的皮球

23、或者沙漏，應(yīng)用程序也沒有明顯的凍結(jié)。服務(wù)器悄悄地響應(yīng)請求，完成后告訴原來的請求者工作已經(jīng)結(jié)束（具體的辦法很快就會看到）。結(jié)果是，應(yīng)用程序感覺不 那么遲鈍或者緩慢，而是響應(yīng)迅速、交互性強，感覺快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設(shè)計范型都不能克服緩慢、同步的請求/響應(yīng)模型。 所以open函數(shù)的最后一個參數(shù)（asynch）是極其重要的，我們需要用它來聲明我們的請求是異步的。,了解異步調(diào)用,在一般的請求/響應(yīng)模型中，比如 Web 1.0，客戶機（瀏覽器或者本地機器上運行的代碼）向服務(wù)器發(fā)出請求。該請求是同步的，換句話說，客戶機等待服務(wù)

24、器的響應(yīng)。當(dāng)客戶機等待的時候，至少會用某種形式通知您在等待： 沙漏（特別是 Windows 上）。 旋轉(zhuǎn)的皮球（通常在 Mac 機器上）。 應(yīng)用程序基本上凍結(jié)了，然后過一段時間光標變化了。 這正是 Web 應(yīng)用程序讓人感到笨拙或緩慢的原因 缺乏真正的交互性。按下按鈕時，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請求得到響應(yīng)。如果請求需要大量服務(wù)器處理，那么等待的時間可能很長（至少在這個多處理器、DSL 沒有等待的世界中是如此）。 而異步請求不等待服務(wù)器響應(yīng)。發(fā)送請求后應(yīng)用程序繼續(xù)運行。用戶仍然可以在 Web 表單中輸入數(shù)據(jù)，甚至離開表單。沒有旋轉(zhuǎn)的皮球或者沙漏，應(yīng)用程序也沒有明顯的凍結(jié)。服務(wù)器

25、悄悄地響應(yīng)請求，完成后告訴原來的請求者工作已經(jīng)結(jié)束（具體的辦法很快就會看到）。結(jié)果是，應(yīng)用程序感覺不 那么遲鈍或者緩慢，而是響應(yīng)迅速、交互性強，感覺快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設(shè)計范型都不能克服緩慢、同步的請求/響應(yīng)模型。 所以open函數(shù)的最后一個參數(shù)（asynch）是極其重要的，我們需要用它來聲明我們的請求是異步的。,了解異步調(diào)用,一旦用 open() 配置好之后，就可以發(fā)送請求了。發(fā)送請求的方法send() 只有一個參數(shù)，就是要發(fā)送的內(nèi)容。但是在考慮這個方法之前，回想一下前面已經(jīng)通過 URL 本身發(fā)送過數(shù)據(jù)了： v

26、ar url = /cgi-local/lookupCustomer.php?phone= + escape(phone); 雖然可以使用 send() 發(fā)送數(shù)據(jù)，但也能通過 URL 本身發(fā)送數(shù)據(jù)。事實上，GET 請求（在典型的 Ajax 應(yīng)用中大約占 80%）中，用 URL 發(fā)送數(shù)據(jù)要容易得多。如果需要發(fā)送安全信息或 XML，可能要考慮使用 send() 發(fā)送內(nèi)容。如果不需要通過 send() 傳遞數(shù)據(jù)，則只要傳遞 null 作為該方法的參數(shù)即可。 function getCustomerInfo() var phone = document.getElementById(phone).va

27、lue; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); request.send(null); ,了解異步調(diào)用,現(xiàn)在我們所做的只有很少一點是新的、革命性的或異步的。必須承認，open() 方法中 “true” 這個小小的關(guān)鍵字建立了異步請求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一個簡單屬

28、性 onreadystatechange。 因為是異步請求，所以 JavaScript 方法不會等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會等待服務(wù)器。 對于現(xiàn)在的代碼來說，服務(wù)器完成了請求之后什么也不會做。因此服務(wù)器在完成通過 XMLHttpRequest 發(fā)送給它的請求處理之后需要某種指示說明怎么做。 onreadystatechange 屬性允許指定一個回調(diào)函數(shù)?；卣{(diào)允許服務(wù)器反向調(diào)用 Web 頁面中的代碼。它也給了服務(wù)器一定程度的控制權(quán)，當(dāng)服務(wù)器完成請求之后，會查看 XMLHttpRequest 對象，特別是 onready

29、statechange 屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因為服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身在做什么。比方說，可能在用戶坐在椅子上手沒有碰鍵盤的時候調(diào)用該方法，但是也可能在用戶輸入、移動鼠標、滾動屏幕或者點擊按鈕時調(diào)用該方法。它并不關(guān)心用戶在做什么。,了解異步調(diào)用,現(xiàn)在我們所做的只有很少一點是新的、革命性的或異步的。必須承認，open() 方法中 “true” 這個小小的關(guān)鍵字建立了異步請求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLH

30、ttpRequest 的一個簡單屬性 onreadystatechange。 因為是異步請求，所以 JavaScript 方法不會等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會等待服務(wù)器。 對于現(xiàn)在的代碼來說，服務(wù)器完成了請求之后什么也不會做。因此服務(wù)器在完成通過 XMLHttpRequest 發(fā)送給它的請求處理之后需要某種指示說明怎么做。 onreadystatechange 屬性允許指定一個回調(diào)函數(shù)?；卣{(diào)允許服務(wù)器反向調(diào)用 Web 頁面中的代碼。它也給了服務(wù)器一定程度的控制權(quán)，當(dāng)服務(wù)器完成請求之后，會查看 XMLHttpReque

31、st 對象，特別是 onreadystatechange 屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因為服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身在做什么。比方說，可能在用戶坐在椅子上手沒有碰鍵盤的時候調(diào)用該方法，但是也可能在用戶輸入、移動鼠標、滾動屏幕或者點擊按鈕時調(diào)用該方法。它并不關(guān)心用戶在做什么。,了解異步調(diào)用,這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)請求并觸發(fā) onreadystatechange 屬性指定的回調(diào)方法。 function getCustomerInfo() var phone = document.getElementById(phone)

32、.value; var url = /cgi-local/lookupCustomer.php?phone= + escape(phone); request.open(GET, url, true); request.onreadystatechange = updatePage; request.send(null); 最后就是處理服務(wù)器的響應(yīng)，編寫updatePage（）函數(shù)供服務(wù)器回調(diào)。 function updatePage() alert(Server is done!); ,使用成熟的框架產(chǎn)品進行開發(fā),JavaScript 本身就是一種功能強大的語言，您不需要額外的框架就可創(chuàng)建互

33、聯(lián)網(wǎng)富客戶端應(yīng)用程序（RIA，Rich Client Application）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多個 Web 瀏覽器產(chǎn)生的復(fù)雜性。與 HTML 和 CSS一樣，不同的瀏覽器有不同的 JavaScript 實現(xiàn)。讓 JavaScript 代碼實現(xiàn)跨瀏覽器兼容簡直是個噩夢。 JavaScript 框架或庫是一組能輕松生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數(shù)。每一個庫都在眾多流行的 Web 瀏覽器的現(xiàn)代版本上進行了可靠的測試，因此，您可以放心地使用這些框架，您的基于 JavaScript 的 RIA 將會在不同瀏覽器和平臺上以類似的方

34、式工作。,使用成熟的框架產(chǎn)品進行開發(fā),JavaScript 本身就是一種功能強大的語言，您不需要額外的框架就可創(chuàng)建互聯(lián)網(wǎng)富客戶端應(yīng)用程序（RIA，Rich Client Application）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多個 Web 瀏覽器產(chǎn)生的復(fù)雜性。與 HTML 和 CSS一樣，不同的瀏覽器有不同的 JavaScript 實現(xiàn)。讓 JavaScript 代碼實現(xiàn)跨瀏覽器兼容簡直是個噩夢。 JavaScript 框架或庫是一組能輕松生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數(shù)。每一個庫都在眾多流行的 Web 瀏覽器的現(xiàn)代版本上進行了可靠的

35、測試，因此，您可以放心地使用這些框架，您的基于 JavaScript 的 RIA 將會在不同瀏覽器和平臺上以類似的方式工作。,使用成熟的框架產(chǎn)品進行開發(fā),除了解決跨瀏覽器問題，使用 JavaScript 框架可以更容易地編寫檢索、遍歷、操作 DOM 元素的代碼。它們不僅提供獲取 DOM 元素引用的快捷函數(shù)，而且還允許 DOM 遍歷函數(shù)以鏈方式查找任意深度的父元素、子元素、兄弟元素。最后，框架還提供一系列函數(shù)來更輕松地操作這些對象，可以改變、添加或刪除內(nèi)容本身；或者使用 CSS 樣式類來改變元素的外觀。 框架的另一重要特性是其改進的事件處理支持。由于不同瀏覽器的實現(xiàn)方式各不相同，跨瀏覽器事件處理

36、將會非常艱難。因此 JavaScript 框架通常封裝瀏覽器事件，并提供一組有用的跨瀏覽器兼容的函數(shù)來進行處理。有些框架還會提供一組標準鍵盤代碼來表示基于鍵盤的事件（如按下 Escape 鍵、Return 鍵、光標鍵，等等）。 所有這些特性都非常有用，但 JavaScript 框架還可以支持 Ajax。與 JavaScript 的其他許多方面一樣，每個 Web 瀏覽器往往以不同方式支持 Ajax，這使得以一種在所有 Web 瀏覽器中都受支持的方式處理 Ajax 變得十分復(fù)雜。幾乎所有 JavaScript 框架都包含某種形式的 Ajax 庫支持，通常提供 Ajax 請求和響應(yīng)對象，以及用于評價

37、響應(yīng)、更新 DOM 元素、查詢特定請求的幫助函數(shù)（helper）。,使用成熟的框架產(chǎn)品進行開發(fā),目前流行的框架非常多，其中比較典型的有JQuery和ExtJS兩種。前者是應(yīng)用最廣泛的開源框架，后者是很優(yōu)秀的一款商業(yè)軟件。 大多數(shù) JavaScript 框架都具備的有用特性。包括： 選擇器（Selector） DOM 遍歷 DOM 操作 實用（Utility）函數(shù) 事件處理 Ajax 使用 JavaScript 框架的一個有說服力的理由是標準化的跨瀏覽器 Ajax 請求。Ajax 請求是一個異步 HTTP 請求，通常發(fā)送給服務(wù)器端腳本，后者返回 XML、JSON、HTML 或普通文本格式的響應(yīng)。

38、大多數(shù) JavaScript 框架都有某種形式的 Ajax 對象，以及一個以參數(shù)形式接受一組選項的請求方法。這些選項通常包含 callback 函數(shù)，當(dāng)腳本一接收到來自 Web 服務(wù)器的響應(yīng)時，就會調(diào)用此函數(shù)。讓我們看一下 ExtJS和JQuery中的 Ajax 請求的樣子。 首先，看一下典型的 ExtJS Ajax 請求。,Ext.Ajax.request( url: server_script.php, params: name1: value1, name2: value2 , method: POST, success: function() alert(Your data has been saved.); );,使用成