快速、簡便使用AJAX技術的三部曲

 其實AJAX並不複雜，自從AJAX技術出來後，天花亂墜的框架紛紛出臺，搞得技術開發人員無從下手，baidu google裏也有很多例子，大都是複雜要死。其實就web開發而言，AJAX技術只是一個配合，完全沒有必要本末倒置，是一種頁面優化的技術，也就是說，如何去優化我們的web頁面纔是AJAX的重頭戲。下面我舉個很簡單的例子，可以滿足大部分的業務需求。（當然，如果是很專業的頁面要求，可以去參考那些複雜的框架）

第一步：

寫一個後臺的“接口”，這個可以用任何語言來實現，只要能返回http報文就可以了，我這裏以webwork後臺代碼舉個例子

    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(" <table width=171 border=0 align=center cellpadding=0 cellspacing=0>   ");        
    
            insertHotHtml.append("<tr> ");
            insertHotHtml.append("<td width=23 height=25></td>  ");
            insertHotHtml.append("</tr> ");
            
        insertHotHtml.append("</table> ");

        out.print(insertHotHtml.toString());  //返回一個有表格的HTTP報文
                
        return null;
    }

不用java的朋友根本不用管這些，只要記住，能返回一個HTTP報文，比如一個靜態網頁也可以。

第二步 ：

在頁面里加入下面這段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('你沒有權限訪問此操作!');
                }else if( (falseIndex = nodeId.indexOf("false||"))!= -1 )...{
                    alert('操作失敗，可能的原因爲:' + nodeId.substring(falseIndex+7, nodeId.length) + "!");
                }else if(nodeId=='false')...{
                    alert('操作失敗，請和管理員聯繫！');
                }else ...{
                    if (invokeMethod == undefined) ...{
                        getResult(nodeId);
                    } else ...{
                        invokeMethod(nodeId);
                    }
                }
            }
        }
    }    
}

我們要用的就是startAjaxRequest(method,async,actionUrl,data, invokeMethod) 這個方法，具體實現，也不可以不用理會，對於IE和firefox都可以兼容，method 要麼是GET，要麼是POST，async我們一般都設置爲true就可以了，data用來傳數據給後臺，invokeMethod是指後臺返回數據後，前臺自動調用什麼方法，如果爲空，那麼就默認調用 invokeMethod(nodeId)這個方法。

    $(document).ready(function()...{
            var actionUrl = "./provider!hotWeek.action";
            $('body').html("<strong>頁面加載中...</strong>");
            startAjaxRequest("GET",true,actionUrl,'');    

    });

這裏我是用jQuery的，一個很好用的javascript框架。
 "./provider!hotWeek.action" 就是我們獲取HTTP報文的地址，大家完全可以用  比如 myTable.asp myTable.php只要返回的HTTP報文是符合XML規則的HTML語言就可以了。


最後一步：

後臺返回後的處理方法

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

總結起來，其實只要 startAjaxRequest("GET",true,actionUrl,'') 這麼一個方法就可以去滿足大部分AJAX的業務需求了，根本沒有必要弄得那麼複雜。