• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> ajax教程 >> 三步教你学会ajax开发应用

三步教你学会ajax开发应用

• 作者：创新互联 文章来源：前端开发 点击数： 更新时间：2008-05-20
• 　　ajax在很多程序员的眼里是一个很复杂或陌生的字眼,其实, AX并不复杂，自从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的业务需求了，根本没有必要弄得那么复杂。
• Ajax驱动的Web站点 :上一篇
  使用PHP和AJAX创建RSS聚合器 :下一篇