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

日期: 2008-04-21 来源:TechTarget中国

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

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐