本科做課設(shè)的時(shí)候也用過ajax，但是當(dāng)時(shí)做出來的東西在大部分瀏覽器中都沒法異步更新頁面內(nèi)容，當(dāng)時(shí)也就得過且過了。
前段時(shí)間做demo（萬惡的demo讓我復(fù)習(xí)了多少東西……）又把a(bǔ)jax拿過來復(fù)習(xí)了一遍，終于可以適應(yīng)主流的ie、firefox、chrome三大瀏覽器的較新版本（最近1年的版本吧，再早的版本沒有試過，但想必也沒什么問題）了。
小結(jié)如下：
1、ajax的實(shí)現(xiàn)步驟
實(shí)現(xiàn)ajax異步更新，需要一個(gè)異步通信方法，只要在頁面中的html標(biāo)簽的事件處理腳本或者其他的js代碼中調(diào)用該異步通信方法就可以完成頁面的異步更新。該方法包括以下幾個(gè)步驟：
s1: 獲取一個(gè)XMLHttpRequest對(duì)象
s2: 編寫一個(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了。
- var xmlHttp;
- function createXmlHttpRequest()
- {
- if (window.XMLHttpRequest)
- {
- xmlHttp=new XMLHttpRequest();
- }
- else if (window.ActiveXObject)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
3、編寫處理函數(shù)
處理函數(shù)基本就是這樣：
- function processXXX()
- {
- if (xmlHttp.readyState==4)
- {
- if (xmlHttp.status==200)
- {
- //……
- }
- }
- }
可以通過xmlHttp得到responseText或者responseXML，分別得到服務(wù)器端的字符串形式或者xml形式的響應(yīng)，前者通常是一段可以直接用來更新頁面的內(nèi)容，而后者是xml格式的數(shù)據(jù)，可以用js取出其中的元素值。根據(jù)需要選用一種之一即可。例如更新頁面上的一個(gè)統(tǒng)計(jì)數(shù)值的處理函數(shù)如下：
- function processStatistics()
- {
- var responseContext;
- if (xmlHttp.readyState==4)
- {
- if (xmlHttp.status==200)
- {
- responseContext=xmlHttp.responseText;
- document.getElementById("statistics").innerHTML=responseContext;
- }
- }
- }
4、發(fā)送異步請(qǐng)求
這一步是ajax的關(guān)鍵，通過調(diào)用xmlHttp的open和send方法來完成，例如：
- xmlHttp.open("GET", "status.jsp?id="+Math.random(), true);
- xmlHttp.send(null);
一般request參數(shù)不多時(shí)用GET方式就可以，open的第二個(gè)參數(shù)是要請(qǐng)求的服務(wù)器端的一個(gè)url，可以是jsp或者servlet，也可已是struts2 action。如果是struts2 action的話，那么在自定義的action控制器中不要配置返回視圖，直接在execute方法中用servlet api拿到PrintWriter、寫入要返回的內(nèi)容并flush+close PrintWriter，在execute方法中return null（不跳轉(zhuǎn)到某個(gè)試圖）即可。url中的id參數(shù)是一個(gè)無實(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)頁的內(nèi)容不會(huì)在很短的一段時(shí)間內(nèi)更新。但對(duì)于ajax，有時(shí)需要頻繁地進(jìn)行異步更新（如定時(shí)更新頁面上的系統(tǒng)狀態(tài)），所以需要加上一個(gè)隨機(jī)的參數(shù)，防止cache中的內(nèi)容影響頁面的更新。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");
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
