快速、简便的使用AJAX技术操作的三部曲

其实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的业务需求了根本没有必要弄得那么复杂