|
本科做課設(shè)的時(shí)候也用過(guò)ajax,，但是當(dāng)時(shí)做出來(lái)的東西在大部分瀏覽器中都沒(méi)法異步更新頁(yè)面內(nèi)容，當(dāng)時(shí)也就得過(guò)且過(guò)了,。 前段時(shí)間做demo（萬(wàn)惡的demo讓我復(fù)習(xí)了多少東西……）又把a(bǔ)jax拿過(guò)來(lái)復(fù)習(xí)了一遍,，終于可以適應(yīng)主流的ie、firefox,、chrome三大瀏覽器的較新版本（最近1年的版本吧,，再早的版本沒(méi)有試過(guò)，但想必也沒(méi)什么問(wèn)題）了,。 小結(jié)如下： 1,、ajax的實(shí)現(xiàn)步驟實(shí)現(xiàn)ajax異步更新，需要一個(gè)異步通信方法,，只要在頁(yè)面中的html標(biāo)簽的事件處理腳本或者其他的js代碼中調(diào)用該異步通信方法就可以完成頁(yè)面的異步更新,。該方法包括以下幾個(gè)步驟：
s1: 獲取一個(gè)XMLHttpRequest對(duì)象 s2: 編寫(xiě)一個(gè)處理函數(shù)，綁定到XMLHttpRequest對(duì)象的onreadystatechange事件上，該處理函數(shù)用于在ajax請(qǐng)求的狀態(tài)發(fā)生變化時(shí)進(jìn)行相應(yīng)的處理 s3: 在XMLHttpRequest對(duì)象上open一個(gè)request,，形如：xmlHttp.open("GET", "status.jsp?id="+Math.random()); s4: setRequestHeader("header", "value");可以設(shè)置各種header,，如果服務(wù)器端不需要header信息，也可已省略這一步 s5: send() request 最為關(guān)鍵的就是s2和s3. 2,、獲取XMLHttpRequest對(duì)象這么干就OK了,。
[javascript] view plaincopy
3、編寫(xiě)處理函數(shù)處理函數(shù)基本就是這樣： [javascript] view plaincopy
可以通過(guò)xmlHttp得到responseText或者responseXML,，分別得到服務(wù)器端的字符串形式或者xml形式的響應(yīng),，前者通常是一段可以直接用來(lái)更新頁(yè)面的內(nèi)容，而后者是xml格式的數(shù)據(jù),，可以用js取出其中的元素值,。根據(jù)需要選用一種之一即可。例如更新頁(yè)面上的一個(gè)統(tǒng)計(jì)數(shù)值的處理函數(shù)如下： [javascript] view plaincopy
4,、發(fā)送異步請(qǐng)求這一步是ajax的關(guān)鍵,，通過(guò)調(diào)用xmlHttp的open和send方法來(lái)完成，例如： [javascript] view plaincopy
一般request參數(shù)不多時(shí)用GET方式就可以,，open的第二個(gè)參數(shù)是要請(qǐng)求的服務(wù)器端的一個(gè)url,，可以是jsp或者servlet，也可已是struts2 action,。如果是struts2 action的話(huà),，那么在自定義的action控制器中不要配置返回視圖，直接在execute方法中用servlet api拿到PrintWriter,、寫(xiě)入要返回的內(nèi)容并flush+close PrintWriter,，在execute方法中return null（不跳轉(zhuǎn)到某個(gè)試圖）即可。url中的id參數(shù)是一個(gè)無(wú)實(shí)際意義的參數(shù),，但是非常重要,，很多瀏覽器中都會(huì)有cache，請(qǐng)求一個(gè)地址時(shí),，瀏覽器會(huì)檢查cache中是否有最近的該url的響應(yīng)內(nèi)容,，如果有就不會(huì)向服務(wù)器發(fā)送請(qǐng)求，而是直接返回cache中的內(nèi)容,，這樣可以提高瀏覽的速度,。瀏覽器cache是基于這樣一個(gè)假設(shè)：網(wǎng)頁(yè)的內(nèi)容不會(huì)在很短的一段時(shí)間內(nèi)更新。但對(duì)于ajax,，有時(shí)需要頻繁地進(jìn)行異步更新（如定時(shí)更新頁(yè)面上的系統(tǒng)狀態(tài)）,，所以需要加上一個(gè)隨機(jī)的參數(shù)，防止cache中的內(nèi)容影響頁(yè)面的更新,。open的第三個(gè)參數(shù)為true表示采用異步方式處理請(qǐng)求,，ajax必須用true,，一般該參數(shù)在缺省情況下都是true。 send方法的參數(shù)在GET方式下為null即可,，在POST方式下send的參數(shù)就是要發(fā)送的key-value數(shù)據(jù),，多條數(shù)據(jù)之間用&分隔，如果post要以表單的形式發(fā)送數(shù)據(jù),，還需要設(shè)置header: setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
|
|
