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

原创 2007年09月12日 13:36:00

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

VIM使用技巧及快捷操作

之前在网上找了找资料,拼了这篇博客《配置gvim,建立ide环境(持续更新)》,今天就说说VIM使用技巧及快捷操作。 先贴一图: 这里也是一小部分,还有外语的:...
  • losophy
  • losophy
  • 2013年10月17日 15:02
  • 8252

学习技术的三部曲:WHAT、HOW、WHY

下面是我今天写的一个Blog,转贴给大伙儿,希望论坛里的牛人多提批评意见。 最近几天有些网友在邮件里面问我关于学习的问题。有很多人觉得工作了几年,也学会了不少的类库、框架、甚至语言,但是感觉自己的能力...
  • zhaoyw2008
  • zhaoyw2008
  • 2013年07月05日 01:54
  • 2431

Ubuntu使用技巧(一)

Ubuntu使用技巧
  • antkillerfarm
  • antkillerfarm
  • 2016年05月30日 19:32
  • 1610

php无刷新简便超实用的ajax类附带实例

  • 2011年11月17日 19:13
  • 1KB
  • 下载

【javascript】脚本操作HTTP请求技术Ajax-3 (单个文件上传)

最近在看《javascript权威指南》的时候,发现它在Ajax技术上讲解了关于javascript上传文件的内容。这也是博主在多年前的一个困扰,曾经解决的办法就是借用别人的js控件,因此对这个技术理...
  • lizixiang1993
  • lizixiang1993
  • 2015年03月27日 17:19
  • 900

【javascript】脚本操作HTTP请求技术Ajax-2(POST请求)

接下来我们来介绍一下Ajax的第二种请求方式,post请求。一般情况下,浏览器发送的请求如果要进行更新修改某一数据的时候,我们会采用post请求方式而不是get请求.因为这样会有几个好处。 请求的长度...
  • lizixiang1993
  • lizixiang1993
  • 2015年03月26日 19:16
  • 924

AJAX技术入门 第三节 DOM基础和DOM操作HTML

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012年01月15日 07:53
  • 179

利用Ajax和JSON技术实现对数据库的异步操作

  • 2015年03月03日 21:12
  • 378KB
  • 下载

操作超简便的绿软截图工具FSCapture 6.3

  • 2010年05月14日 09:51
  • 1.94MB
  • 下载

电脑简便操作(非常方便)

  • 2008年11月26日 16:18
  • 29KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:快速、简便的使用AJAX技术操作的三部曲
举报原因:
原因补充:

(最多只允许输入30个字)