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

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

定義整型變定義字符串變原始類型中的兩個。typeof運算符可以返回如下5個值中的一個：下面就分別介紹上面的5種返回值。UndefinedUndefinedundefinedvar定義的變量是否為undefined。需要編寫如下的代碼：alert(typeofalert(typeof if(typeofabcundefined")alert("abc未定義");typeofundefined的字符串形式，不能使用如下的代碼來判斷abc是否為Undefined類型。////if(typeofabcundefined)alert("abc未定義");如果變量是使用關(guān)鍵字var來定義的，并且未初始化，這個變量的初始值就是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位的浮點數(shù)。如下面的代碼了一個存放整數(shù)值的變量，這個變量的值是varvar須以0x開頭，如下面代碼所示：variOctalNum=variHexNum=顯示十進制數(shù)顯示十進制數(shù)varfNum1=23.0;varvarfNum1=23.0;varfNum2=12.45;如果表示的浮點數(shù)非常大，也可以采用科學來表示浮點數(shù)，如，可以將這個數(shù)表示成4.3245*10^8。在科學中，使用e或E表示10^，因此，可以使用varvarfNum=////顯表也可以用科學表示非常小的數(shù)，如0. variNum5.67e- // //5.67e-JavaScript默認會將具有6個或6個以上前導0的浮點數(shù)自動用科學表示。3.1Number類型的特殊特殊值含義表示某個值是否可以被轉(zhuǎn)換Number類型的值，可以使isNaN函數(shù)來判為true，這說明“12”可以被轉(zhuǎn)換Number類型的值，而“12a”無法轉(zhuǎn)（"0x12a"）返回false。這個值不String類型是JavaScript中唯一沒有固定大小的原始類型。它可以0個或的UCS2編碼的字符（UCS2Unicode編碼，Unicode編碼是一種國際通用varvarsName1未來varsName2希望定義字符串變定義字符串變varvarsName聰慧定義字符串變StringUCS21，如中文的每一個漢字的長度是1。如果要以字節(jié)為單位獲得字符串的長度，可以編寫如下的////StringprototypeString對象添加新方Stotype.lenB=function{//將每一個中文替換成}varsName="a聰慧b"; //定義包含中文和英文的字符串變量sName //顯示6String（Stringstring原始類型的對象表示JavaScript中有一些特殊的符號，如果這些特殊的符號要想在字符串中表示的話，就需要使用如表3.2所示的轉(zhuǎn)義符號。3.2String類型中的轉(zhuǎn)義符 String類型的值。任何類型的變量toString方法，通過這個方法，可以將相應類型的值轉(zhuǎn)換成字符串，如下面的代varvariNum=varsStr=iNum.toString();//定義整型變//將整數(shù)轉(zhuǎn)換成字符//toString方法仍然以十進制輸出這些數(shù)，varvariOctalNum 定義八進制整variHexNum=0xF1; //定義十六進制整數(shù)varsOctalNum=iOctalNum.toString();//sOctalNum的值是229varsHexNum=iHexNum.toString(); //sHexNum的值是241 //顯示229 //variNum=JavaScriptparseInt和值。使用parseInt函數(shù)的示例代碼如下：====parseInt函數(shù)的基模式，將二進制、八進制、十六進制或其他進制的字符串轉(zhuǎn)換成整數(shù)?；怯蓀arseInt方法的第2個參數(shù)指定的，代碼如下：===parseFloatparseIntparseFloat函數(shù)所轉(zhuǎn)換的0xAB，parseFloat0。下面的代碼是一個使用parseFloat函數(shù)的例子。======JavaScript中還可以使用強制類型轉(zhuǎn)換來處理變量值的類型。下面是JavaScript支持的3種強制類型轉(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)換的是整個值，而不是部分“12ab”，使用parseInt()轉(zhuǎn)換后返回12，而使用Number()轉(zhuǎn)換后返回NaN。下面的代碼演示了Number()強制類型轉(zhuǎn)換的各種情況。n1成Number類=======Number(newString()3toString方法唯一不同的是可以將null和undefined值強制轉(zhuǎn)換成相應的字符串（"null"和"undefined"）而不錯誤，如===函數(shù)與函數(shù)調(diào)函數(shù)是JavaScript中最重要的技術(shù)之一。函數(shù)需要使用關(guān)鍵字function來，函數(shù)functionfunctionfunName(arg0,arg1,{}////定義并實現(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對象實現(xiàn)動態(tài)參數(shù)，也就是在函數(shù)時arguments對象來獲得當前函數(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)建對象時，要使用new關(guān)鍵字，如下面的代碼創(chuàng)建了一個數(shù)組varaValues=newArray();aValues[0]="v1";aValues[1]=aValues[2]=

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

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