慧橋教育Ajax學(xué)習(xí)課件.ppt

1、、Ajax、課程調(diào)度、使用基于Ajax的Ajax在異步請求發(fā)送請求和響應(yīng)中使用XML進行數(shù)據(jù)傳輸、第一個、基于Ajax的、Ajax是什么？我們先舉幾個例子.backkbase購物站點Google suggest Google map and many more.Ajax定義、異步JavaScript和XML(Ajax)不是新技術(shù)，而是使用事實、XHTML(HTML)和CSS構(gòu)建標(biāo)準(zhǔn)化演示層DOM進行動態(tài)顯示和交互使用XML和XSLT交換和處理數(shù)據(jù)傳統(tǒng)web應(yīng)用程序與Ajax應(yīng)用程序比較，傳統(tǒng)web應(yīng)用程序與Ajax應(yīng)用程序比較(cont .)，在傳統(tǒng)的web應(yīng)用程序模型中，大多數(shù)用戶任務(wù)向服務(wù)

2、器發(fā)送HTTP請求，然后在服務(wù)器上啟動處理(接收數(shù)據(jù)、執(zhí)行業(yè)務(wù)邏輯、訪問數(shù)據(jù)庫等)，最后將HTML頁返回到瀏覽器。服務(wù)器處理請求時，用戶可以做什么？只等！比較現(xiàn)有web應(yīng)用程序和Ajax應(yīng)用程序(cont .)，在現(xiàn)有web應(yīng)用程序模型中，客戶端(瀏覽器或本地計算機上運行的代碼)向服務(wù)器發(fā)出請求。請求已同步，客戶端等待服務(wù)器的響應(yīng)。客戶端等待時，沙漏(尤其是Windows)旋轉(zhuǎn)球(通常是Mac系統(tǒng))應(yīng)用程序基本上凍結(jié)，光標(biāo)會隨著時間的推移而變化，這將導(dǎo)致現(xiàn)有web應(yīng)用程序?qū)擂位蚓徛Ｈ狈φ嬲慕换?。按下按鈕后，應(yīng)用程序?qū)嶋H上將變?yōu)椴豢捎?，直到剛剛觸發(fā)的請求得到響應(yīng)。如果請求需要大量服務(wù)器處理，

3、則將傳統(tǒng)web應(yīng)用程序與Ajax應(yīng)用程序(cont .)，Ajax應(yīng)用程序在用戶和服務(wù)器之間引入了介質(zhì)(Ajax引擎)，以異步方式發(fā)送請求，從而消除了傳統(tǒng)的請求發(fā)送-等待-請求發(fā)送-等待特性，大大提高了用戶體驗。基于JavaScript、JavaScript簡介和JavaScript是由Netscape corporation和Sun corporation共同開發(fā)的。在出現(xiàn)JavaScript之前，web瀏覽器是用于顯示超文本文檔的軟件的基本部分。JavaScript之后，網(wǎng)頁上的內(nèi)容不再僅限于枯燥的文本，而且在交互方面有了很大的改進。JavaScript是腳本語言、說明和基于對象的腳本語言

4、。JavaScript腳本通常只能通過web瀏覽器解釋和運行，而不能像普通程序那樣在基于HTML的基礎(chǔ)上獨立運行，并且可以使用JavaScript開發(fā)交互式web頁。JavaScript的出現(xiàn)使web頁與用戶之間具有實時、動態(tài)和交互的關(guān)系，從而使web頁包含更多活動元素和更有趣的內(nèi)容。JavaScript與Java沒有關(guān)聯(lián)。JavaScript語法語句，JavaScript腳本的基本組織單元。每個句子只需簡單地放在不同的行上。加分號“；”不需要，退出： first statement second statement，但在每個語句末尾使用“；”添加的良好編程習(xí)慣：first statement

5、Second statement，JavaScript語法注釋，單行注釋(雙斜線):/line1多行注釋：/* line1 line2 */HTML樣式注釋(不推薦): 結(jié)束，JavaScript語法3354var age=33穆德=快樂；但是，預(yù)先聲明變量是一個很好的編程習(xí)慣變量名稱，可以包含字母、數(shù)字、美元符號($)和下劃線字符，但不允許使用空格或標(biāo)點，JavaScript語法數(shù)據(jù)類型，JavaScript變量的類型由變量的值決定，可以為同一變量指定不同數(shù)據(jù)類型的值。varage= thirty threeAge=33JavaScript中的重要數(shù)據(jù)類型：未定義、未定義變量、未初始化變量字

6、符串、單引號或雙引號可以包含數(shù)字Var colors=新陣列(3)；其中，new關(guān)鍵字可以省略，與其他語言一樣，數(shù)組的下標(biāo)從0開始，賦值方法類似于其他語言。colors0= red ；colors1= black ；colors2= white ；使用方括號創(chuàng)建數(shù)組時，也可以同時初始化。var colors=red ， black ， white ；JavaScript語法數(shù)組(cont .)，使用方括號創(chuàng)建數(shù)組對象的簡單方法：var colors=；/聲明空數(shù)組對象colors 0=red 。colors1= black ；您可以透過陣列的length屬性，取得陣列中的元素數(shù)目。陣列的長度可

7、以動態(tài)擴展。colors3= blue ；colors8= grey ；關(guān)聯(lián)數(shù)組：填充數(shù)組時，為每個新元素明確提供下標(biāo)。colors r = red ；colors b = black ；JavaScript語法操作，條件語句，循環(huán)語句，JavaScript中的算術(shù)運算符(，-，*，/，-，等)，比較運算符(，=)，條件語句(if，)JavaScript使用function關(guān)鍵字定義函數(shù)。function funcname (arg1、arg2、) statements簡單函數(shù)聲明：function multiply (num 1，num 2) vartotal=num 1 * num 2；R

8、eturn total聲明后，可以直接調(diào)用此函數(shù)以獲得結(jié)果。var result=multiply (5，9)；JavaScript中的函數(shù)不需要聲明返回類型，參數(shù)也不需要聲明類型。JavaScript語法對象，它是由一組相關(guān)屬性和方法組成的數(shù)據(jù)實體。屬性和方法都是“.”中選擇所需的構(gòu)件。perty object.method()使用函數(shù)定義“類”。function Person() this . age=12；T= no namethis . say hello=function() alert( hello this . name)；/其中不能省略thi

9、s關(guān)鍵字！使用new關(guān)鍵字創(chuàng)建對象實例。var Vincent=new Person()；DOM basic，Document Object Model的首字母縮寫DOM簡介。創(chuàng)建網(wǎng)頁并將其加載到web瀏覽器中時，文檔對象模型DOM表示瀏覽器窗口中加載的當(dāng)前頁面。瀏覽器提供當(dāng)前頁面的模型。您可以通過JavaScript訪問此模型DOM，以DOM樹結(jié)構(gòu)(例如HTML頁面DOM樹結(jié)構(gòu)(cont)的樹形式顯示文檔。瀏覽器加載頁面，并從以HTML元素開頭的最外部HTML inclusion元素開始的DOM樹結(jié)構(gòu)(cont .)轉(zhuǎn)換為樹狀結(jié)構(gòu)。使用樹的比喻，根元素(root element)離開根的線表

10、示不同標(biāo)記部分之間的關(guān)系。Head和body元素是html根元素的子元素(child)。Title是head的哎呀，文本“trees，Trees，everywhere”是title的孩子；相對來說，head是title的父親，title是文本“trees，Trees，everywhere”的父親。位于同一級別且彼此不包含的兩個分支(例如head和body)稱為同級關(guān)系。瀏覽器以這種方式組織整個樹，直到類似于上圖的結(jié)構(gòu)通常由節(jié)點樹構(gòu)成，節(jié)點(node)、DOM文檔由一組節(jié)點組成，這些節(jié)點是文檔樹的分支或葉DOM的節(jié)點類型，即元素節(jié)點(element node)。元素節(jié)點可以包含其他元素。其他元素

11、中不包含的唯一元素是提供元素特定說明的根元素屬性節(jié)點。屬性始終放置在開始標(biāo)記中，因此屬性節(jié)點始終包含在元素節(jié)點的文本節(jié)點(text node)中，該元素節(jié)點返回與給定Id屬性的元素節(jié)點相對應(yīng)的對象(trees、Trees、everywhere、默認DOM方法、getElementById(id)此方法是與document對象相關(guān)聯(lián)的函數(shù)。其中document對象表示整個HTML文檔，可用于訪問所有頁面上的元素的getElementsByTagName(tagname)通過返回與文檔中特定元素節(jié)點getAttribute()對應(yīng)的對象的屬性值setAttribute()來修改對象的屬性值。一種重

12、要的DOM屬性，用于檢索節(jié)點樹中childNodes的所有子元素，其中指定元素節(jié)點的所有子元素nodeName返回元素節(jié)點名稱的數(shù)組。返回的結(jié)果是全部大寫nodeType用于區(qū)分節(jié)點類型，元素節(jié)點的nodeType屬性值為1，屬性節(jié)點的nodeType屬性值為2，文本節(jié)點的nodeType屬性值為3dnodevalue可用于訪問文本節(jié)點的值。如果元素節(jié)點或?qū)傩怨?jié)點的此屬性返回null，則重要的DOM屬性(cont .)、firschd和lastChild第一個和最后一個子節(jié)點。Node.firstChild對應(yīng)于node.childNodes0，node.lastChild對應(yīng)于node .

13、child nodesnode . child nodes . length1parent nodes用于更改網(wǎng)頁結(jié)構(gòu)的DOM方法；create element(tagname)創(chuàng)建與document對象關(guān)聯(lián)的新元素節(jié)點。新元素節(jié)點不會連接到節(jié)點樹。appendChild(node)將新節(jié)點插入節(jié)點樹中的節(jié)點下，createTextNode(text)作為該節(jié)點的子節(jié)點創(chuàng)建insertBefore(newNode)作為文本節(jié)點。TargetNode)在現(xiàn)有元素之前插入新元素。replaceChild(newChild，oldChild)替換子節(jié)點removeChild(node)?；谑纠鼶O

14、M的web應(yīng)用程序、基于DOM的web應(yīng)用程序，首先創(chuàng)建非常簡單的應(yīng)用程序，然后添加DOM魔法。DOM可以移動網(wǎng)頁上的所有內(nèi)容，而無需提交表格。創(chuàng)建一個簡單的網(wǎng)頁，標(biāo)簽為典型的球形帽和Hocus Pocus！按鈕、初始HTML列表和按鈕類型為button，而不是提交按鈕。如果使用提交按鈕，單擊此按鈕將使瀏覽器提交表單。使用常規(guī)輸入按鈕代替提交按鈕，可以在不提交表單的情況下與瀏覽器交互JavaScript函數(shù)，添加初始HTML頁面預(yù)覽、目標(biāo)效果、某些魔法，并將頁面中央的圖片替換為兔子圖片。元素節(jié)點是使用getElementById()函數(shù)導(dǎo)入的，首先在網(wǎng)頁中查找表示img元素的DOM節(jié)點。通常，

15、最簡單的方法是使用getElementById()方法，該方法屬于表示web頁的document對象。var element node=document . getelement byid( id )；照片，麻煩的方法，完成必要的修改的幾種方法：有點簡單，有點麻煩。但是更麻煩的方法是好的DOM練習(xí)。先看看換畫更麻煩的方法。1、創(chuàng)建新的img元素2、訪問當(dāng)前img元素的父元素(即容器3)、在現(xiàn)有img元素前插入新的img元素作為容器的子元素4、刪除原始img元素5、在用戶單擊按鈕時調(diào)用剛創(chuàng)建的函數(shù)等方法，重新分析是否有更簡單的方法將舊圖片替換為有兔子的新照片。1、建立新img元素，建立新img元素：var new image=document . create element( img )；您可以建立元素名稱為img的新元素節(jié)點。在HTML中，默認情況下為新圖像。必須添加src屬性，以指定要在set attribute(“src”，“rabbit-hat.gif”)中加載的圖片。注意：對現(xiàn)有屬性調(diào)用setAttribute()時，原始值將替換為指定的值。但是，如果調(diào)用setAttribute()