SSH 網站制作之AJAX無刷新動態更新頁面

2019-11-17 03:27:46

字體：大中小

來源：轉載

供稿：網友

　　在做網頁時，經常需要根據用戶輸入信息，進行“局部頁面的刷新”也就是要使用所謂的Ajax技術。最近正好也在用，就總結一下。

　　1.AJAX介紹

AJAX不是一種新的編程語言，而是一種用于創建更好更快以及交互性更強的 Web 應用程序的技術。通過 AJAX，javaScript 可使用xmlHttPRequest對象來直接與服務器進行通信。通過這個對象，Javascript 可在不重載頁面的情況與WEB服務器交換數據。

　　AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。

　　2.AJAX用在javascript中的基本模式

　　　　2.1創建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寫主要的控制函數。包括設置要調用的Action方法或者Selvet方法，傳遞的參數，回調函數等。

function control(){var url="XXX.do?par1=" + XXX + "";  //這里寫上跳轉到Action的路徑和方法,并把參數傳進去     if (xmlhttp!=null){         xmlhttp.onreadystatechange=callBack;    //回調函數callBack         xmlhttp.open("POST",url,true);      //打開請求，寫入請求的url，方式(post)
         xmlhttp.send(null);　　   }       else{         　　alert("Your browser does not support XMLHTTP.");       }}

　　　　2.3一般后臺返回的數據，是XML形式的，需要對其進行解析。下面是一個解析方法，參數xmlString是后臺返回的String形式的XML數據。

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函數，對獲取到是XML進行處理，動態更新jsp頁面

function callBack() {    if (xmlhttp.readyState == 4) {
　　    // 判斷對象狀態        if (xmlhttp.status == 200) {     // 信息已經成功返回，開始處理信息;        　　寫入具體的處理模塊 　　　　 
    　　}         else { //頁面不正常            alert("您所請求的頁面有異常。");        }     }}

　　3.后臺Action的處理

　　在后臺的對應的Action中，一般將要返回的數據信息，寫成XML格式。

public ActionForward execute(ActionMapping mapping, ActionForm form,            HttpServletRequest request, HttpServletResponse response) throws Exception {                request.setCharacterEncoding("utf-8");        StringBuffer sbuff = new StringBuffer();    //sbuff保存XML文件的具體內容        sbuff.append("<?xml version=/"1.0/"   encoding=/"UTF-8/"?>");        sbuff.append("<result>");        sbuff.append(context);　　//context為要返回的實際內容            sbuff.append("</result>");         response.setHeader("content-type", "text/xml;charset=UTF-8");        PrintWriter out = response.getWriter();        out.println(sbuff.toString());    //寫入具體處理內容        out.flush();    //刷新打印流        out.close();    //關閉        return null;    }