其实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的业务需求了，根本没有必要弄得那么复杂。
闽公网安备 35060202000074号