| 加入收藏| 设为首页| 联系我们

首页 站长学习 站长之家 源码下载 建站素材 书籍教程 常用工具
 您现在的位置: 动力中国 >> 网络编程 >> Ajax教程 >> 文章正文  
 [组图]快速、简便的使用AJAX技术操作的三部曲
 

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

http://www.domcn.org  文章来源:本站收藏  点击数:

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

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


快速、简便的使用AJAX技术操作的三部曲
  • 上一篇文章:

  • 下一篇文章:
  •  热门文章
    普通文章 电子邮件改头换面 四公司畅谈未
    普通文章 PC病毒史上最声名狼藉的八大病
    普通文章 Rails系统中的AJAX开发技术简析
    普通文章 基于ASP.NET AJAX框架实现表单
    普通文章 开发ASP.NET AJAX客户端定制行
    普通文章 用JFreeChart对JSP报表进行增强
    普通文章 SQL Server 2005上的CLR和ADO.
    普通文章 SQL Server 2005的XML支持机制
    普通文章 Firefox中标签式浏览技巧大全
    普通文章 Tomcat中的Session和Cookie大揭
     
     推荐文章
    推荐文章 把Google地图嵌入网页 就是这么
    推荐文章 迅雷搜索候选资源出错的解决
    推荐文章 轻松去除迅雷里的各种广告和资
    推荐文章 突破限制 免费领养到QQ空间五级
    推荐文章 Rational统一过程RUP贴近中小软
    推荐文章 构建自己的轻量级XML DOM分析程
    推荐文章 WPS Office 2007技巧:妙用配置
    推荐文章 Excel 2007:求余数函数实用进阶
    推荐文章 浅谈ASP.NET的Postback
    推荐文章 软件开发中项目需求管理简述
     
     相关文章
    没有相关文章
    设为首页 | 加入收藏 | 广告合作 | 联系站长 | 版权申明 |
    动力中国为网友提供免费学习资料,可用资源,如果您认为我们的相关内容侵害到了您的权利请联系管理员
    Copyright © 2006-2008 domcn.org All Rights Reserved.