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