赛迪网 > IT技术 Java > 技术动态
  IT资讯搜索
 
IT产品搜索
[程序开发][网管世界][网络安全][数据库技术]
[操作系统][嘉宾聊天·在线访谈][活动集锦]
[精彩专题][Symantec专区][订阅IT技术周刊]
[开发论坛][网管论坛][安全论坛][数据库论坛]
[操作系统论坛][Sybase专区][IBM dW技术专区]
[病毒求助][病毒与漏洞播报][文档·源码下载]

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

发布时间:2008.04.17 05:06     来源:赛迪网    作者:直升机

【赛迪网技术报道】

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

(责任编辑:高爽)


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· J2ME编程应用平台中几个重要概念的介绍 (04-16) · 系统构建高性能J2EE应用的五种核心策略 (04-15)
· 系统构建高性能J2EE应用的五种核心策略 (04-15) · 关于在Java Web中的入侵检测及简单实现 (04-15)
· SecureJSH新特性 (04-13) · 关于java编程中的JDBC (04-13)
· 基于JDK5.0一些collection类的使用总结 (04-13) · 程序员杂谈:Ajax优于JSF的几个原因讨论 (04-13)
· java编程进阶 关于java编程中的JDBC的介绍 (04-13) · Java编程交互管理工具:SecureJSH新特性 (04-13)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
  赛迪推荐  
  手机·资费 ·新品·导购·评测·手机资费·宽带
手机搜索  诺基亚 N73 MOTO Z6
  IT产品 ·笔记本·台式机·服务器·打印·投影
IT产品搜索 
  IT技术 ·开发·网管·安全·数据库·操作系统
  信息化 ·热点·专题·访谈·周刊·方案案例
· 工信部“三定”公布 总编制731名设24司局
· 北京发电子商务监管意见 营利性网店须办照
· 直播 08中国城市信息化高峰论坛 案例点评
· 烽火网络校园解决方案 移民安置信息管理系统
  IT博客 ·曾剑秋·项立刚·Java学习·网管
  IT技术论坛 ·开发·网管·安全·数据库·系统