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

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

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

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

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

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

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

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

8、用 return 語(yǔ)句。返回值是可選的： function myFunction(a,b) if (ab) return; x=a+b 如果 a 大于 b，則上面的代碼將退出函數(shù)，并不會(huì)計(jì)算 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í)，我們會(huì)希望函數(shù)將值返回調(diào)用它的地方。這通過(guò)使用 return 語(yǔ)句就可以實(shí)現(xiàn)。在使用 return 語(yǔ)句時(shí)，函數(shù)會(huì)停止執(zhí)行，并返回指定的值。整個(gè) JavaScript 并不會(huì)停止執(zhí)行，僅僅是函數(shù)。JavaScript 將繼續(xù)執(zhí)行代碼，從調(diào)用函數(shù)的地方。 示例代碼： function myFunction() var x=5; return x; ,上面的函數(shù)會(huì)返回值 5。,JavaScript的對(duì)象,JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)字、數(shù)組、日期，等等。對(duì)象是擁有屬性和方法的數(shù)據(jù)。 屬性是與對(duì)象

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

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

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

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

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

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

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

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

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

19、要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值。 password：如果需要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值。 通常使用其中的前三個(gè)參數(shù)。事實(shí)上，即使需要異步連接，也應(yīng)該指定第三個(gè)參數(shù)為 “true”。這是默認(rèn)值，但堅(jiān)持明確指定請(qǐng)求是異步的還是同步的更容易理解。 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 后就可以配置請(qǐng)求了?？梢杂?XMLHttpRequest 對(duì)象的 open() 方法來(lái)完成。該方法有五個(gè)參數(shù)： request-type：發(fā)送請(qǐng)求的類型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請(qǐng)求。 url：要連接的 URL。 asynch：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認(rèn)為 true。 username：如果需要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值。 password：如果需要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值。 通常使用其中的

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

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

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

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

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

26、ar url = /cgi-local/lookupCustomer.php?phone= + escape(phone); 雖然可以使用 send() 發(fā)送數(shù)據(jù)，但也能通過(guò) URL 本身發(fā)送數(shù)據(jù)。事實(shí)上，GET 請(qǐng)求（在典型的 Ajax 應(yīng)用中大約占 80%）中，用 URL 發(fā)送數(shù)據(jù)要容易得多。如果需要發(fā)送安全信息或 XML，可能要考慮使用 send() 發(fā)送內(nèi)容。如果不需要通過(guò) 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)在我們所做的只有很少一點(diǎn)是新的、革命性的或異步的。必須承認(rèn)，open() 方法中 “true” 這個(gè)小小的關(guān)鍵字建立了異步請(qǐng)求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒(méi)有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一個(gè)簡(jiǎn)單屬

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

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

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

31、st 對(duì)象，特別是 onreadystatechange 屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因?yàn)榉?wù)器向網(wǎng)頁(yè)發(fā)起調(diào)用，無(wú)論網(wǎng)頁(yè)本身在做什么。比方說(shuō)，可能在用戶坐在椅子上手沒(méi)有碰鍵盤的時(shí)候調(diào)用該方法，但是也可能在用戶輸入、移動(dòng)鼠標(biāo)、滾動(dòng)屏幕或者點(diǎn)擊按鈕時(shí)調(diào)用該方法。它并不關(guān)心用戶在做什么。,了解異步調(diào)用,這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)請(qǐ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)，編寫(xiě)updatePage（）函數(shù)供服務(wù)器回調(diào)。 function updatePage() alert(Server is done!); ,使用成熟的框架產(chǎn)品進(jìn)行開(kāi)發(fā),JavaScript 本身就是一種功能強(qiáng)大的語(yǔ)言，您不需要額外的框架就可創(chuàng)建互

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

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

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

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

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

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