其實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("

insertHotHtml.append("

insertHotHtml.append("

insertHotHtml.append("

insertHotHtml.append("

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("頁面加載中...");

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的業務需求了，根本沒有必要弄得那么復雜。