第3章web開發(fā)中客戶端技術(shù)

3章WebJavaScript技術(shù)對頁面進(jìn)行控制，與服務(wù)端進(jìn)行通信等。常用的客戶HTML、CSS、DOM、JavaScript、AJAX等。讀者通過學(xué)習(xí)這些客戶端技術(shù)，可以很容易地編寫具有豐富用戶體驗(yàn)的Web程序。本章將主要介紹JavaScript的基本功能，同時(shí)還涉及到了CSS、AJAX等技術(shù)。本章的主要內(nèi)容如下：DOMNetBeans、Dreamweaver、VisualStudio2008IDEJavaScript程序上各有千IDEJavaScript，讀者可以在實(shí)際項(xiàng)目中根據(jù)需要和實(shí)際情況選擇適合自己的JavaScriptIDE。MyEclipse中使用MyEclipseJavaIDE。MyEclipseJavaEE的開發(fā)，也同時(shí)點(diǎn)，如圖3.1所示。單擊【Next】按鈕，進(jìn)入下一步操作。在【Filename】文本框中輸入一個(gè)文件名（不用帶文件擴(kuò)展名），單擊【Finish】按鈕建立一個(gè)新的JavaScript程序文件。MyEclipseJavaScriptJavaScript的內(nèi)置對象，如window、等，在輸入“.”后，都可以列出這些對象的內(nèi)部成員。如在輸入“window.”后，就會(huì)出現(xiàn)如圖3.2所示的成員列表。 圖3.1新建JavaScript文 圖3.2window對象的成員列EclipseIDEforJavaEEEclipseIDEforJavaEEJavaEEEclipse。這個(gè)插件的功能從總體來說，沒SourceFile】節(jié)點(diǎn)3.3所示。單擊【Next】按鈕，進(jìn)入下一步操作。在【Filename】文本框中輸入一個(gè)文件名（不用帶文件擴(kuò)展名），單擊【Finish】按鈕建立一個(gè)新的JavaScript程序文件。EclipseIDEforJavaEE中的JavaScript編輯器和MyEclipse中的JavaScript編輯器類似，只是更加智能一點(diǎn)。如圖3.4所示列出了String對象（其他類型的對象，如Object也可以）圖3.3新建JavaScript程序文 圖3.4列出String對象成NetBeans中使用NetBeansSunJavaIDE（NetBeansPHP、C++等）。NetBeansJavaScript的支持也非常好，筆者感覺NetBeansJavaScriptJavaIDE更加智能。因?yàn)樗粌H可以列出對象Web工程，在彈出的快捷菜單框中【W(wǎng)eb】選項(xiàng)，在【FileTypes】列認(rèn)值，也可以在【FileName鈕建立一個(gè)JavaScript文件。

3.5NetBeans中建立一JavaScript程序文覽器，如圖3.6所示。3.6String對象的成員和支持這些成員的JavaScript3IDE外Dreamweaver來編輯JavaScriptDreaweaverJavaScript編輯器除了可以使關(guān)鍵字變色外，其他的功能和記事本差不多。因此，單純使用Dreamweaver來編輯JavaScript程序并不是可取的。JavaScriptJava的編輯JavaScriptVisualStudio2008JavaScript編輯器來編JavaScript程序。VisualStudio2008JavaScriptNetBeans中的JavaScriptNetBeans中可以指明對象成員所適合的瀏覽VisualStudio2008JavaScript編輯器中NetBeans的這些功能。VisualStudio2008JavaScript代碼時(shí)，就會(huì)自動(dòng)列出當(dāng)前可能輸入的內(nèi)容，如面曾定義的JavaScript變量、JavaScript的內(nèi)置對象等，如圖3.7所示。MyEclipseEclipseIDEforJavaEE中通過執(zhí)行【ContentAssist】命令（快捷鍵）也可以顯示當(dāng)前可能輸入的內(nèi)容（VisualStudio2008JavaScript編輯器類似）。讀者可以選擇【W(wǎng)indow】|【Preferences】命令，打開【Preferences】框。選擇框左側(cè)的【General】|【Keys】節(jié)點(diǎn)，在其右側(cè)的列表中找到【ContentAssist】選項(xiàng)，并在下面的圖3.7VisualStudio2008的JavaScript編輯 圖3.8設(shè)置【ContentAssist】命令的快捷本節(jié)將介紹JavaScript的基本語法，內(nèi)容包括JavaScript的基本數(shù)據(jù)類型、類型，以及類型之間的轉(zhuǎn)換。在JavaScript中還經(jīng)常會(huì)使用到函數(shù)和類，因此，本節(jié)還介紹了函實(shí)例：編寫第一個(gè)JavaScript程序<!--<!--greet.html--<!--JavaScript代碼<script//由按鈕單擊事件調(diào)用的函function{varname //得到【name】文如果找到【name】文本 o"+ //顯 }用于輸入消息的文本<inputtype="text"id="name"<!--調(diào)用greet方法的按鈕<inputtype="button"value="Greet"JavaScriptHTMLJavaScript代碼寫//////顯示問候語JavaScript函function{varname //得到【name】文本如果找到【name】文本 o"+ //顯 }IEFirefox3中將無法正常工作，只有在Firefox2中可以正常運(yùn)行。 的Web服務(wù)器（如IIS、Apache等）來運(yùn)行本章提供的例子。變namename=age=//定義name變//定義age變//顯示name變量//varvarproduct自行車var關(guān)鍵字定product變//product變量的雖然這兩種定義變量的方法類似，但使用var來定義變量會(huì)有一些不同，如在MyEclipse中通過“ContentAssistvar來尋找這些變var來定義變量，這些變量將不會(huì)在列表框中顯示。因此，筆者建議使varvarp1abcp2 //定義兩個(gè)變量，中間使用逗JavaScript是弱類型語言，因此，在第一次為變量賦值時(shí)，JavaScript解析器就會(huì)為變量創(chuàng)建一個(gè)相應(yīng)類型的值，如為p1創(chuàng)建一個(gè)字符串值，為p2創(chuàng)建一個(gè)整型的值。與varvarp="abc";p=//當(dāng)前值類型//當(dāng)前值類型// 變量名需要遵循如下兩條JavaScript有5種原始類型，即Undefined、Null、Boolean、Number和String。每一種JavaScripttypeof運(yùn)算符來獲得typeof來判斷一個(gè)變量是否屬于原始類型，以及屬于哪一個(gè)原始variValue=varsValue字符串";alert(typeofiValue);alert(typeofsValue);

定義整型變定義字符串變原始類型中的兩個(gè)。typeof運(yùn)算符可以返回如下5個(gè)值中的一個(gè)：下面就分別介紹上面的5種返回值。UndefinedUndefinedundefinedvar定義的變量是否為undefined。需要編寫如下的代碼：alert(typeofalert(typeof if(typeofabcundefined")alert("abc未定義");typeofundefined的字符串形式，不能使用如下的代碼來判斷abc是否為Undefined類型。////if(typeofabcundefined)alert("abc未定義");如果變量是使用關(guān)鍵字var來定義的，并且未初始化，這個(gè)變量的初始值就是varvar//name變//if(name==undefined)varvar//name變//if(typeofnameundefined")alert("name未初始化");注意：varif(name=undefined)形式判斷變量類型是否為以用1表示true，0表示false，如下面代碼所示：varvarbYes=true;varbNo=false;//定義bYes變//定義bNo變顯示bYes變//顯示bNo變if(bYes==alert("bYes的值是if(bNo==0)alert("bNo的值是Number類NumberJavaScript32位整數(shù)，也可以表示64位的浮點(diǎn)數(shù)。如下面的代碼了一個(gè)存放整數(shù)值的變量，這個(gè)變量的值是varvar須以0x開頭，如下面代碼所示：variOctalNum=variHexNum=顯示十進(jìn)制數(shù)顯示十進(jìn)制數(shù)varfNum1=23.0;varvarfNum1=23.0;varfNum2=12.45;如果表示的浮點(diǎn)數(shù)非常大，也可以采用科學(xué)來表示浮點(diǎn)數(shù)，如，可以將這個(gè)數(shù)表示成4.3245*10^8。在科學(xué)中，使用e或E表示10^，因此，可以使用varvarfNum=////顯表也可以用科學(xué)表示非常小的數(shù)，如0. variNum5.67e- // //5.67e-JavaScript默認(rèn)會(huì)將具有6個(gè)或6個(gè)以上前導(dǎo)0的浮點(diǎn)數(shù)自動(dòng)用科學(xué)表示。3.1Number類型的特殊特殊值含義表示某個(gè)值是否可以被轉(zhuǎn)換Number類型的值，可以使isNaN函數(shù)來判為true，這說明“12”可以被轉(zhuǎn)換Number類型的值，而“12a”無法轉(zhuǎn)（"0x12a"）返回false。這個(gè)值不String類型是JavaScript中唯一沒有固定大小的原始類型。它可以0個(gè)或的UCS2編碼的字符（UCS2Unicode編碼，Unicode編碼是一種國際通用varvarsName1未來varsName2希望定義字符串變定義字符串變varvarsName聰慧定義字符串變StringUCS21，如中文的每一個(gè)漢字的長度是1。如果要以字節(jié)為單位獲得字符串的長度，可以編寫如下的////StringprototypeString對象添加新方Stotype.lenB=function{//將每一個(gè)中文替換成}varsName="a聰慧b"; //定義包含中文和英文的字符串變量sName //顯示6String（Stringstring原始類型的對象表示JavaScript中有一些特殊的符號，如果這些特殊的符號要想在字符串中表示的話，就需要使用如表3.2所示的轉(zhuǎn)義符號。3.2String類型中的轉(zhuǎn)義符 String類型的值。任何類型的變量toString方法，通過這個(gè)方法，可以將相應(yīng)類型的值轉(zhuǎn)換成字符串，如下面的代varvariNum=varsStr=iNum.toString();//定義整型變//將整數(shù)轉(zhuǎn)換成字符//toString方法仍然以十進(jìn)制輸出這些數(shù)，varvariOctalNum 定義八進(jìn)制整variHexNum=0xF1; //定義十六進(jìn)制整數(shù)varsOctalNum=iOctalNum.toString();//sOctalNum的值是229varsHexNum=iHexNum.toString(); //sHexNum的值是241 //顯示229 //variNum=JavaScriptparseInt和值。使用parseInt函數(shù)的示例代碼如下：====parseInt函數(shù)的基模式，將二進(jìn)制、八進(jìn)制、十六進(jìn)制或其他進(jìn)制的字符串轉(zhuǎn)換成整數(shù)?；怯蓀arseInt方法的第2個(gè)參數(shù)指定的，代碼如下：===parseFloatparseIntparseFloat函數(shù)所轉(zhuǎn)換的0xAB，parseFloat0。下面的代碼是一個(gè)使用parseFloat函數(shù)的例子。======JavaScript中還可以使用強(qiáng)制類型轉(zhuǎn)換來處理變量值的類型。下面是JavaScript支持的3種強(qiáng)制類型轉(zhuǎn)換。//Boolean類varb1=Boolean("");varb2=Boolean("abc");varb3=Boolean(100);varb4=Boolean(0);varb5=Boolean(null);varb6=Boolean(new

//true（非空//true（非0數(shù)都返Number()parseInt()parseFloat()Number()轉(zhuǎn)換的是整個(gè)值，而不是部分“12ab”，使用parseInt()轉(zhuǎn)換后返回12，而使用Number()轉(zhuǎn)換后返回NaN。下面的代碼演示了Number()強(qiáng)制類型轉(zhuǎn)換的各種情況。n1成Number類=======Number(newString()3toString方法唯一不同的是可以將null和undefined值強(qiáng)制轉(zhuǎn)換成相應(yīng)的字符串（"null"和"undefined"）而不錯(cuò)誤，如===函數(shù)與函數(shù)調(diào)函數(shù)是JavaScript中最重要的技術(shù)之一。函數(shù)需要使用關(guān)鍵字function來，函數(shù)functionfunctionfunName(arg0,arg1,{}////定義并實(shí)現(xiàn)一JavaScript函function{alert("} 中的函數(shù)沒有返回類型，但也可以return語句來返回值，代

3.9greet函數(shù)彈出的警告//求n1和n2的 functionfunctionsum(n1,{returnn1+}n1n2varvariSum=sum(12,22);//1222的functionfunction{}fun1覆蓋了上一fun1functionfun1(){} 在JavaScript中，函數(shù)還可以使用arguments對象實(shí)現(xiàn)動(dòng)態(tài)參數(shù)，也就是在函數(shù)時(shí)arguments對象來獲得當(dāng)前函數(shù)的參數(shù)值，如下面function{varn=//arguments對象中取出sum函數(shù)的參數(shù)值，并將for(vari=0;i<arguments.length;{n }return}alert(sum(-JavaScriptFunction類來建立任何的函數(shù)，使用Function類建立函數(shù)的語法如下： varfnSum=new varfnSum=newFunction("n1","n2","returnn1+varfunName=newFunction(arg1,arg2,...,argN,String、Number等。在創(chuàng)建對象時(shí)，要使用new關(guān)鍵字，如下面的代碼創(chuàng)建了一個(gè)數(shù)組varaValues=newArray();aValues[0]="v1";aValues[1]=aValues[2]=

定義一個(gè)數(shù)組變varvaraValuesnew //用省略括號的方式定義一個(gè)數(shù)組變JavaScript對象的屬性可以動(dòng)態(tài)加入，因此，可以使用下面的代碼來創(chuàng)建一個(gè)對象，并調(diào)用其中的study方法。varoStudent=newoStudent.id=定義id屬oStudent.xm= 定義xm屬oStudent.age=定義age屬//study方oStudent.study={alert(this.xm開始學(xué)習(xí) ////Student對象的工廠函functioncreateStudent(id,xm,{varoStudent=newObject;oStudent.id=id;oStudent.xm=xm;oStudent.age=age;oStudent.study=定義id屬性定義xm屬性定義age屬性{alert(this.xm開始學(xué)習(xí)return //oStudent對}varvaroStudent1=createStudent('02', ',varoStudent2=createStudent('03','bill',//使用createStudent函數(shù)創(chuàng)建oStudent2對象 //調(diào)用oStudent1對象的study方法 //調(diào)用oStudent2對象的study方法雖然上面的代碼可以方便地建立Student對象，但是每次建立Student對象時(shí)，都要重新創(chuàng)study方法。實(shí)際上，也可以使多個(gè)對象可以共享同一個(gè)study函數(shù)，如下面的代碼////多個(gè)對象共享study方function{alert(this.xm開始學(xué)習(xí)}Student對象的工廠函數(shù)，可以共study方functioncreateStudent(id,xm,{varoStudent=newObject;oStudent.id=id; oStudent.age= oStudent.study=study;return 定義id屬xm屬性返回oStudent對象}////多個(gè)對象共享study方function{alert(this.xm開始學(xué)習(xí)}//Student類的構(gòu)造方functionStudent(id,xm,{this.id=id;this.xm=xm;this.age=age;this.study=study;//id屬//xm屬//age屬//}varoStudent1=newStudent('10','Mike',//oStudent1對varoStudent2=newStudent('20', ',//使用構(gòu)造方法創(chuàng)建oStudent2對象 //調(diào)用oStudent1對象的study方法 //調(diào)用oStudent2對象的study方Student函數(shù)內(nèi)部建立對象，而是直接使用this來代表當(dāng)前的對象實(shí)例。實(shí)際上，Student函數(shù)就是Student類prototypeprototype屬性看成是創(chuàng)建新對象所依賴性和方法），如下面的代碼使用原型方式重寫了Student類。////建立一個(gè)空的構(gòu)function{}//prototypeStudent類添加屬性Stotype.id='12';Stotype.xm='bill';Stotype.age=20;//prototypeStudent類添加方Stotype.study={alert(this.xm開始學(xué)習(xí)varoStudent=newStudent();String類添加一個(gè)可以獲得字節(jié)長度的lenB方法Stotype.lenBStotype.lenB=function{//將每一個(gè)中文替換成}vars="超人 //定義一個(gè)包含中文和英文的字符串變 //在本節(jié)將介紹一些關(guān)于JavaScript的高級技術(shù)，如操作HTML的DOM、JavaScript的DOM技術(shù)概套API，使開發(fā)人員可以用面向?qū)ο蟮姆绞絹硖幚磉@些文檔。對于XML文檔來說，有專在后面的內(nèi)容中，如果不特別說明，DOM指的都是HTMLDOM。DOMHTML語言中的各個(gè)元素（div、form等），從而可以很DOM的對象實(shí)際如果要直接操作HTML文檔，可以使用Element屬性，如下面代碼所示：varvaroHtml. varvaroHead=varoBody=//head對//body對firstChildlastChildchildNodes屬性來獲得同varvaroHead=oHtml.childNodes[0];varoBody=//head對//body對括元素本身和不包括元素本身的HTML代碼，代碼如下： //顯示包括 //顯示不包括 <script//顯示 function{varoHtml varoHead=//Html對//Head對//outerHTML屬性的//innerHTML屬性的}//顯示 function{varoHtml varoBody=oHtml.childNodes[1];//得到body對象 //顯示outerHTML屬性值 //顯示innerHTML屬性}<inputtype="buttononclick="showHeadvalue="容<inputtype="buttononclick="showBodyvalue="容的的內(nèi)容的框，如圖3.10所示。在關(guān)閉圖3.10所示的框后，又會(huì)彈出如圖3.11所示的顯示innerHTML屬性值的DOMHTML圖3.10outerHTML屬性的 圖3.11innerHTML屬性的這3種方法也就是HTML的3個(gè)方法：geementById、geementByName和geementById是這3個(gè)方法中最簡單的一個(gè)，這個(gè)方法可以根據(jù)HTML元素的idHTMLHTML文檔中，id屬性值是唯一的，也就是說，沒有兩個(gè)HTML元素的id屬性值是相同的。假設(shè)有如下的HTML代碼：<inputtype="text"id=在其中有一個(gè)id值為“my_test”的文本框?，F(xiàn)在通過geementById方法可以使用varvaroText oText.value小超人3.12 這個(gè)方法可以通過HTML元素的name屬性獲得相應(yīng)的HTML元素集合HTMLnamegeementsByName方法有可能得到多個(gè)相同name屬性值的HTML元素。假設(shè)有如下的HTML文檔：<!--5個(gè)文本框<inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/><inputtype="text"id="text"/>varvaroTexts ementsByName("text");//獲得一個(gè)文本框?qū)?個(gè)文本框賦for(vari=0;i<oTexts.length;i++)oTexts[i].value=i;圖3.12用DOM技術(shù)修改文本框中的 圖3.13用DOM技術(shù)修改多個(gè)文本框的內(nèi)varvaroInputs ");////循環(huán)Inputtypefor(vari=0;i<oInputs.length;i++)上面的代碼可獲得當(dāng)前HTML文檔內(nèi)所有的<input>。如果想獲得所有的 varoAllElements實(shí)例：圖像自動(dòng)切JavaScript的定時(shí)器來按照一定的時(shí)間間隔更新<img>標(biāo)簽中的src屬性。JavaScript中的定時(shí)器可通過setInterval函數(shù)實(shí)現(xiàn)，代碼如下： 其中第一個(gè)參數(shù)是定時(shí)器要調(diào)用的函數(shù)名（帶括號），interval表示時(shí)間間隔，單位是35jpg圖像文件，也可以使用隨書光盤中的jpg圖像文件，將這些圖像文件放到WebRoot\images中，并取名為01.jpg、02.jpg、...、05.jpg，然后編寫下面的代碼：<title>自動(dòng)切換圖像<scripttype="text/javascript">varimages=['01.jpg','02.jpg','03.jpg','04.jpg',vari //裝載圖像文件（定時(shí)器調(diào)用function{//當(dāng)顯5個(gè)圖像文件時(shí)，再1個(gè)圖像開始循if(i==i=varoImage //得到ImgvaroLabel //oImage.src='../images/'+//為 oLabel.innerText //顯示當(dāng)前的圖像}當(dāng)前圖像名：<label<imgsrc="../images/01.jpg"id="image"width="320"height=<script<scriptvaroLabel //oLabel.innerText=3loadImage函數(shù)來裝載圖像文件，并顯示要在初始化時(shí)為<label>賦值，就要將JavaScript代碼放到<label>的后面，在運(yùn)行這段代碼后，顯示的效果如圖3.14所示。3.14自動(dòng)切換圖正則表達(dá)“i”開頭的字符串，可以使用正則表達(dá)式“^i\w*JavaScript中使用以下兩種方式定varvarreExp=new//2個(gè)參數(shù)是一些控制正則表達(dá)式的指令。在默認(rèn)情況下，正則表達(dá)式是varvarreExpnewRegExp("abc //varvarreg //使用兩個(gè)斜杠來定義正則表達(dá)式變varreg=

////varvarreg1 ab結(jié)尾，中間是一個(gè)單詞字varvarreg1=/a\wb/gi;vars=alert(s.replace(reg1ok"));//使用"ok"來替換所有滿足條件的子串，替換結(jié)果正則表達(dá)式經(jīng)常被用來進(jìn)行客戶端驗(yàn)證，如號、E-mail等，如下面是驗(yàn)證號碼和E-mail的代碼：varvarregPhone=/^0\d{2,3}\-varreg=驗(yàn)驗(yàn)證E-mail的正則表面可跟兩位或三位數(shù)字，號是7位或8位的數(shù)字。E-mail的規(guī)則只有如下兩種：E-mail的正則表達(dá)式中的“?01次，“+1次，“*”0或多次。由于“.”在正則表達(dá)式中有特殊含義，因此，使用轉(zhuǎn)義符“\.”來表實(shí)例：表格排占用等問題。但如果使用JavaScript對表格進(jìn)行排序，這些問題就會(huì)迎刃而解。須用sort方法的第二種形式。ort在這個(gè)比較函數(shù)中指定。在本節(jié)中將采用比較函數(shù)對表格進(jìn)行排序。假設(shè)有如下的表格代碼：<table<tableborder="1"id=<th>序號 <td>超人 產(chǎn)生比較函數(shù)的函 {returnfunctioncompare(tr1,{varv1=//獲得上一個(gè)單元varv2=//獲得下一個(gè)單元if(iCol=={v1v2時(shí)返回-1if(parseInt(v1)>parseInt(v2))return-1;elseif(parseInt(v1)<parseInt(v2))return1;return} {v1v21，為降序if(v1>v2)returnv1v2時(shí)返回-1elseif(v1<v2)return-1;v1v2return}} 排序表格的函function{varoTable varoTBody= varaRows= varaTRs=new 存aRows中的行//循環(huán)將 for(vari=0;i<aRows.length;{} varoFragment Fragment();//創(chuàng)建一個(gè)文檔碎for(vari=0;i<aTRs.length;{ //向文檔碎片中加入每一};//刪除原來表中的數(shù)據(jù)，并添加新的已排序后的數(shù)}圖3.15按升序排序的結(jié)CSSCSSCascadingStyleSheet（層疊樣式化表單）的簡稱，是一種格式化網(wǎng)頁的語言。這是由W3C（WorldWideWebConsortium）為了彌補(bǔ)HTML在樣式編排上的不足而很難，而CSS的出現(xiàn)解決了這個(gè)問題，它專門用于網(wǎng)頁的樣式設(shè)置，使網(wǎng)頁內(nèi)容和樣CSS的基本語 其格式分為兩部分：選擇器（Selector）和樣式規(guī)則（Rule）。在上例中，H3為選擇 {} {{}Style屬性中定義樣<bodystyle="background-color:<ared;font-size:"定義好的樣式就可以了，這就是3.4.3HTML中定義樣式。HTML中定義樣只要它的id屬性值為選擇器名，就會(huì)應(yīng)用這個(gè)樣式，如下面的代碼所示：<a " 在選擇器前加實(shí)心點(diǎn)（.<a " <body HTMLHTML元素都會(huì)應(yīng)用這個(gè)樣h3{font- 下面的例子演示了如何將3.4.2節(jié)的樣式放到<style>中，然后通過選擇器來應(yīng)用<style.bg{background-color:'#0000FF'};#link{color:red;font-size:<body<h3"在外部文件中定義樣HTMLHTML頁面之間，卻無法共享樣式，因此，CSS標(biāo)準(zhǔn)中允許將樣式單獨(dú)寫在一個(gè).css文件中，然后通過<link>HTML3.4.3節(jié)中的樣式寫在了一個(gè)style.css文件中（與html頁面在同一個(gè)下），style.css文件的HTML代<!-- style.css文件<linktype="text/css"rel="stylesheet"<body<!--應(yīng)用style.css文件中定義的樣式<a"<h3樣式的繼<!--繼承 的樣式--<a"在上面的代碼中，<a>未設(shè)置font-size樣式，而其父元素<h3>設(shè)置了font-size樣式，因此，<a>也會(huì)應(yīng)用font-size樣式。AJAXAJAXWebAJAX技術(shù)，可以實(shí)現(xiàn)以無刷新的方式更新HTML元素中的內(nèi)容。因此，在本節(jié)將介紹一下AJAX技術(shù)的基本原理和一些常用的技巧，如通過XMLHttpRequest服務(wù)端資源，垮域以及信息傳輸?shù)膸追N方法。AJAX概實(shí)際上，AJAX44種技術(shù)是JavaScript、CSS、DOM和XMLHttpRequest。其中前3種技術(shù)面已經(jīng)講過了，和服務(wù)端的關(guān)系卻密不可分?？梢哉f，AJAX的最，可能也是最簡單的部分就是用JavaScript做出非?？岬男Ч还芏嗫?，使用的也只是客戶端的數(shù)據(jù)。XMLHttpRequestDHTML原有的技術(shù)，并利用從服務(wù)端獲HTTP請求的客戶端組件。開發(fā)人員可以根據(jù)不同的情況選擇以同步或異步的方式來發(fā)送HTTP請求，并獲得服務(wù)端的響應(yīng)消息。C/SXMLHttpRequest組件和服務(wù)端通信的方式來編寫Web程序和編寫C/S模式的程序的方式非常類似。在C/S程序中，客戶端一般可直接運(yùn)行.exe文件，界面叫做form。在更新form中控件的數(shù)據(jù)時(shí)，整個(gè)form并不據(jù)，并按照某些規(guī)則更新form中控件的數(shù)據(jù)。Web客戶端程序中使XMLHttpRequest組件和上述的方法類似，通過同步或異步的方式從服務(wù)端獲得相應(yīng)的數(shù)據(jù)，然后使用DOM技術(shù)找到要更新的某些HTML元素（相況下，編寫過基于C/S系統(tǒng)的開發(fā)人員會(huì)更容易適應(yīng)AJAX的開發(fā)方式。注意：在本書中如未特殊指明，使用XMLHttpRequest開發(fā)Web應(yīng)用程序，都只適合于IEAJAXWeb實(shí)例：使用XMLHttpRequest獲得Web資碼來創(chuàng)建一個(gè)XMLHttpRequest對象。varvar.XMLHTTP在XMLHttpRequest對象中有一個(gè)open方法，負(fù)責(zé)向服務(wù)端發(fā)送HTTP請求消息，這31HTTP請求方法（GET、POST等）2個(gè)參數(shù)是服務(wù)端的URL，第3個(gè)參數(shù)指定了XMLHttpRequest對象是以同步，還是以異步的方式發(fā)送請求消息。如果為true，表示以異步的方式發(fā)送，如果為false，表示以同步的方式發(fā)送。XMLHttpRequestsend方法負(fù)責(zé)向服務(wù)端發(fā)送數(shù)據(jù)。下面的代碼演示了如何用同步的方式發(fā)送HTTP請求消息，并接收服務(wù)端的響應(yīng)消息。varvarmyRequest=//XMLHTTPRequest對XMLHttpRequest對象創(chuàng)建成功，以同步的方式向服務(wù)端發(fā)送請求，并接收響應(yīng)消if{myRequest.open("POSTurl //同步發(fā)送HTTP // //獲得并顯示HTTP}varvarmyRequest=//XMLHTTPRequest對XMLHttpRequest對象創(chuàng)建成功，以異步的方式向服務(wù)端發(fā)送請求，并接收響應(yīng)消if{myRequest.onreadystatechange=function{狀態(tài)4時(shí)表示響應(yīng)消息成if(myRequest.readyState=={ //獲得響應(yīng)消息并顯示這}myRequest.open("POST","/webdemo/servlet/AjaxEncode",//HTTP請求消 向服務(wù)端發(fā)送空數(shù)}由于使用異步方式發(fā)送HTTP請求后，send方立即返回，因此，不能直接在open方法后responseText屬性，而要使有XMLHttpRequest對象的一個(gè)onreadystatechange方法，這個(gè)方法在XMLHttpRequest服務(wù)端資源的過程中在不同的狀態(tài)調(diào)用。其中當(dāng)readState的狀態(tài)是4時(shí)，表示成功獲得了響應(yīng)實(shí)例：使用XMLHttpRequest跨域Web資為了安全起見，在默認(rèn)情況下，XMLHttpRequest不允許跨域Web資源。但可以通過某些方法這些安全措施。在Firefox中，可以通過如下兩步來打開跨域WebFirefox，在地址欄中輸入“about:config3.16所示的配置3.16Firefox的配置項(xiàng)列動(dòng)找到這個(gè)配置，如圖3.17所示。3.17signed.applets.codebase_principal_support的配選中【signed.applets.codebase_principal_supporttrue（如果已經(jīng)是true了，就繼續(xù)執(zhí)行下一步）。////只適用于Firefox{{//打開跨域 }catch{}}碼。但在跨域時(shí)會(huì)出現(xiàn)一個(gè)如圖3.19所示的提示框。圖3.18Firefox的安全詢問 圖3.19IE6的安全提示單擊【是(Y)】按鈕后，就可以跨域了實(shí)例：AJAX3種交換數(shù)據(jù)方XMLHttpRequest組