在做網(wǎng)頁時，經(jīng)常需要根據(jù)用戶輸入信息，進行“局部頁面的刷新”也就是要使用所謂的Ajax技術(shù)。最近正好也在用，就總結(jié)一下。
1.AJAX介紹
AJAX不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強的 Web 應(yīng)用程序的技術(shù)。通過 AJAX，javaScript 可使用xmlHttPRequest對象來直接與服務(wù)器進行通信。通過這個對象，Javascript 可在不重載頁面的情況與WEB服務(wù)器交換數(shù)據(jù)。
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務(wù)器請求少量的信息，而不是整個頁面。
2.AJAX用在javascript中的基本模式
2.1創(chuàng)建xmlhttpRequest對象，用于異步傳輸
var xmlhttp;if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
2.2寫主要的控制函數(shù)。包括設(shè)置要調(diào)用的Action方法或者Selvet方法，傳遞的參數(shù)，回調(diào)函數(shù)等。
function control(){var url="XXX.do?par1=" + XXX + ""; //這里寫上跳轉(zhuǎn)到Action的路徑和方法,并把參數(shù)傳進去 if (xmlhttp!=null){ xmlhttp.onreadystatechange=callBack; //回調(diào)函數(shù)callBack xmlhttp.open("POST",url,true); //打開請求，寫入請求的url，方式(post)
xmlhttp.send(null); } else{ alert("Your browser does not support XMLHTTP."); }}
2.3一般后臺返回的數(shù)據(jù)，是XML形式的，需要對其進行解析。下面是一個解析方法，參數(shù)xmlString是后臺返回的String形式的XML數(shù)據(jù)。
function loadXML(xmlString) { var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; var xmlDoc; for(var i=0;i<xmlDomVersions.length;i++){ try{ xmlDoc = new ActiveXObject(xmlDomVersions[i]); xmlDoc.async = false; xmlDoc.loadXML(xmlString); //loadXML方法載入xml字符串 return xmlDoc; } catch(e){ } } }
2.4寫callbBack函數(shù)，對獲取到是XML進行處理，動態(tài)更新jsp頁面
function callBack() { if (xmlhttp.readyState == 4) {
// 判斷對象狀態(tài) if (xmlhttp.status == 200) { // 信息已經(jīng)成功返回，開始處理信息; 寫入具體的處理模塊
} else { //頁面不正常 alert("您所請求的頁面有異常。"); } }}
3.后臺Action的處理
在后臺的對應(yīng)的Action中，一般將要返回的數(shù)據(jù)信息，寫成XML格式。
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); StringBuffer sbuff = new StringBuffer(); //sbuff保存XML文件的具體內(nèi)容 sbuff.append("<?xml version=/"1.0/" encoding=/"UTF-8/"?>"); sbuff.append("<result>"); sbuff.append(context); //context為要返回的實際內(nèi)容 sbuff.append("</result>"); response.setHeader("content-type", "text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println(sbuff.toString()); //寫入具體處理內(nèi)容 out.flush(); //刷新打印流 out.close(); //關(guān)閉 return null; }
新聞熱點
疑難解答
