AJAX技術(shù)入門PPT課件

1、提綱,走進AJAX AJAX的思維方式 AJAX的技術(shù)核心 AJAX應(yīng)用實例 AJAX的優(yōu)缺點 AJAX開發(fā)工具,第1頁/共187頁,走進AJAX,Jesse James Garrett 2005年的2月 Ajax: A New Approach to Web Applications XML,A J A X,synchronous,avaScript,nd,ML,第2頁/共187頁,走進AJAX,(1)使用XHTML和CSS的基于標準的表示技術(shù) (2)使用DOM進行動態(tài)顯示和交互 (3)使用XML和XSLT進行數(shù)據(jù)交換和處理 (4)使用XMLHttpRequest進行異步數(shù)據(jù)檢索 (5)使用

2、Javascript將以上技術(shù)融合在一起,老技術(shù)，新思想,第3頁/共187頁,走進AJAX,第4頁/共187頁,走進AJAX,GOOGLE,第5頁/共187頁,走進AJAX,GOOGLE,第6頁/共187頁,走進AJAX,Microsoft Yahoo！ Amazone Baidu 163 Sina Sohu 。,第7頁/共187頁,走進AJAX,(1)改善表單驗證方式，不再需要打開新頁面，也不再需要將整個頁面數(shù)據(jù)提交 (2)不需刷新頁面就可改變頁面內(nèi)容，減少用戶等待時間 。 (3)按需獲取數(shù)據(jù)，每次只從服務(wù)器端獲取需要的數(shù)據(jù) 。 (4)讀取外部數(shù)據(jù)，進行數(shù)據(jù)處理整合 。 (5)異步與服務(wù)器進

3、行交互，在交互過程中用戶無需等待，仍可繼續(xù)操作,第8頁/共187頁,提綱：,走進AJAX AJAX的思維方式 AJAX的技術(shù)核心 AJAX應(yīng)用實例 AJAX的優(yōu)缺點 AJAX開發(fā)工具,第9頁/共187頁,AJAX思維方式：,我們就通過用戶名校驗這個簡單的例子來看看傳統(tǒng)Web應(yīng)用和AJAX應(yīng)用開發(fā)思維的不同之處。 這個最簡單的例子需求如下：用戶在頁面的文本框中輸入想注冊的用戶名，然后點擊校驗按鈕，如果輸入的用戶名為“wangxingkui”，則提示用戶名已經(jīng)存在，請重新輸入，否則提示用戶名尚未存在，可以使用此用戶名進行注冊。,第10頁/共187頁,AJAX思維方式：,問題分析： 對于校驗用戶名的

4、需求，我們需要一個html頁面和一個servlet程序。Html頁面中包含文本框和提交按鈕，他們位于一個form表單中，這個表單將請求提交給servlet程序，servlet程序判斷當前的用戶名是否是“wangxingkui”，并給出相應(yīng)的提示，同時servlet中還生成一個鏈接，用于返回html頁面。,第11頁/共187頁,AJAX思維方式：,第12頁/共187頁,AJAX思維方式：,從這個例子我們可以看到，傳統(tǒng)Web開發(fā)思維模式的一個特點是通過form表單提交請求信息，然后轉(zhuǎn)向一個新的頁面處理請求，并顯示服務(wù)器端返回的信息。 你可以嘗試運行一下這些代碼，你會發(fā)現(xiàn)作為用戶的你經(jīng)歷了：在瀏覽器

5、中輸入用戶名-點擊按鈕提交用戶名給Servlet-瀏覽器轉(zhuǎn)向Servlet的頁面-等待Servlet處理-Servlet返回響應(yīng)信息-瀏覽器中看到Servlet頁面的響應(yīng)信息，當然這其中有幾個過程可能時間短暫到你沒有注意，但這些過程是確實存在。,第13頁/共187頁,AJAX思維方式：,第14頁/共187頁,AJAX思維方式：,問題分析： 對于校驗用戶名的需求，我們需要一個html頁面和一個servlet程序。 Html頁面中包含文本框和校驗按鈕，點擊提交按鈕以后，我需要通過javascript獲取文本框中的數(shù)據(jù)，然后通過XMLHttprequest發(fā)送數(shù)據(jù)給servlet，此外還需要準備用于

6、接收響應(yīng)的javascript函數(shù)，接收到servlet的提示信息后，我需要將這些信息動態(tài)的寫在頁面上。servlet程序判斷當前的用戶名是否是“wangxingkui”，并給出相應(yīng)的提示。,第15頁/共187頁,AJAX思維方式：,注意，AJAX模式下問題分析的方式已經(jīng)發(fā)生了變化： servlet不需要返回html頁面的鏈接了，因為我們不需要跳轉(zhuǎn)到servlet表示的頁面中，我們只需要獲得servlet頁面產(chǎn)生的結(jié)果 html頁面中我不用表單提交數(shù)據(jù)了，我的數(shù)據(jù)通過javascript來獲取，然后通過一個叫做XMLHttprequest的對象發(fā)送個servlet。而且我沒有做頁面跳轉(zhuǎn) 我需要

7、一個接收servlet響應(yīng)信息的javascript函數(shù)，我沒有進入servelt代表的頁面查看響應(yīng)信息，而是把servlet的響應(yīng)信息接收回來，再顯示在我當前的頁面上。,第16頁/共187頁,AJAX思維方式：,當你運行上面的程序，你會發(fā)現(xiàn)從用戶的角度來看，與傳統(tǒng)Web應(yīng)用模式的流程相比，AJAX應(yīng)用模式的流程是不同的。 AJAX應(yīng)用的流程是：在瀏覽器中輸入數(shù)據(jù)-點擊按鈕提交請求-用戶可以繼續(xù)做其他事情；Servlet在處理數(shù)據(jù)，并發(fā)回數(shù)據(jù)-瀏覽器收到響應(yīng)-瀏覽器中的當前頁面顯示響應(yīng)結(jié)果，這其中仍然有些過程由于時間短暫使你忽略了它的錯在，但實際上這些過程都是存在的。 兩個流程的對比讓我們看到

8、的顯而易見的差別就是AJAX應(yīng)用中沒有向新頁面跳轉(zhuǎn)，用戶不需要處于無事可做的等待中。,第17頁/共187頁,AJAX思維方式：,第18頁/共187頁,AJAX思維方式：,第19頁/共187頁,AJAX思維方式：,第20頁/共187頁,AJAX參考書籍,JavaScript Professional Projects,DHTML手冊.chm,第21頁/共187頁,AJAX參考書籍,DOM文檔對象中文手冊.chm,第22頁/共187頁,AJAX參考書籍,CSS中文手冊.chm,第23頁/共187頁,AJAX參考書籍,CSS中文手冊.chm,第24頁/共187頁,AJAX參考書籍,Professio

9、nal Ajax（AJAX高級程序設(shè)計）：,本書目前已有翻譯版在國內(nèi)銷售。本書除了介紹AJAX的基本知識以外，在跨瀏覽器實現(xiàn)XML處理和Webservice處理上做了詳細介紹，也有一個如何建立自己的Gmail的示例，另外還介紹了三個分別為PHP，JAVA和.NET平臺服務(wù)的AJAX服務(wù)器端框架。,第25頁/共187頁,AJAX參考書籍,Foundations Of AJAX（AJAX基礎(chǔ)教程）：,號稱國內(nèi)第一本AJAX的圖書，在國外也很受歡迎的一本書。個人認為書中比較有用的是介紹了很多AJAX開發(fā)的輔助工具，同時有過個實用的AJAX示例。,第26頁/共187頁,AJAX參考書籍,Pragmat

10、ic AJAX（AJAX修煉之道-Web2.0入門）：,國內(nèi)已有此書的翻譯版。本書比較短小精悍，其中比較特色的是介紹了如何建立一個自己的Google Maps，并在AJAX UI方面做了較多描述，另外簡要介紹了一些瀏覽器端AJAX框架，以及AJAX和PHP聯(lián)合開發(fā)的問題。,第27頁/共187頁,AJAX參考書籍,AJAX For DUMMIES（AJAX傻瓜教程）：,本書編排和版面設(shè)計上比較有特色。內(nèi)容上即介紹了AJAX的基本知識，也介紹了AJAX的一些框架。比較有特色的部分是給出了AJAX開發(fā)的十個需要了解的問題以及一些有用的AJAX資源。,第28頁/共187頁,AJAX參考書籍,AJAX

11、In Action（AJAX實戰(zhàn)）：,國內(nèi)已有此書的翻譯版本。一本將近700頁的AJAX圖書，和其他AJAX圖書相比分量很重，介紹內(nèi)容非常廣泛?？梢宰鳛橐槐続JAX的參考書。書中最后介紹了目前幾乎所有的AJAX瀏覽器及服務(wù)器端框架，對于大家選擇AJAX框架有一定的幫助。,第29頁/共187頁,AJAX參考書籍,AJAX Hacks：,國外著名IT出版社OReilly的AJAX圖書，國內(nèi)有影印版。該書以一個個Hack條目來介紹AJAX，其中有一半的篇幅介紹了我們前面提到的幾個流行的AJAX框架：DWR，Ruby On Rails，Rico，script.aculo.us。同時還有一些實用的示例供

12、大家參考。,第30頁/共187頁,AJAX參考書籍,另外有兩個國內(nèi)高手寫的AJAX入門電子書可供參考： AJAX開發(fā)簡略 AJAX新手快車道。 AJAX新手快車道的作者文筆風(fēng)格比較有趣，根據(jù)他blog上所說也會出一本AJAX方面的書，但目前還沒有看到。,第31頁/共187頁,AJAX參考書籍,AJAX開發(fā)簡略的作者柯自聰今年出版了一本AJAX方面的書籍AJAX開發(fā)精要-概念、案例與框架，可以在書店買到。,第32頁/共187頁,AJAX參考書籍,這兩本書也是國外的作品。 AJAX Design Patterns這本書網(wǎng)上評價也很好，屬于中高級的AJAX書籍。 Head Rush AJAX屬于He

13、ad Rush系列書中的一套，根據(jù)以前看過的Head Rush Java來看，Head Rush系列書編排非常有特色，里面有大量的插圖和手寫文字，內(nèi)容上比較淺顯易懂，作為趣味入門書是個不錯的選擇。,第33頁/共187頁,提綱：,走進AJAX AJAX的思維方式 AJAX的技術(shù)核心 AJAX應(yīng)用實例 AJAX的優(yōu)缺點 AJAX開發(fā)工具,第34頁/共187頁,AJAX技術(shù)核心,XMLHttpRequest對象 DOM與HTML DOM與XML 面向?qū)ο蟮腏avascript,第35頁/共187頁,AJAX技術(shù)核心,Asynchronous XMLHttpRequest 最早是在IE5.0中以Act

14、iveX組件的形式出現(xiàn)的 后來Mozilla，Safari，Opera等瀏覽器廠商都支持了XMLHttpRequest,由于XMLHttpRequest并不是W3C的標準，因此在各個瀏覽器的實現(xiàn)上也有所不同。 IE“獨樹一幟”，仍然是以ActiveX組件的方式來創(chuàng)建XMLHttpRequest對象 其他瀏覽器則可以直接創(chuàng)建javascript的XMLHttpRequest對象。,第36頁/共187頁,AJAX技術(shù)核心,首先我們發(fā)現(xiàn)和傳統(tǒng)Web開發(fā)模式不同，頁面中沒有form，submit換成了一個button，在button的定義中，我們使用了一個onclick屬性。 onclick屬性的作用

15、是在點擊按鈕時，調(diào)用該屬性所指定的javascript函數(shù)。我們可以在onclick屬性指定的javascript函數(shù)中使用XMLHttpReuqest對象來與服務(wù)器端程序（例如一個Servlet）進行數(shù)據(jù)傳輸。,第37頁/共187頁,AJAX技術(shù)核心,我們還發(fā)現(xiàn)和傳統(tǒng)模式相比，文本框我們定義了id屬性，而不是name屬性。 這是因為在AJAX模式中，我們通常在javascript代碼中通過DOM獲得html頁面中某個節(jié)點的值，因此我們一般都定義id屬性，這部分的詳細內(nèi)容會在后面介紹。,第38頁/共187頁,AJAX技術(shù)核心,另外我們建立了一個div標簽，div標簽應(yīng)該說是AJAX模式下很重要

16、的一個html標簽。 前面我們提到過的基于標準的表示技術(shù)，比較常用的一種方式就是用DIV+CSS替代talbe的方式來劃分網(wǎng)頁結(jié)構(gòu)，div中放內(nèi)容，css控制這些內(nèi)容的展現(xiàn)形式。 除此之外，div的另一個常用之處就是用于放置動態(tài)加入網(wǎng)頁中的內(nèi)容，先建立一個沒有內(nèi)容那個div，再在Javascript代碼中通過DOM動態(tài)的向其中添加內(nèi)容，以保證在頁面不刷新的情況下動態(tài)修改頁面內(nèi)容。這部分的詳細內(nèi)容也會在后面介紹。,第39頁/共187頁,AJAX技術(shù)核心,document.getElementById的作用是根據(jù)id名獲得對應(yīng)的節(jié)點（某一個html標簽的內(nèi)容），我們這里分別用這個語句來獲得div和

17、文本框的節(jié)點；.value的作用是獲得文本框的value屬性值，也就是文本框中的內(nèi)容。,document.getElementById(result) document.getElementById(name).value,第40頁/共187頁,AJAX技術(shù)核心,resultNode.innerHTML這樣的用法是為了設(shè)置某個節(jié)點中的html的內(nèi)容，這里resultNode代表的是div那個節(jié)點，這句話的效果是使div的內(nèi)容變成了不能建立XMLHttpRequest對象，這樣我們就會在頁面中看到這行提示信息。,resultNode.innerHTML = 不能建立XMLHttpRequest對

18、象;,第41頁/共187頁,AJAX技術(shù)核心,第42頁/共187頁,AJAX技術(shù)核心,“window.XMLHttpRequest”為true時表示當前瀏覽器是IE7或其他瀏覽器，我們就可以使用new XMLHttpRequest()的方式來創(chuàng)建一個XMLHttpRequest對象 if(xmlhttp.overrideMimetype)這個邏輯的作用是解決部分版本的Mozilla在服務(wù)器響應(yīng)頭信息沒有XML時不能正常工作的問題。,第43頁/共187頁,AJAX技術(shù)核心,“window.ActiveXObject”為true時表示當前的瀏覽器為IE6.0及以下的版本，要使用new Active

19、XObject(控件名)的方式來創(chuàng)建一個XMLHttpRequest對象 這里需要注意的是不同版本IE中用于建立XMLHttpRequest對象的控件版本很多 如果使用MSXML數(shù)組中的某一個控件名稱成功建立了XMLHttpRequest對象，則跳出循環(huán)，如果建立失敗會有異常拋出，被catch以后繼續(xù)進行循環(huán)，嘗試下一個控件名稱 這里的控件名稱是按照從新到老的順序排列的，這樣可以保證使用較新版本IE的用戶可以較早成功建立XMLHttpRequest對象。 如果沒有建立成功XMLHttpRequest對象，則不能繼續(xù)后面與服務(wù)器端交互的工作，函數(shù)只能返回。,第44頁/共187頁,AJAX技術(shù)核心

20、,然后我們做的工作是設(shè)置一個回調(diào)函數(shù) 回想前面我們說過的AJAX的模式的特點，由于我們采用異步交互的模型，不像同步模式一樣可以直接接收響應(yīng)內(nèi)容，因此我們需要告訴AJAX引擎當響應(yīng)數(shù)據(jù)回來時我要做一些工作，這些工作就是回調(diào)函數(shù)中的內(nèi)容。 這里需要注意的是設(shè)置回調(diào)函數(shù)時應(yīng)該只給出回調(diào)函數(shù)的名稱，后面不要帶括號，因為帶上括號就變成讓XMLHttpRequest對象的onreadystatechange屬性值等于回調(diào)函數(shù)的返回值了。,第45頁/共187頁,AJAX技術(shù)核心,接下來要做的工作是建立對服務(wù)器的調(diào)用。這里第一個參數(shù)表示http連接的方法, 一般我們使用“GET”或“POST”方式，兩種方式的

21、區(qū)別會在后面闡述。 第二個參數(shù)是服務(wù)器端地址，由于使用GET方式，因此要傳送給服務(wù)器端的數(shù)據(jù)也在URL中，這里我們使用了兩個encodeURI，目的是為了解決URL中的中文信息在服務(wù)器端解碼的問題，配合服務(wù)器端的URLDecoder.decode(old,“UTF-8”)語句可以保證中文信息在服務(wù)器端也可以正常被解出。 第三個參數(shù)表示是否采用異步方式進行傳輸，其中true表示采用異步方式，我們在AJAX中看重的就是異步方式，因此這個參數(shù)我們通常使用true。,第46頁/共187頁,AJAX技術(shù)核心,再接著就是向服務(wù)器端發(fā)送數(shù)據(jù)，這里由于已經(jīng)在URL中包含了發(fā)送給服務(wù)器的數(shù)據(jù)，因此在send時就

22、不需要參數(shù)了，后面會講到對于POST模式，這里的使用方式會有不同。,第47頁/共187頁,AJAX技術(shù)核心,最后請注意，按照我們寫代碼的順序來說，“xmlhttp.onreadystatechange=callback”這句中指定的回調(diào)函數(shù)callback實際上還沒有存在，因此最后我們需要定義一下我們的回調(diào)函數(shù)做的工作,第48頁/共187頁,AJAX技術(shù)核心,這里readyState=4時表示服務(wù)器端的響應(yīng)數(shù)據(jù)已經(jīng)被全部接收，readyState還有其他狀態(tài)，后面會進行詳細介紹。 Status=200表示http連接狀態(tài)正常，如果不是200，則表示http連接有誤，此時回來的數(shù)據(jù)也不是我們需要

23、的。 當響應(yīng)數(shù)據(jù)全部接收并且http連接狀態(tài)正確時，我們就可以接收響應(yīng)的數(shù)據(jù)了，這里使用了xmlhttp.responseText用于以文本形式接收響應(yīng)的數(shù)據(jù)，當然也可以用XML方式接收，后面會做詳細介紹。,第49頁/共187頁,AJAX技術(shù)核心,第50頁/共187頁,AJAX技術(shù)核心,第51頁/共187頁,AJAX技術(shù)核心,第52頁/共187頁,AJAX技術(shù)核心,第53頁/共187頁,AJAX技術(shù)核心,GET和POST的區(qū)別： “GET”和“POST”的一個重要區(qū)別在于，“GET”方式傳遞給服務(wù)器的信息一般以后綴參數(shù)方式存在于URL地址中，而URL的長度通常都有限制，這也就限制了“GET”方

24、式傳遞給服務(wù)器的內(nèi)容大小 而“POST”方式傳遞給服務(wù)器的信息并不位于URL地址中，所以沒有大小限制。 通常我們在服務(wù)器端的Servlet中，doGet和doPost做的是一樣的工作，因此由于POST傳遞信息沒有大小限制，我們實際應(yīng)用中比較多的會使用POST。,第54頁/共187頁,AJAX技術(shù)核心,第55頁/共187頁,AJAX技術(shù)核心,每次readyState變化時onreadystatechange屬性對應(yīng)的函數(shù)都會被調(diào)用。 之前我們曾經(jīng)說過onreadystatechange屬性設(shè)置回調(diào)函數(shù)是為了在接收到響應(yīng)數(shù)據(jù)后對響應(yīng)數(shù)據(jù)進行處理，之所以這樣說是因為我們通常只關(guān)心收到響應(yīng)數(shù)據(jù)以后時的

25、工作，也就是readyState=4時的狀態(tài)，因此我們的回調(diào)函數(shù)中也用readyState=4來做判斷。 (源碼網(wǎng)整理,),第56頁/共187頁,AJAX技術(shù)核心,status和statusText屬性： 它的值是http的狀態(tài)碼，我們通常只在status=200時才進行響應(yīng)數(shù)據(jù)處理，但也可根據(jù)具體情況在status為其他值時做一些處理。 statusText屬性一般用于status不為200時顯示詳細的http錯誤狀態(tài)信息,第57頁/共187頁,AJAX技術(shù)核心,responseText與responseXML屬性： 無論服務(wù)器端返回的是XML還是普通的文本內(nèi)容，html內(nèi)容，都可以使用re

26、sponseText屬性來獲得服務(wù)器端的返回值。 當服務(wù)器端返回的不是XML內(nèi)容是，不同的瀏覽器在獲取responseXML屬性值時略有不同，IE仍然會獲取到一個DOM對象，只不過內(nèi)容是空的，而FireFox獲取到的則是一個null,第58頁/共187頁,AJAX技術(shù)核心,如果服務(wù)器端要返回普通文本內(nèi)容，html內(nèi)容，一般在服務(wù)器端會設(shè)置響應(yīng)頭信息中的Content-Type為text/html，同時為了保證中文信息不會出現(xiàn)亂碼，還會根據(jù)需要設(shè)置Content-Type中charset。 如果服務(wù)器端要返回xml，首先返回的數(shù)據(jù)一定要是一個DOM兼容的xml字串，其次需要在服務(wù)器端設(shè)置響應(yīng)頭信

27、息中的“Content-Type”為text/xml。這樣在瀏覽器端的Javascript代碼中我們可以通過responseXML屬性獲得一個DOM兼容的XML對象，通過DOM的方式操作XML，這部分內(nèi)容會在后面介紹。,第59頁/共187頁,AJAX技術(shù)核心,還有一點需要說明的是雖然AJAX倡導(dǎo)使用傳輸XML數(shù)據(jù)，但是正如Jesse James Garrett老兄在他提出AJAX概念的那篇文章中的FAQ部分說的一樣并不是AJAX模式的程序一定要用XML作為傳輸數(shù)據(jù) XML數(shù)據(jù)的優(yōu)勢是不同系統(tǒng)之間可以交互一種統(tǒng)一結(jié)構(gòu)的數(shù)據(jù)，這樣你的服務(wù)器端程序即可以和AJAX的客戶端交互，也可以方便的和其他類型

28、客戶端交互。 很多時候，在AJAX模式的程序中使用純文本內(nèi)容或是自定義的數(shù)據(jù)結(jié)構(gòu)進行數(shù)據(jù)傳輸會更方便，實際上Google幾個有名的AJAX模式產(chǎn)品使用的都不是XML的數(shù)據(jù)。,第60頁/共187頁,AJAX技術(shù)核心,總結(jié)AJAX應(yīng)用的五個步驟： 1.建立XMLHttpRequest對象 2.設(shè)置回調(diào)函數(shù) 3.使用open方法與服務(wù)器建立鏈接 4.向服務(wù)器端發(fā)送數(shù)據(jù) 5.在回調(diào)函數(shù)針對不同響應(yīng)狀態(tài)進行處理,第61頁/共187頁,AJAX技術(shù)核心,需要注意的內(nèi)容： 1.不同瀏覽器下XMLHttpRequest對象的不同的建立方式 2.設(shè)置回調(diào)函數(shù)時不要加括號 3. open方法三個參數(shù)含義，此外還需

29、要注意GET方式和POST方式服務(wù)器端地址的不同寫法 4. GET方式和POST方式send的參數(shù)的不同之處，以及POST方式下send之前需要設(shè)置請求頭信息的工作 5.如何判斷正確的響應(yīng)數(shù)據(jù)已經(jīng)返回，此外還要注意如何獲取響應(yīng)數(shù)據(jù)內(nèi)容。,第62頁/共187頁,AJAX技術(shù)核心,XMLHttpRequest的一個特殊安全問題： IE：訪問跨域頁面時會給出提示，用戶確認后會訪問 Mozilla FireFox及其他：不允許訪問跨域頁面,第63頁/共187頁,AJAX技術(shù)核心,第64頁/共187頁,AJAX技術(shù)核心,如何解決跨域問題？,第65頁/共187頁,AJAX技術(shù)核心,在瀏覽器端的代碼中，我們

30、需要在調(diào)用open方法之前判斷一下要連接的地址是不是以http開頭的，如果是則認為要訪問的是跨域的資源，首先將當前url中的”?”變成”,第139頁/共187頁,AJAX技術(shù)核心,本節(jié)最后我們再花一點時間討論一下Javascript中的“繼承”。 前面我們說了，prototype方式定義的常量和方法保存在原型對象中，這個原型對象所屬于的類創(chuàng)建出來的對象都“繼承”了原型對象中定義的內(nèi)容。 回想一下我們熟悉的Java，Java中我們也有繼承，一個子類繼承一個父類，子類的對象可以使用父類所有的共有和保護的成員變量和方法。 對比一下，雖然兩種語言中我們都以“繼承” 這個字眼來描述這個父子關(guān)系，但是我們

31、需要注意，兩種語言的“繼承”差別還是很大的。,第140頁/共187頁,AJAX技術(shù)核心,Java中父類可以有子類，子類可以再有自己的子類，繼承關(guān)系可以很深。而在Javascript中，所謂的“繼承”僅僅是一個類（實際上是函數(shù)）的所有對象可以繼承原型對象的屬性內(nèi)容，不存在多層次繼承的情況。 另一方面，Java中子類繼承了父類的成員變量，那么每一個子類對象在是用這個成員變量時都是獨立互不影響的，而在Javascript中，由于這個繼承是對象之間的繼承，且一個類的多個對象同時繼承了這個類的一個原型對象，因此，當原型對象中的屬性發(fā)生變化時，所有的普通對象在獲取這個屬性時也都會發(fā)生變化。 最后，Java

32、中從父類繼承的成員變量是可讀可寫的，而Javascript中，則是只讀的，當你象寫這個屬性時，實際上并沒有真正修改原型對象中的那個屬性值，而是給當前對象新建了一個屬性，如我們前面的例子所示。,第141頁/共187頁,AJAX技術(shù)核心,到目前為止我們在類中定義的屬性和方法都是公有的，也就是說對象都可以直接訪問到它們。我們知道在面向?qū)ο笾形覀兘?jīng)常需要封裝一些數(shù)據(jù)，在Java中我們使用private關(guān)鍵字把它們變成私有的內(nèi)容。在Javacript中我們同樣會有這樣的需求，那么如何在Javascript的類中定義私有的屬性和方法呢？,第142頁/共187頁,AJAX技術(shù)核心,Javascript中并沒

33、有Java那樣的關(guān)鍵字來控制屬性方法的訪問權(quán)限，因此我們只有采用曲線救國的方式來解決這個問題。我們知道所謂私有的內(nèi)容就是在類之外是不可見的。Javascript中我們的類就是一個方法，那么什么內(nèi)容在方法之外不可見呢？沒錯，就是方法中的局部變量。那么如果我們在方法中定義一個局部變量，那它就是我們Javascript類中的私有成員變量了。,第143頁/共187頁,AJAX技術(shù)核心,問題還沒有結(jié)束，我們需要有公有的方法讓用戶可以訪問到私有的變量，好，按照我們上一節(jié)的思路，成員方法用prototype方式定義，那我們就這么定義兩個方法來設(shè)置私有變量吧。我們還是在Book這個類的基礎(chǔ)上修改，代碼如下：,

34、第144頁/共187頁,AJAX技術(shù)核心,試著運行一下這段代碼，你會發(fā)現(xiàn)沒有達到你的預(yù)期，輸出內(nèi)容為undefine。我們那里錯了呢？對了，privateValue不是對象的屬性，他只是私有的局部變量，用this是找不到的，那我們修改一下去掉this如何：,第145頁/共187頁,AJAX技術(shù)核心,再次運行，我們發(fā)現(xiàn)還是undefine。，錯在那里了呢？我們對局部變量的理解還是有點偏差，既然privateValue是局部變量，那么在它所在的方法之外，它都不可見，當然原型對象中的方法就無法訪問到這個變量了?？磥硐胍L問這個私有變量，我們只能放棄通過prototype來定義我們的方法了，回到效率不

35、好的“構(gòu)造函數(shù)”方式來定義我們的方法。代碼如下：,第146頁/共187頁,AJAX技術(shù)核心,第147頁/共187頁,AJAX技術(shù)核心,現(xiàn)在我們再來運行這段代碼，我們發(fā)現(xiàn)終于出現(xiàn)我們想要的結(jié)果999了。 同樣的，如果你想定義私有方法，也可以采用類似的方式，代碼如下：,第148頁/共187頁,AJAX技術(shù)核心,第149頁/共187頁,AJAX技術(shù)核心,上面這段代碼，我們定義了外部可見的公有方法getPrivateValue以及私有內(nèi)部可見的setPrivateValue方法，這樣對于私有屬性privateVale，別人在使用的時候就只能獲取它的值而不能給它賦值了。 我們來總結(jié)一下，當你需要定義Ja

36、vascript中的私有變量和方法的時候，可以在“構(gòu)造函數(shù)”中通過局部變量的方式來定義，注意提供給別人操作這些私有變量和方法的方法只能在“構(gòu)造函數(shù)”中定義成公有，而不能在原型對象中定義，因為只有構(gòu)造函數(shù)中才可以看到這些私有變量。,第150頁/共187頁,AJAX技術(shù)核心,我們在回到Java，想想Java的類中還有什么特性。對了。靜態(tài)屬性和靜態(tài)方法。Java中的靜態(tài)屬性和靜態(tài)方法都有一個static的關(guān)鍵字。 對于靜態(tài)屬性和靜態(tài)方法，我們說它是屬于類，而不是屬于類的對象的。靜態(tài)的內(nèi)容我們在使用的時候不需要建立一個對象，直接通過類名點靜態(tài)屬性或方法名即可。,第151頁/共187頁,AJAX技術(shù)核心

37、,那么，Javascript中我們是否也可以有靜態(tài)屬性和方法呢？很明顯，從Javascript語言級的角度來說，它并沒有Java那樣的static關(guān)鍵字，也就不可能有語言級的靜態(tài)屬性和方法了，但是我們也可以讓我們在Javascript中的類有靜態(tài)的屬性和方法。 Javascript中的類是一個函數(shù)，對于我們前面看到了每個函數(shù)都有一個prototype的屬性表示它的原型對象。這說明函數(shù)是可以有屬性的，既然可以有屬性就可以動態(tài)的增加屬性。所以當我們需要定義Javascript中的類的靜態(tài)屬性和方法時，就可以給表示類的變量增加屬性內(nèi)容。仍然以Book類為例，示例代碼如下：,第152頁/共187頁,A

38、JAX技術(shù)核心,如上所示，我們定義的“靜態(tài)”屬性和方法與Java中的使用方式一樣，當然定義方式略有不同，Java中的都定義在類里面了，而javascript中我們一般定義在類構(gòu)造函數(shù)的外面。 這里仍然有一個建議，就是類的“靜態(tài)”屬性名使用大寫字母，這和前面說道的prprotype定義的常量一樣，為的是讓別人一目了然。這種類“靜態(tài)”屬性和prorotype定義的常量還是有一些差別的，一個類的所有對象看到的prototype定義的常量值是一樣的，讀變量的時候可以通過對象名點上變量名，但是不能寫，而且可能存在對象中定義的屬性覆蓋了prototype中定義的這個常量。而類的“靜態(tài)”屬性在整個程序中看到

39、的結(jié)果都是一樣的，讀寫變量的時候都是類名點上變量名。,第153頁/共187頁,AJAX技術(shù)核心,在Javascript中應(yīng)該在何時定義類的“靜態(tài)”屬性和方法。總的來說和Java中是一樣的。當類的某個值與對象無關(guān)期望所有位置看到的結(jié)果是一樣的時候，就可以定義為類靜態(tài)屬性。如果類的一個方法做的是和具體對象無關(guān)的操作，而是做一些工作操作的時候，就可以將這個方法定義為靜態(tài)的類方法。,第154頁/共187頁,AJAX技術(shù)核心,我們已經(jīng)學(xué)習(xí)了如何在Javascript中面向?qū)ο蟮木帉懗绦颍酉聛砦覀兿胱龅木褪前亚懊嬷v過的XMLHttpRequest的使用面向?qū)ο蠡?，自己來做一個XMLHttpRequest

40、對象的封裝。 我們?yōu)槭裁葱枰龇庋b呢？大家是否還記得本章第一節(jié)中我們學(xué)習(xí)使用XMLHttpRequest的那五個步驟，當我們每次使用XMLHttpRequest對象時，都要經(jīng)歷這五個步驟的洗禮，是不是很麻煩，很煩瑣？,第155頁/共187頁,AJAX技術(shù)核心,還有，這五個步驟中還有很多問題需要注意，瀏覽器建立XMLHttpRequest對象的差異，GET方式和POST方式的差異，獲取服務(wù)器返回值所需要做的判斷工作，瀏覽器的緩存問題，跨域調(diào)用問題等等。很多問題都需要注意，如果那個問題沒有處理好就會使我們的AJAX之旅變得不再暢通。 通常情況下我們做AJAX的應(yīng)用，不想關(guān)心XMLHttpReuqe

41、st對象使用過程中的那一串事情，我們只希望把數(shù)據(jù)給XMLHttpRequest對象，讓它幫我們異步的發(fā)出去，當數(shù)據(jù)回來的時候可以讓我期望處理響應(yīng)數(shù)據(jù)的方法工作就行了。問題擺在眼前了，怎么解決呢？,第156頁/共187頁,AJAX技術(shù)核心,第157頁/共187頁,AJAX技術(shù)核心,這段封裝代碼把之前我們提到的使用XMLHttpRequest需要注意的問題，以及像跨域，緩存這樣的問題統(tǒng)統(tǒng)都封裝了起來。這段代碼中唯一需要說明的，也是和之前的未封裝的代碼有差別的就是設(shè)置回調(diào)函數(shù)的時候我們使用了匿名方法來直接定義回調(diào)函數(shù)，然后我們會在回調(diào)函數(shù)中根據(jù)響應(yīng)情況調(diào)用用戶提供的用于處理成功情況和用于處理失敗情況

42、的方法。,第158頁/共187頁,AJAX技術(shù)核心,這里有一個技巧，你可能注意到我們在send方法中定義了一個局部變量tempxmlhttp，讓它等于了當前對象的xmlhttp屬性，為什么要這么做呢？ 還是為了滿足我們的那個匿名回調(diào)方法。回想Java的AWT/SWING的圖形界面程序中，我們經(jīng)常會在一個方法內(nèi)的通過在建立匿名對象的方式來設(shè)置事件，當我們建立匿名對象的時候，需要寫一些匿名對象中必須有的方法，這個時候在匿名對象的方法中，我們可以訪問到匿名對象所在方法的局部常量（final修飾的），但是我們無法訪問當前對象的屬性或方法，因為但我們使用this關(guān)鍵字的時候，它表示的不是我們期望的對象，

43、而是被建立的匿名對象。 在Javascript中，匿名方法存在同樣的問題，我們可以訪問匿名方法所在的方法中的局部變量，但是不能訪問當前對象的屬性，因此我們定義了一個局部變量，以便于匿名回調(diào)方法可以取到xmlhttp的內(nèi)容。,第159頁/共187頁,AJAX技術(shù)核心,當我們使用這個封裝的XMLHttpRequest時，你會發(fā)現(xiàn)原來我們寫的那個校驗用戶名的例子，變得好寫了很多，如下所示：,第160頁/共187頁,AJAX技術(shù)核心,第161頁/共187頁,AJAX的優(yōu)缺點,第162頁/共187頁,AJAX的優(yōu)缺點,第163頁/共187頁,AJAX的優(yōu)缺點,第164頁/共187頁,AJAX的優(yōu)缺點,第

44、165頁/共187頁,綜合實例-學(xué)生信息管理系統(tǒng)：,submitButton.setAttribute(disabled, true); submitNode.removeAttribute(disabled);submitButton.onclick = function () submitStudent(uniqueID); ;oralData.unshift(),第166頁/共187頁,綜合實例-學(xué)生信息管理系統(tǒng)：,id:id,name:oralName,number:oralNumber,classname:oralClassNameoralData.splice(index,1);,

45、第167頁/共187頁,綜合實例-動態(tài)股市信息：,setTimeout(code, delay) clearTimeout( );setInterval(code, interval) clearInterval( ),第168頁/共187頁,綜合實例-提示框：,onmouseover=show(this,event)onmouseout=clearinfo()“if(!env) myEvent = window.event; else myEvent = env; ,第169頁/共187頁,綜合實例-提示框：,mouseX = myEvent.clientX; mouseY = myEven

46、t.clientY;divNode.style.left divNode.style.top“px”,第170頁/共187頁,綜合實例-簡易的google suggest：,onkeyup=completeText(event)“keyCode = myEvent.keyCode;keyCode表48-90 8 38，40 13,第171頁/共187頁,綜合實例-簡易的google suggest：,var left = textNode.offsetLeft;var tmp = textNode.offsetParent; while(tmp) left += tmp.offsetLeft;

47、 tmp = tmp.offsetParent;tipNode.style.left = left + px;,第172頁/共187頁,綜合實例-簡易的google suggest：,使用對象直接量傳遞數(shù)據(jù)var tipArray = eval(responseText);,第173頁/共187頁,綜合實例-簡易的google suggest：,tdNode.onmousemove = function() this.style.backgroundColor = red;tdNode.onmouseout = function() this.style.backgroundColor = #

48、FFFAFA;tdNode.onclick = function() textNode.value = this.firstChild.nodeValue; clearTbody();,第174頁/共187頁,WebService,WebService是可以供任何程序通過網(wǎng)絡(luò)訪問的一種服務(wù)。 最大的優(yōu)勢是跨平臺的可互操作性 SOA（Service-Oriented Architec-ture ） 面向服務(wù)的架構(gòu),第175頁/共187頁,WebService,SOAP（Simple Object Access Protocol ）分布式環(huán)境中交換信息的輕量級協(xié)議 Binding Style： R

49、PC 、Document Encoding styles Literal、encoding,第176頁/共187頁,WebService,Literal :SOAP消息中只有數(shù)據(jù)沒有數(shù)據(jù)類型。這種方式是開發(fā)包相關(guān)的，沒有什么標準；如50，單從SOAP消息，你無法判斷50是數(shù)字還是字符串，而具體的類型可以在開發(fā)包將SOAP請求映射到具體的Service類時來確定并完成轉(zhuǎn)換，對于返回值也一樣，客戶端可以通過SetReturnValueType(.)之類的方法告知開發(fā)包自己期待什么類型 Encoding就是在SOAP消息中攜帶類型信息，并且依據(jù)某種規(guī)則將數(shù)據(jù)編碼傳遞，接收端可以根據(jù)類型信息和編碼規(guī)則完成解碼，獲得原始數(shù)據(jù)；如50,第177頁/共187頁,WebService,RPC就是按照類似函數(shù)調(diào)用時所需的信息來組裝SOAP消息：操作名作為根元素，參數(shù)組成子元素 58 (RPC/Literal) 58 (RPC/Encoded),第178頁/共187頁,WebService,Document 就是將SOAP請求和響應(yīng)，或者說輸入輸出定義為XML元素，有嚴格的