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

Ajax課程支配Ajax基礎(chǔ)運(yùn)用Ajax發(fā)送異步懇求在懇求和響應(yīng)中運(yùn)用XML運(yùn)用JSON進(jìn)行數(shù)據(jù)傳輸?shù)谝恢vAjax基礎(chǔ)什么是Ajax?先來(lái)點(diǎn)感覺(jué)，看些例子…BACKBASE購(gòu)物網(wǎng)站GoogleSuggestGoogleMapandmanymore…Ajax定義Ajax(AsynchronousJavaScriptandXML)不是一個(gè)新的技術(shù)，事實(shí)上，它是一些舊有的成熟的技術(shù)以一種全新的更加強(qiáng)大的方式整合在一起Ajax的關(guān)鍵技術(shù)：運(yùn)用XHTML(HTML)和CSS構(gòu)建標(biāo)準(zhǔn)化的展示層運(yùn)用DOM進(jìn)行動(dòng)態(tài)顯示和交互運(yùn)用XML和XSLT進(jìn)行數(shù)據(jù)交換和操縱運(yùn)用XMLHttpRequest異步獲得數(shù)據(jù)運(yùn)用JavaScript將全部元素綁定在一起傳統(tǒng)Web應(yīng)用與Ajax應(yīng)用的比較傳統(tǒng)Web應(yīng)用與Ajax應(yīng)用的比較（cont.）在傳統(tǒng)的Web應(yīng)用模型下，大部分的用戶操作都會(huì)發(fā)送一個(gè)HTTP懇求給服務(wù)器，然后服務(wù)器起先處理（接收數(shù)據(jù)，執(zhí)行業(yè)務(wù)邏輯，訪問(wèn)數(shù)據(jù)庫(kù)等），最終向閱讀器返回HTML頁(yè)面。當(dāng)服務(wù)器處理懇求時(shí)，用戶能夠做什么呢？只有等待！傳統(tǒng)Web應(yīng)用與Ajax應(yīng)用的比較（cont.）在傳統(tǒng)的Web應(yīng)用模型下，客戶機(jī)（閱讀器或者本地機(jī)器上運(yùn)行的代碼）向服務(wù)器發(fā)出懇求。該懇求是同步的，客戶機(jī)等待服務(wù)器的響應(yīng)。當(dāng)客戶機(jī)等待的時(shí)候，會(huì)用某種形式通知您正在處理：沙漏（特殊是Windows上）旋轉(zhuǎn)皮球（通常在Mac機(jī)器上）應(yīng)用程序基本上凍結(jié)了，然后過(guò)一段時(shí)間光標(biāo)變更了這正是傳統(tǒng)Web應(yīng)用程序讓人感到笨拙或緩慢的緣由——缺乏真正的交互性。按下按鈕時(shí)，應(yīng)用程序事實(shí)上變得不能運(yùn)用，直到剛剛觸發(fā)的懇求得到響應(yīng)。假如懇求須要大量服務(wù)器處理，那么等待的時(shí)間可能很長(zhǎng)傳統(tǒng)Web應(yīng)用與Ajax應(yīng)用的比較（cont.）Ajax應(yīng)用通過(guò)在用戶和服務(wù)器之間引入一個(gè)媒介（Ajaxengine）來(lái)異步發(fā)送懇求，消退了傳統(tǒng)的發(fā)送懇求－等待－發(fā)送懇求－等待的特性，極大的提高了用戶體驗(yàn)JavaScript基礎(chǔ)JavaScript簡(jiǎn)介JavaScript是Netscape公司與Sun公司合作開(kāi)發(fā)的。在JavaScript出現(xiàn)之前，Web閱讀器不過(guò)是一種能夠顯示超文本文檔的軟件的基本部分。而在JavaScript之后，網(wǎng)頁(yè)的內(nèi)容不再局限于枯燥的文本，可交互性得到了顯著的改善JavaScript是一種腳本語(yǔ)言，一種說(shuō)明性的，基于對(duì)象的腳本語(yǔ)言。JavaScript腳本通常只能通過(guò)Web閱讀器進(jìn)行說(shuō)明和執(zhí)行而不是像一般意義上的程序那樣可以獨(dú)立運(yùn)行在HTML基礎(chǔ)上，運(yùn)用JavaScript可以開(kāi)發(fā)交互式Web網(wǎng)頁(yè)。JavaScript的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍的元素和更加精彩的內(nèi)容留意，JavaScript與Java沒(méi)有任何聯(lián)系JavaScript語(yǔ)法——

語(yǔ)句JavaScript腳本的基本組成單位。只須要簡(jiǎn)潔地把各條語(yǔ)句放在不同的行上就可以分割開(kāi)來(lái)，不須要加分號(hào)“；”結(jié)束:firststatementsecondstatement但在每條語(yǔ)句的末尾添加“；”是一種良好的編程習(xí)慣：firststatement;secondstatement;JavaScript語(yǔ)法——注釋單行注釋（雙斜杠）：//line1多行注釋：/*line1 line2*/HTML風(fēng)格注釋（不舉薦運(yùn)用）：<!--line1留意，不須要以“-->”來(lái)結(jié)束JavaScript語(yǔ)法——變量JavaScript不要求在聲明變量時(shí)必需明確指出其數(shù)據(jù)類型（所以稱JavaScript為弱類型語(yǔ)言），可以運(yùn)用統(tǒng)一的關(guān)鍵字var進(jìn)行聲明：varage=33;mood=“happy”;但是提前對(duì)變量做出聲明是一種良好的編程習(xí)慣變量名允許包含字母、數(shù)字、美元符號(hào)($)和下劃線字符，但不允許包括空格或標(biāo)點(diǎn)符號(hào)JavaScript語(yǔ)法——數(shù)據(jù)類型JavaScript變量的類型是由變量的值確定的，可以對(duì)同一個(gè)變量賜予不同數(shù)據(jù)類型的值：varage=“thirtythree”;age=33;JavaScript中重要的數(shù)據(jù)類型：未定義（undefined），變量未定義空（null），變量未初始化字符串（string），可以放在單引號(hào)或雙引號(hào)中數(shù)值（number），可以表示整數(shù)、浮點(diǎn)數(shù)布爾型（boolean），true或false對(duì)象（object）JavaScript語(yǔ)法——數(shù)組數(shù)組用來(lái)存儲(chǔ)一組值，運(yùn)用關(guān)鍵字Array來(lái)聲明，聲明時(shí)可以指明數(shù)組的長(zhǎng)度：varcolors=newArray();varcolors=newArray(3);其中new關(guān)鍵字可以省略，類似其它語(yǔ)言，數(shù)組的下標(biāo)從0起先，賦值方法也和其它語(yǔ)言類似：colors[0]=“red”;colors[1]=“black”;colors[2]=“white”;還可以運(yùn)用方括號(hào)創(chuàng)建數(shù)組時(shí)同時(shí)初始化：varcolors=[“red”,“black”,“white”];JavaScript語(yǔ)法——數(shù)組（cont.）運(yùn)用方括號(hào)創(chuàng)建數(shù)組對(duì)象的簡(jiǎn)潔方法：varcolors=[];//聲明空數(shù)組對(duì)象colors[0]=“red”;colors[1]=“black”;通過(guò)數(shù)組的length屬性可以得到數(shù)組中元素的個(gè)數(shù)。數(shù)組的長(zhǎng)度可以動(dòng)態(tài)擴(kuò)展：colors[3]=“blue”;colors[8]=“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、while、for等）JavaScript語(yǔ)法——函數(shù)運(yùn)用函數(shù)可以避開(kāi)重復(fù)輸入大量相同的內(nèi)容。JavaScript中運(yùn)用function關(guān)鍵字定義函數(shù)：functionfuncname(arg1,arg2,…){ statements; }聲明一個(gè)簡(jiǎn)潔的函數(shù)：functionmultiply(num1,num2){vartotal=num1*num2;returntotal;}聲明后可以干脆調(diào)用此函數(shù)獲得結(jié)果：varresult=multiply(5,9);留意，JavaScript中的函數(shù)不需聲明返回類型，參數(shù)也不須要聲明類型JavaScript語(yǔ)法——對(duì)象JavaScript對(duì)象是由一組相關(guān)的屬性和方法構(gòu)成的數(shù)據(jù)實(shí)體。屬性和方法都要運(yùn)用“.”來(lái)訪問(wèn)：pertyobject.method()運(yùn)用函數(shù)來(lái)定義“類”：functionPerson(){ this.age=12; =“noname”; this.sayHello=function(){ alert(“Hello”+);//其中this關(guān)鍵字不能省略！ } }運(yùn)用new關(guān)鍵字來(lái)創(chuàng)建對(duì)象實(shí)例：varvincent=newPerson();DOM基礎(chǔ)DOM簡(jiǎn)介DOM是”DocumentObjectModel”（文檔對(duì)象模型）的首字母縮寫。當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁(yè)并把它加載到Web閱讀器中時(shí)，就會(huì)在幕后創(chuàng)建一個(gè)文檔對(duì)象模型DOM表示被加載到閱讀器窗口里的當(dāng)前頁(yè)面：閱讀器向我們供應(yīng)了當(dāng)前頁(yè)面的模型，而我們可以通過(guò)JavaScript訪問(wèn)這個(gè)模型DOM把一份文檔表示為一棵樹(shù)DOM樹(shù)結(jié)構(gòu)如下的HTML頁(yè)面：DOM樹(shù)結(jié)構(gòu)（cont.）閱讀器加載該頁(yè)面并將之轉(zhuǎn)換為樹(shù)形結(jié)構(gòu)：DOM樹(shù)結(jié)構(gòu)（cont.）DOM樹(shù)中的一切是以最外層的HTML包含元素，即html元素起先的。運(yùn)用樹(shù)的比方，這叫做根元素（rootelement）從根流出的線表示不同標(biāo)記部分之間的關(guān)系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本“Trees,trees,everywhere”是title的孩子；相對(duì)的，head是title的父親（parent），title是文本“Trees,trees,everywhere”的父親。處在同一層次的且互不包含的兩個(gè)分支（如head和body）之間稱為兄弟（sibling）關(guān)系。整個(gè)樹(shù)就這樣組織下去，直到閱讀器獲得與上圖類似的結(jié)構(gòu)通常把這樣的樹(shù)結(jié)構(gòu)成為一棵節(jié)點(diǎn)樹(shù)節(jié)點(diǎn)（node）DOM文檔是由節(jié)點(diǎn)構(gòu)成的集合，此時(shí)的節(jié)點(diǎn)是文檔樹(shù)上的樹(shù)枝或者樹(shù)葉DOM中節(jié)點(diǎn)的類型：元素節(jié)點(diǎn)（elementnode），諸如<head>、<p>、<div>等。元素節(jié)點(diǎn)可以包含其它的元素，唯一沒(méi)有被包含在其它元素里的元素是<html>，它是根元素屬性節(jié)點(diǎn)（attributenode），元素或多或少地有一些屬性，屬性可以對(duì)元素做出一些具體的描述。因?yàn)閷傩钥偸潜环诺狡鹗紭?biāo)簽里，所以屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)中文本節(jié)點(diǎn)（textnode），<h1>元素中包含著文本節(jié)點(diǎn)“Trees,trees,everywhere”基本DOM方法getElementById(id)返回一個(gè)給定id屬性的元素節(jié)點(diǎn)相對(duì)應(yīng)的對(duì)象。這個(gè)方法是與document對(duì)象相關(guān)聯(lián)的函數(shù)。其中document對(duì)象代表著整個(gè)HTML文檔并可以用來(lái)訪問(wèn)全部頁(yè)面中的元素getElementsByTagName(tagname)返回一個(gè)對(duì)象數(shù)組，它們分別對(duì)應(yīng)著文檔里的一個(gè)特定的元素節(jié)點(diǎn)getAttribute()返回對(duì)象的屬性值setAttribute()修改對(duì)象的屬性值重要DOM屬性childNodes可以將節(jié)點(diǎn)樹(shù)中任何一個(gè)元素的全部子元素檢索出來(lái)，這個(gè)屬性返回一個(gè)數(shù)組，包含了給定元素節(jié)點(diǎn)的全體子元素nodeName返回元素節(jié)點(diǎn)的名稱。留意，返回的結(jié)果全部是大寫nodeType用來(lái)區(qū)分節(jié)點(diǎn)的類型，元素節(jié)點(diǎn)的nodeType屬性值是1，屬性節(jié)點(diǎn)的nodeType屬性值是2，文本節(jié)點(diǎn)的nodeType屬性值是3nodeValue可以用來(lái)存取文本節(jié)點(diǎn)的值。對(duì)于元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)這個(gè)屬性返回空重要DOM屬性（cont.）firstChild和lastChild第一個(gè)和最終一個(gè)孩子節(jié)點(diǎn)。node.firstChild等價(jià)于node.childNodes[0]，node.lastChild等價(jià)于 node.childNodes[node.childNodes.length–1]parentNode返回元素的父節(jié)點(diǎn)nextSibling返回下一個(gè)兄弟節(jié)點(diǎn)變更網(wǎng)頁(yè)結(jié)構(gòu)的DOM方法createElement(tagname)創(chuàng)建新的元素節(jié)點(diǎn)，此方法與document對(duì)象相關(guān)聯(lián)。新建的元素節(jié)點(diǎn)并未與節(jié)點(diǎn)樹(shù)相連appendChild(node)把新建的節(jié)點(diǎn)插入到節(jié)點(diǎn)樹(shù)的某個(gè)節(jié)點(diǎn)下，成為這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)createTextNode(text)創(chuàng)建文本節(jié)點(diǎn)insertBefore(newNode,targetNode)把一個(gè)新元素插入到一個(gè)現(xiàn)有元素的前面replaceChild(newChild,oldChild)替換一個(gè)孩子節(jié)點(diǎn)removeChild(node)刪除一個(gè)孩子節(jié)點(diǎn)基于DOM的Web應(yīng)用程序示例基于DOM的Web應(yīng)用程序示例首先建立一個(gè)特殊簡(jiǎn)潔的應(yīng)用程序，然后再添加一點(diǎn)DOM魔法。留意，DOM可以移動(dòng)網(wǎng)頁(yè)中的任何東西而不須要提交表單。創(chuàng)建一個(gè)簡(jiǎn)潔的網(wǎng)頁(yè)，上面只顯示一個(gè)一般的舊式大禮帽，還有一個(gè)標(biāo)記為HocusPocus!的按鈕初始的HTML清單留意按鈕的類型是button而不是提交按鈕。假如運(yùn)用提交按鈕，單擊該按鈕將導(dǎo)致閱讀器提交表單。通過(guò)運(yùn)用一般輸入按鈕而不是提交按鈕，可以把JavaScript函數(shù)和它連接起來(lái)與閱讀器交互而無(wú)需提交表單初始的HTML頁(yè)面預(yù)覽目標(biāo)效果下面增加一些魔法，用兔子的圖片替換頁(yè)面中原有的圖片：運(yùn)用getElementById()函數(shù)獲得元素節(jié)點(diǎn)首先找到網(wǎng)頁(yè)中表示img元素的DOM節(jié)點(diǎn)。一般來(lái)說(shuō)，最簡(jiǎn)潔的方法是用getElementById()方法，它屬于代表Web頁(yè)面的document對(duì)象：varelementNode=document.getElementById(“id");修改圖片，麻煩的方法完成所需修改有幾種方法：有些簡(jiǎn)潔，有些麻煩。但是運(yùn)用較麻煩的方法是一次很好的DOM練習(xí)，首先看看換圖片比較麻煩的方法；后面再重新分析一下看看有沒(méi)有更簡(jiǎn)潔的方法用帶兔子的新照片替換原有圖片的方法如下：1、創(chuàng)建新的img元素2、訪問(wèn)當(dāng)前img元素的父元素，也就是它的容器3、在已有img元素之前插入新的img元素作為該容器的子級(jí)4、刪除原來(lái)的img元素5、結(jié)合起來(lái)以便在用戶單擊按鈕時(shí)調(diào)用剛剛創(chuàng)建的函數(shù)1、創(chuàng)建新的img元素創(chuàng)建新的img元素：varnewImage=document.createElement("img"); 可以創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)，元素名為img。在HTML中基本上就是：<img/>下面須要增加一個(gè)屬性src，它指定了要加載的圖片：newImage.setAttribute("src","rabbit-hat.gif");注：假如對(duì)已有的屬性調(diào)用setAttribute()，則把原來(lái)的值替換為指定的值。但是，假如調(diào)用setAttribute()并指定一個(gè)不存在的屬性，DOM就會(huì)運(yùn)用供應(yīng)的值增加一個(gè)屬性2、獲得原始圖片的父元素現(xiàn)在有了要插入的圖片，還須要找到插入的地方。要將其插入到已有圖片之前然后再刪除原來(lái)的圖片。為此須要知道已有圖片的父元素：varimgParent=hatImage.parentNode;3、插入新圖片添加子節(jié)點(diǎn)的方法：insertBefore(newNode,targetNode)appendChild(newNode)把新圖片元素插入到原有圖片之前：imgParent.insertBefore(newImage,hatImage);現(xiàn)在原圖片的父元素有了兩個(gè)子元素：新圖片和緊跟在后面的舊圖片4、刪除舊圖片因?yàn)橐呀?jīng)得到了舊圖片元素的父節(jié)點(diǎn)，只要調(diào)用removeChild()并把須要?jiǎng)h除的節(jié)點(diǎn)傳遞給它即可：imgParent.removeChild(hatImage);完整的JavaScript函數(shù)：5、表單元素連接JavaScript每當(dāng)用戶點(diǎn)擊HocusPocus!按鈕的時(shí)候運(yùn)行showRabbit()函數(shù)。為此只要向HTML中增加一個(gè)簡(jiǎn)潔的onclick事務(wù)處理程序即可：思索：替換圖片更簡(jiǎn)潔的方法1、運(yùn)用replaceChild()函數(shù)imgParent.replaceChild(newImage,hatImage);2、干脆修改圖片的src屬性hatImage.setAttribute("src","rabbit-hat.gif");3、運(yùn)用HTMLDOM方法hatImage.src=“rabbit-hat.gif”;然后…把兔子藏起來(lái)雖然兔子從帽子中跳出來(lái)了，但是屏幕下方的按鈕照舊顯示HocusPocus!和調(diào)用showRabbit()，下面做一些修改，當(dāng)用戶再次點(diǎn)擊按鈕時(shí)把兔子藏起來(lái)！1、修改按鈕的標(biāo)簽運(yùn)用我們熟悉的方法，實(shí)現(xiàn)這個(gè)簡(jiǎn)潔的功能，在showRabbit()函數(shù)中添加如下語(yǔ)句：2、隱藏兔子隱藏兔子的方法基本上和放兔子出來(lái)完全相反，將圖片的src屬性再改回舊圖片。創(chuàng)建一個(gè)新的JavaScript函數(shù)來(lái)完成這項(xiàng)任務(wù)：3、更改事務(wù)處理函數(shù)現(xiàn)在雖然按鈕的標(biāo)簽變更了，但是單擊按鈕時(shí)的動(dòng)作沒(méi)有變。當(dāng)用戶單擊按鈕時(shí)可以運(yùn)用DOM變更事務(wù)或者發(fā)生的動(dòng)作。在JavaScript中，可以通過(guò)按鈕的onclick屬性來(lái)引用該事務(wù)，因此可以變更按鈕觸發(fā)的事務(wù)：只要賦給onclick屬性一個(gè)新的函數(shù)其次講運(yùn)用Ajax發(fā)送異步懇求運(yùn)用Ajax發(fā)送異步懇求示例考慮以下情景：當(dāng)用戶輸入郵編后，系統(tǒng)自動(dòng)填充相應(yīng)的城市和省份創(chuàng)建靜態(tài)頁(yè)面原型創(chuàng)建XMLHttpRequest要實(shí)現(xiàn)這種功能，必需特殊熟悉一個(gè)JavaScript對(duì)象，即XMLHttpRequest（簡(jiǎn)稱XHR）。這個(gè)小小的對(duì)象事實(shí)上已經(jīng)在幾種閱讀器中存在一段時(shí)間了，它是Ajax的核心。該對(duì)象的幾個(gè)常用方法和屬性：open()：建立到服務(wù)器的新懇求send()：向服務(wù)器發(fā)送懇求readyState：供應(yīng)當(dāng)前HTML的就緒狀態(tài)status：服務(wù)器響應(yīng)的狀態(tài)代碼responseText：服務(wù)器返回的懇求響應(yīng)文本創(chuàng)建XMLHttpRequest（cont.）創(chuàng)建跨閱讀器的XMLHttpRequest對(duì)象：創(chuàng)建XMLHttpRequest（cont.）留意不要被這些花括號(hào)迷住了眼睛，下面分別介紹每一步:創(chuàng)建一個(gè)新變量request并賦值false。運(yùn)用false作為推斷條件，表示還沒(méi)有創(chuàng)建XMLHttpRequest對(duì)象增加try/catch塊：嘗試創(chuàng)建XMLHttpRequest對(duì)象假如失敗,先嘗試運(yùn)用較新版本的Microsoft閱讀器創(chuàng)建Microsoft兼容的對(duì)象（Msxml2.XMLHTTP），假如失?。▏L試運(yùn)用較老版本的Microsoft閱讀器創(chuàng)建Microsoft兼容的對(duì)象（Microsoft.XMLHTTP）假如全部失敗，則保證request的值照舊為false檢查request是否照舊為false（假如一切順當(dāng)就不會(huì)是false）假如出現(xiàn)問(wèn)題則運(yùn)用JavaScript警告通知用戶出現(xiàn)了問(wèn)題建立到服務(wù)器的懇求準(zhǔn)備好XMLHttpRequest對(duì)象，就可以建立到服務(wù)器的懇求了。首先結(jié)合一些表單中的數(shù)據(jù)來(lái)構(gòu)造URL：注：escape()方法用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如，空格將被轉(zhuǎn)換成字符%20，從而能夠在URL中傳遞這些字符。然后建立懇求：建立到服務(wù)器的懇求（cont.）運(yùn)用XMLHttpRequest對(duì)象的open()方法來(lái)建立懇求。該方法有五個(gè)參數(shù)：request-type：發(fā)送懇求的類型。典型的值是GET或POST，但也可以發(fā)送HEAD懇求url：要連接的URLasynch：假如希望運(yùn)用異步連接則為true，否則為false。該參數(shù)是可選的，默認(rèn)為trueusername：假如須要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值password：假如須要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值通常運(yùn)用其中的前三個(gè)參數(shù)。事實(shí)上，即使須要異步連接，通常指定第三個(gè)參數(shù)為“true”，這樣更簡(jiǎn)潔理解運(yùn)用XMLHttpRequest發(fā)送懇求一旦懇求用open()配置好之后，就可以運(yùn)用send()方法發(fā)送懇求了，send()方法只有一個(gè)參數(shù)，就是要發(fā)送的內(nèi)容但是我們前面通過(guò)URL本身已經(jīng)發(fā)送了zipcode的值，所以這里不須要通過(guò)send()傳遞數(shù)據(jù)，只要傳遞null作為該方法的參數(shù)即可：設(shè)置回調(diào)函數(shù)由于是異步懇求，懇求發(fā)出后JavaScript方法不會(huì)等待服務(wù)器處理完成，因此代碼將接著執(zhí)行，就是說(shuō)，將退出該方法而把限制返回給表單。用戶可以接著輸入信息，應(yīng)用程序不會(huì)等待服務(wù)器當(dāng)服務(wù)器完成懇求之后，須要指定該如何處理響應(yīng)。XMLHttpRequest對(duì)象的onreadystatechange屬性允許指定一個(gè)回調(diào)函數(shù)反向調(diào)用Web頁(yè)面中的代碼當(dāng)服務(wù)器完成懇求之后，會(huì)查看XMLHttpRequest對(duì)象，特殊是onreadystatechange屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因?yàn)橛煞?wù)器向網(wǎng)頁(yè)發(fā)起調(diào)用，無(wú)論網(wǎng)頁(yè)本身正在做什么。這就是稱之為異步的緣由：用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)懇求并觸發(fā)onreadystatechange屬性指定的回調(diào)方法設(shè)置回調(diào)函數(shù)（cont.）須要特殊留意的是該屬性在代碼中設(shè)置的位置——它是在調(diào)用send()之前設(shè)置的。發(fā)送懇求之前必需設(shè)置該屬性，這樣服務(wù)器在回答完成懇求之后能夠查看該屬性！留意，這里updatePage是個(gè)函數(shù)名稱，不能寫成updatePage()函數(shù)調(diào)用的形式！這表示將updatePage()函數(shù)運(yùn)行的返回結(jié)果賦值給onreadystatechange屬性。體會(huì)JavaScript中函數(shù)也是對(duì)象的特征處理服務(wù)器響應(yīng)懇求發(fā)送后，用戶可以接著運(yùn)用Web表單（同時(shí)服務(wù)器在處理懇求）。而當(dāng)服務(wù)器完成了懇求處理，服務(wù)器查看onreadystatechange屬性確定要調(diào)用的方法。除此以外，可以將應(yīng)用程序看作其他應(yīng)用程序一樣，無(wú)論是否異步。換句話說(shuō)，不確定要實(shí)行特殊的動(dòng)作編寫響應(yīng)服務(wù)器的方法，只須要變更表單或其它的頁(yè)面結(jié)構(gòu)，讓用戶訪問(wèn)另一個(gè)URL或者做響應(yīng)服務(wù)器須要的任何事情處理函數(shù)（僅彈出簡(jiǎn)潔的警告）：處理服務(wù)器響應(yīng)（續(xù)）運(yùn)行以上代碼，依據(jù)閱讀器的不同，在表單停止彈出警告之前會(huì)看到兩次、三次甚至四次警告。緣由在于還沒(méi)有考慮HTTP就緒狀態(tài)，這是懇求/響應(yīng)循環(huán)中的一個(gè)重要部分HTTP就緒狀態(tài)（readyState）表示懇求的狀態(tài)或情形。它用于確定該懇求是否已經(jīng)起先、是否得到了響應(yīng)或者懇求/響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器供應(yīng)的響應(yīng)文本或數(shù)據(jù)是否平安。在Ajax應(yīng)用程序中須要了解五種就緒狀態(tài)：0：懇求沒(méi)有發(fā)出（在調(diào)用open()之前）1：懇求已經(jīng)建立但還沒(méi)有發(fā)出（調(diào)用send()之前）2：懇求已經(jīng)發(fā)出正在處理之中（這里通?？梢詮捻憫?yīng)得到內(nèi)容頭部）3：懇求已經(jīng)處理，響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒(méi)有完成響應(yīng)4：響應(yīng)已完成，可以訪問(wèn)服務(wù)器響應(yīng)并運(yùn)用它處理服務(wù)器響應(yīng)（續(xù)）與大多數(shù)跨閱讀器問(wèn)題一樣，這些就緒狀態(tài)的運(yùn)用也不盡一樣。事實(shí)上很少出現(xiàn)就緒狀態(tài)從0到1、2、3再到4，一些閱讀器從不報(bào)告0或1而干脆從2起先，然后是3和4，其他閱讀器則報(bào)告全部的狀態(tài)。還有一些則多次報(bào)告就緒狀態(tài)1對(duì)于Ajax編程，須要干脆處理的惟一狀態(tài)就是就緒狀態(tài)4，它表示服務(wù)器響應(yīng)已經(jīng)完成，可以平安地運(yùn)用響應(yīng)數(shù)據(jù)了?；诖耍卣{(diào)函數(shù)做如下調(diào)整：修改后就可以保證服務(wù)器的處理已經(jīng)完成，現(xiàn)在就會(huì)看到只顯示一次警告信息了處理服務(wù)器響應(yīng)（續(xù)）以上代碼看起來(lái)似乎不錯(cuò)，但是還有一個(gè)問(wèn)題——假如服務(wù)器響應(yīng)懇求并完成了處理但是報(bào)告了一個(gè)錯(cuò)誤怎么辦？服務(wù)器端代碼應(yīng)當(dāng)是由Ajax、JSP、一般HTML表單或其他類型的代碼調(diào)用的，但只能運(yùn)用傳統(tǒng)的Web專用方法報(bào)告信息。而在Web世界中，HTTP狀態(tài)碼（status）可以處理懇求中可能發(fā)生的各種問(wèn)題，比如：輸入了錯(cuò)誤的URL懇求將得到404錯(cuò)誤碼，它表示該頁(yè)面不存在403和401錯(cuò)誤碼表示所訪問(wèn)的數(shù)據(jù)受到疼惜或者禁止訪問(wèn)無(wú)論哪種狀況，這些錯(cuò)誤碼都是從完成的響應(yīng)中得到的。換句話說(shuō)，服務(wù)器執(zhí)行了懇求（即HTTP就緒狀態(tài)是4）但是沒(méi)有返回客戶機(jī)預(yù)期的數(shù)據(jù)。因此除了就緒狀態(tài)外，還須要檢查HTTP狀態(tài)。我們期望的狀態(tài)碼是200，它表示一切順當(dāng)。假如就緒狀態(tài)是4而且狀態(tài)碼是200，就可以處理服務(wù)器的數(shù)據(jù)了，而且這些數(shù)據(jù)應(yīng)當(dāng)就是要求的數(shù)據(jù)（而不是錯(cuò)誤或者其他有問(wèn)題的信息）處理服務(wù)器響應(yīng)（續(xù)）在回調(diào)函數(shù)中增加HTTP狀態(tài)（status）檢查：現(xiàn)在可以確保懇求已經(jīng)處理完成（通過(guò)就緒狀態(tài)），服務(wù)器給出了正常的響應(yīng)（通過(guò)狀態(tài)碼），最終可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)（文本形式）保存在XMLHttpRequest對(duì)象的responseText屬性中。（假如服務(wù)器選擇運(yùn)用XML響應(yīng)，則也可以運(yùn)用在responseXML屬性獲得）處理服務(wù)器響應(yīng)（續(xù)）在本例中，服務(wù)器返回郵編相應(yīng)的城市和省份，中間用逗號(hào)分開(kāi)：Tangshan,Hebei得到responseText并運(yùn)用JavaScript的split()函數(shù)從逗號(hào)分開(kāi)，得到的數(shù)組放到response中，然后更新表單中的相應(yīng)值連接Web表單最終運(yùn)用JavaScript事務(wù)函數(shù)觸發(fā)Ajax調(diào)用：輸入框的onblur屬性指定的函數(shù)當(dāng)焦點(diǎn)離開(kāi)時(shí)觸發(fā)，Ajax起先運(yùn)行了。結(jié)果就會(huì)看到填完郵編后焦點(diǎn)移開(kāi)時(shí)，表單的城市和省份信息突然更新了！編寫服務(wù)器端組件服務(wù)器端運(yùn)用JSP（當(dāng)然可以運(yùn)用Servlet）依據(jù)傳遞的郵編，返回相應(yīng)的城市和省份：留意：JSP中除了JSP標(biāo)簽和Java代碼不要出現(xiàn)任何HTML標(biāo)簽，也不要出現(xiàn)換行和空白字符，僅返回須要的響應(yīng)結(jié)果，否則這些HTML標(biāo)簽和空白字符也會(huì)作為響應(yīng)文本的一部分傳遞回客戶端小結(jié)Ajax應(yīng)用的開(kāi)發(fā)的確有些繁瑣，事實(shí)上，現(xiàn)在有很多成熟穩(wěn)定的Ajax工具葙封裝了以上諸多微小環(huán)節(jié)，是的Ajax編程更加簡(jiǎn)潔。但是假如不知道應(yīng)用程序在做什么，就很難發(fā)覺(jué)其中的問(wèn)題XMLHttpRequest對(duì)象是Ajax應(yīng)用的核心，必需特殊熟悉Ajax應(yīng)用的基本流程：創(chuàng)建XMLHttpRequest對(duì)象從Web表單中獲得須要的數(shù)據(jù)設(shè)置要連接的URL建立到服務(wù)器的連接設(shè)置服務(wù)器在完成后要運(yùn)行的回調(diào)函數(shù)發(fā)送懇求第三講在懇求和響應(yīng)中運(yùn)用XML發(fā)送XML格式的懇求XMLHttpRequest是Ajax應(yīng)用程序中運(yùn)用的基本對(duì)象?？雌饋?lái)它似乎是為通過(guò)HTTP懇求發(fā)送XML或者以某種XML格式發(fā)出HTTP懇求而設(shè)計(jì)的，但事實(shí)上它要做的只不過(guò)是為客戶機(jī)代碼（在網(wǎng)頁(yè)中通常是JavaScript）供應(yīng)一種發(fā)送HTTP懇求的方式，并不要求必需運(yùn)用XML懇求或響應(yīng)留意：雖然XML可以通過(guò)HTTP發(fā)送，但XML是一種數(shù)據(jù)格式而不是傳輸協(xié)議從客戶機(jī)發(fā)送的XML數(shù)據(jù)格式修改上一個(gè)郵編的例子，運(yùn)用XML傳遞數(shù)據(jù)。將名/值對(duì)轉(zhuǎn)化為XML數(shù)據(jù)格式：<zipcode>063000</zipcode>XML要求有一個(gè)根元素；假如運(yùn)用文檔片段（XML文檔的一部分）的話則須要一個(gè)封閉元素，將上面的XML改為以下方式（同時(shí)便于傳遞等多信息）：<location><zipcode>063000</zipcode></location>向服務(wù)器發(fā)送XML懇求中的數(shù)據(jù)必需手工格式化為XML對(duì)于XML最好運(yùn)用POST懇求，因?yàn)橛行╅喿x器限制了GET懇求字符串的長(zhǎng)度，而XML可能很長(zhǎng)告知服務(wù)器要發(fā)送的是XML而不是一般的名/值對(duì)XML通過(guò)send()方法發(fā)送，而不是附加在懇求URL最終的參數(shù)發(fā)送XML和一般文本的比較XML不是一種簡(jiǎn)潔、快速和節(jié)約空間的格式，和一般文本相比，XML通?？倳?huì)占用更多的空間，速度也更慢，因?yàn)轫氁谙⒅性黾覺(jué)ML所須要的標(biāo)簽和語(yǔ)義，同時(shí)解析XML也比處理一般文本慢構(gòu)造和維護(hù)XML不是簡(jiǎn)潔的事情XML沒(méi)有為懇求增加任何東西，除了困難性的問(wèn)題之外，和一般文本以及名/值對(duì)相比，在懇求中運(yùn)用XML事實(shí)上沒(méi)有多少好處（假如有的話）。事實(shí)上沒(méi)有任何東西可用XML而不能用一般文本發(fā)送一般地，只有當(dāng)服務(wù)器僅接受XML時(shí)才須要發(fā)送XML第四講運(yùn)用JSON進(jìn)行數(shù)據(jù)傳輸什么是JSON？JSON(JavaScriptObjectNotation)是一種輕量級(jí)的數(shù)據(jù)交換格式，易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，而且它是基于JavaScript的。JSON接受完全獨(dú)立于語(yǔ)言的文本格式，但是也運(yùn)用了類似于C語(yǔ)言家族的習(xí)慣（包括C,C++,C#,Java,JavaScript等）。這些特性使JSON成為志向的數(shù)據(jù)交換語(yǔ)言JSON有兩種結(jié)構(gòu)：“名/值”對(duì)的集合（Acollectionofname/valuepairs）。在不同的語(yǔ)言中，它被理解為對(duì)象，結(jié)構(gòu)，關(guān)聯(lián)數(shù)組等值的有序列表（Anorderedlistofvalues）。在大部分語(yǔ)言中，它被理解為數(shù)組這些都是常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。事實(shí)上大部分現(xiàn)代計(jì)算機(jī)語(yǔ)言都以某種形式支持它們。這使得一種數(shù)據(jù)格式在同樣基于這些結(jié)構(gòu)的編程語(yǔ)言之間交換成為可能JSON的基本形式對(duì)象是一個(gè)無(wú)序的“名/值”對(duì)集合。一個(gè)對(duì)象以“{”起先，“}”結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”；“名/值”對(duì)之間運(yùn)用“,”分隔：數(shù)組是值（value）的有序集合。一個(gè)數(shù)組以“[”起先，“]”結(jié)束。值之間運(yùn)用“,”分隔：字符串（string）是由雙引號(hào)包圍的隨意數(shù)量Unicode字符的集合，運(yùn)用反斜線轉(zhuǎn)義。值（value）可以是雙引號(hào)括起來(lái)的字符串（string）、數(shù)值(number)、true、false、null、對(duì)象（object）或者數(shù)組（array）。這些結(jié)構(gòu)可以嵌套數(shù)值（number）與C或者Java的數(shù)值特殊相像。JSON示例下面的JSON表示名稱/值對(duì)：{"firstName":"Brett"}多個(gè)名稱/值對(duì)串在一起:{"firstName":"Brett","lastName":"McLaughlin","email":"brett@newInstance"}從語(yǔ)法方面來(lái)看，這與名稱/值對(duì)相比并沒(méi)有很大的優(yōu)勢(shì)，但是在這種狀況下JSON更簡(jiǎn)潔運(yùn)用，而且可讀性更好當(dāng)須要表示一組值時(shí)，JSON不但能夠提高可讀性，而且可以削減困難性:{“employees":[{"firstName":"Brett","lastName":"McLaughlin","email":"brett@newInstance"},{"firstName":"Jason","lastName":"Hunter","email":"jason@servlets"},{"firstName":"Elliotte","lastName":"Harold","email":"elharo@macfaq"}]}這比相應(yīng)的XML格式表示的數(shù)據(jù)更加簡(jiǎn)潔：JSON示例（cont.）相應(yīng)的XML格式：<employees><employee><firstName>Brett</