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

1、、Ajax、課程調(diào)度、使用基于Ajax的Ajax在異步請(qǐng)求發(fā)送請(qǐng)求和響應(yīng)中使用XML進(jìn)行數(shù)據(jù)傳輸、第一個(gè)、基于Ajax的、Ajax是什么？我們先舉幾個(gè)例子.backkbase購(gòu)物站點(diǎn)Google suggest Google map and many more.Ajax定義、異步JavaScript和XML(Ajax)不是新技術(shù)，而是使用事實(shí)、XHTML(HTML)和CSS構(gòu)建標(biāo)準(zhǔn)化演示層DOM進(jìn)行動(dòng)態(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請(qǐng)求，然后在服務(wù)器上啟動(dòng)處理(接收數(shù)據(jù)、執(zhí)行業(yè)務(wù)邏輯、訪問(wèn)數(shù)據(jù)庫(kù)等)，最后將HTML頁(yè)返回到瀏覽器。服務(wù)器處理請(qǐng)求時(shí)，用戶可以做什么？只等！比較現(xiàn)有web應(yīng)用程序和Ajax應(yīng)用程序(cont .)，在現(xiàn)有web應(yīng)用程序模型中，客戶端(瀏覽器或本地計(jì)算機(jī)上運(yùn)行的代碼)向服務(wù)器發(fā)出請(qǐng)求。請(qǐng)求已同步，客戶端等待服務(wù)器的響應(yīng)?？蛻舳说却龝r(shí)，沙漏(尤其是Windows)旋轉(zhuǎn)球(通常是Mac系統(tǒng))應(yīng)用程序基本上凍結(jié)，光標(biāo)會(huì)隨著時(shí)間的推移而變化，這將導(dǎo)致現(xiàn)有web應(yīng)用程序?qū)擂位蚓徛?。缺乏真正的交互。按下按鈕后，應(yīng)用程序?qū)嶋H上將變?yōu)椴豢捎茫钡絼倓傆|發(fā)的請(qǐng)求得到響應(yīng)。如果請(qǐng)求需要大量服務(wù)器處理，

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

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

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

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

7、以動(dòng)態(tài)擴(kuò)展。colors3= blue ；colors8= grey ；關(guān)聯(lián)數(shù)組：填充數(shù)組時(shí)，為每個(gè)新元素明確提供下標(biāo)。colors r = red ；colors b = black ；JavaScript語(yǔ)法操作，條件語(yǔ)句，循環(huán)語(yǔ)句，JavaScript中的算術(shù)運(yùn)算符(，-，*，/，-，等)，比較運(yùn)算符(，=)，條件語(yǔ)句(if，)JavaScript使用function關(guān)鍵字定義函數(shù)。function funcname (arg1、arg2、) statements簡(jiǎn)單函數(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語(yǔ)法對(duì)象，它是由一組相關(guān)屬性和方法組成的數(shù)據(jù)實(shí)體。屬性和方法都是“.”中選擇所需的構(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)建對(duì)象實(shí)例。var Vincent=new Person()；DOM basic，Document Object Model的首字母縮寫(xiě)DOM簡(jiǎn)介。創(chuàng)建網(wǎng)頁(yè)并將其加載到web瀏覽器中時(shí)，文檔對(duì)象模型DOM表示瀏覽器窗口中加載的當(dāng)前頁(yè)面。瀏覽器提供當(dāng)前頁(yè)面的模型。您可以通過(guò)JavaScript訪問(wèn)此模型DOM，以DOM樹(shù)結(jié)構(gòu)(例如HTML頁(yè)面DOM樹(shù)結(jié)構(gòu)(cont)的樹(shù)形式顯示文檔。瀏覽器加載頁(yè)面，并從以HTML元素開(kāi)頭的最外部HTML inclusion元素開(kāi)始的DOM樹(shù)結(jié)構(gòu)(cont .)轉(zhuǎn)換為樹(shù)狀結(jié)構(gòu)。使用樹(shù)的比喻，根元素(root element)離開(kāi)根的線表

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

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

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

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

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

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