其實AJAX並不復雜自從AJAX技術出來後天花亂墜的框架紛紛出台搞得技術開發人員無從下手baidu google裡也有很多例子大都是非常復雜
其實就web開發而言AJAX技術只是一個配合完全沒有必要本末倒置是一種頁面優化的技術也就是說如何去優化我們的web頁面才是AJAX的重頭戲下面我舉個很簡單的例子可以滿足大部分的業務需求（當然如果是很專業的頁面要求可以去參考那些復雜的框架）
第一步
寫一個後台的接口這個可以用任何語言來實現只要能返回http報文就可以了我這裡以webwork後台代碼舉個例子
public String hotWeek() throws Exception{
HttpServletResponse response = ServletActionContextgetResponse();
responsesetContentType(text/xml; charset=gb);
PrintWriter out = responsegetWriter();
StringBuffer insertHotHtml = new StringBuffer();
insertHotHtmlappend( );
insertHotHtmlappend();
insertHotHtmlappend();
insertHotHtmlappend();
insertHotHtmlappend( );
outprint(insertHotHtmltoString()); //返回一個有表格的HTTP報文
return null;
}
不用java的朋友根本不用管這些只要記住能返回一個HTTP報文比如一個靜態網頁也可以
第二步
在頁面裡加入下面這段javascript代碼
var xmlHttp;
function createXMLHttpRequest(){
if (windowActiveXObject){
xmlHttp = new ActiveXObject(MicrosoftXMLHTTP);
}
else if (windowXMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startAjaxRequest(methodasyncactionUrldata invokeMethod){
createXMLHttpRequest();
xmlHttpopen(method actionUrl async);
xmlHttponreadystatechange = handleStateChange;
xmlHttpsend(data);
function handleStateChange(){
if(xmlHttpreadyState == ){
if(xmlHttpstatus == ){
var nodeId = xmlHttpresponseText;
if (nodeId==noPermission){
alert(你沒有權限訪問此操作!);
}else if( (falseIndex = nodeIdindexOf(false||))!= ){
alert(操作失敗可能的原因為: + nodeIdsubstring(
falseIndex+ nodeIdlength) + !);
}else if(nodeId==false){
alert(操作失敗請和管理員聯系！);
}else {
if (invokeMethod == undefined){
getResult(nodeId);
} else {
invokeMethod(nodeId);
}
}
}
}
}
}
我們要用的就是startAjaxRequest（methodasyncactionUrldata invokeMethod） 這個方法具體實現也不可以不用理會對於IE和firefox都可以兼容method 要麼是GET要麼是POSTasync我們一般都設置為true就可以了data用來傳數據給後台invokeMethod是指後台返回數據後前台自動調用什麼方法如果為空那麼就默認調用 invokeMethod（nodeId）這個方法
$(document)ready(function(){
var actionUrl = /provider!hotWeekaction;
$(bodyl(頁面加載中);
startAjaxRequest(GETtrueactionUrl);
});
這裡我是用jQuery的一個很好用的javascript框架
/provider！hotWeekaction 就是我們獲取HTTP報文的地址大家完全可以用 比如 myTableasp myTablephp只要返回的HTTP報文是符合XML規則的HTML語言就可以了
第三步
後台返回後的處理方法
function getResult(nodeId){
$(bodyl(nodeId);
}
總結起來其實只要 startAjaxRequest（GETtrueactionUrl） 這麼一個方法就可以去滿足大部分AJAX的業務需求了根本沒有必要弄得那麼復雜
From:http://tw.wingwit.com/Article/program/Java/hx/201311/26947.html
