网窝编程序频道致力于编程技术研究,收集国内外编程技术教程,开源交流,编程培训,编程资讯等资料,并免费提供编程工具,编程教程源码下载等服务。

搜索:
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
  • 网窝源码下载
您现在的位置:  -> Web开发 -> JSP >> 文章正文 : 我要发布 RSS        进入论坛讨论

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

作者:不详 文章来源:互联网 点击数:418  更新时间:2007-11-12 06:01:43 责任编辑: 天之骄子           

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

  • 1人挖掘
  • 分享收藏到: 新浪ViVi 365Key网摘 和讯网摘 Google书签 Windows Live Del.icio.us Yahoo书签 提交新发现,Dig it 添加到百度搜藏 Save to inu.cc 收藏此页到纯我网 收進你的MyShare個人書籤 湛江地带书签 收藏到QQ书签
  • 关键字:  快速  简便  使用  AJAX  技术  操作  三部曲  

    【字体: 】【打印此文】【收藏
    版权所有 Copyright(C) 2007-10 网窝设计(WWW.WEBWOO.NET)All Rights Reserved 核心程序:PHP168
    本站如有转载或引用的文章涉及版权问题请速与我们联系 由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。
    国家信息产业部ICP备案序号:粤ICP备07061297号 主编信箱:xxrrll88@163.com QQ:36272565 联系电话0-7598676512