快速、簡(jiǎn)便的使用AJAX技術(shù)操作的三部曲

liwei58

其實(shí)AJAX并不復(fù)雜，自從AJAX技術(shù)出來(lái)后，天花亂墜的框架紛紛出臺(tái)，搞得技術(shù)開(kāi)發(fā)人員無(wú)從下手，baidu google里也有很多例子，大都是非常復(fù)雜。 　　其實(shí)就web開(kāi)發(fā)而言，AJAX技術(shù)只是一個(gè)配合，完全沒(méi)有必要本末倒置，是一種頁(yè)面優(yōu)化的技術(shù)，也就是說(shuō)，如何去優(yōu)化我們的web頁(yè)面才是AJAX的重頭戲。下面我舉個(gè)很簡(jiǎn)單的例子，可以滿足大部分的業(yè)務(wù)需求。（當(dāng)然，如果是很專業(yè)的頁(yè)面要求，可以去參考那些復(fù)雜的框架）
　　第一步：
　　寫一個(gè)后臺(tái)的“接口”，這個(gè)可以用任何語(yǔ)言來(lái)實(shí)現(xiàn)，只要能返回http報(bào)文就可以了，我這里以webwork后臺(tái)代碼舉個(gè)例子

public String hotWeek() throws Exception{        HttpServletResponse response = ServletActionContext.getResponse();        response.setContentType("text/xml; charset=gb2312");        PrintWriter out = response.getWriter();        StringBuffer insertHotHtml = new StringBuffer();        insertHotHtml.append(" ");            insertHotHtml.append("");            insertHotHtml.append("");            insertHotHtml.append("");        insertHotHtml.append("

");        out.print(insertHotHtml.toString());  //返回一個(gè)有表格的HTTP報(bào)文        return null;    }　　不用java的朋友根本不用管這些，只要記住，能返回一個(gè)HTTP報(bào)文，比如一個(gè)靜態(tài)網(wǎng)頁(yè)也可以。
　　第二步 ：
　　在頁(yè)面里加入下面這段javascript代碼

var xmlHttp;function createXMLHttpRequest(){    if (window.ActiveXObject){        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }    else if (window.XMLHttpRequest){        xmlHttp = new XMLHttpRequest();    }}function startAjaxRequest(method,async,actionUrl,data, invokeMethod){    createXMLHttpRequest();    xmlHttp.open(method, actionUrl, async);    xmlHttp.onreadystatechange = handleStateChange;    xmlHttp.send(data);    function handleStateChange(){        if(xmlHttp.readyState == 4){            if(xmlHttp.status == 200){                var nodeId = xmlHttp.responseText;                if (nodeId=='noPermission'){                    alert('你沒(méi)有權(quán)限訪問(wèn)此操作!');                }else if( (falseIndex = nodeId.indexOf("false||"))!= -1 ){                   alert('操作失敗，可能的原因?yàn)?' + nodeId.substring(falseIndex+7, nodeId.length) + "!");                }else if(nodeId=='false'){                    alert('操作失敗，請(qǐng)和管理員聯(lián)系！');                }else ...{                    if (invokeMethod == undefined){                        getResult(nodeId);                    } else {                        invokeMethod(nodeId);                    }                }            }        }    }}

　　我們要用的就是startAjaxRequest（method，async，actionUrl，data， invokeMethod） 這個(gè)方法，具體實(shí)現(xiàn)，也不可以不用理會(huì)，對(duì)于IE和firefox都可以兼容，method 要么是GET，要么是POST，async我們一般都設(shè)置為true就可以了，data用來(lái)傳數(shù)據(jù)給后臺(tái)，invokeMethod是指后臺(tái)返回?cái)?shù)據(jù)后，前臺(tái)自動(dòng)調(diào)用什么方法，如果為空，那么就默認(rèn)調(diào)用 invokeMethod（nodeId）這個(gè)方法。

$(document).ready(function(){            var acti;            $('body').html("頁(yè)面加載中...");            startAjaxRequest("GET",true,actionUrl,'');    });

　　這里我是用jQuery的，一個(gè)很好用的javascript框架。
　　"./provider！hotWeek.action" 就是我們獲取HTTP報(bào)文的地址，大家完全可以用 比如 myTable.asp myTable.php只要返回的HTTP報(bào)文是符合XML規(guī)則的HTML語(yǔ)言就可以了。
　　第三步：
　　后臺(tái)返回后的處理方法

function getResult(nodeId){        $('body').html(nodeId);    }

　　總結(jié)起來(lái)，其實(shí)只要 startAjaxRequest（"GET"，true，actionUrl，''） 這么一個(gè)方法就可以去滿足大部分AJAX的業(yè)務(wù)需求了，根本沒(méi)有必要弄得那么復(fù)雜。
來(lái)原：www