服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

关于快速简便的使用ajax技术操作的介绍

【赛迪网技术报道】

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

cellspacing=0> ");

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

扫描关注微信公众号