网站公告列表

  没有公告

加入收藏
设为首页
联系站长
您现在的位置: 网络学院 >> 程序设计 >> Java编程 >> 文章正文
  快速、简便使用AJAX技术的三部曲            【字体:
快速、简便使用AJAX技术的三部曲
作者:佚名    文章来源:不详    点击数:    更新时间:2007-9-12    
 其实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的业务需求了,根本没有必要弄得那么复杂。



本文来源:http://blog.csdn.net/wxy_G/archive/2007/09/08/1777091.aspx
站内文章搜索 高级搜索
文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
     用java实现web服务器
     用java快速开发linux gu…
     正则表达式分解siemens交…
     [portal参考手册]目录
     jsp中调用oracle存储过程…
  • Ant入门-配置和使用     选…

  • ant使用简介

  • java现状----编程使用的语言…

  • Cookie又见Cookie-使用Html…

  • 一个关于Comparator的使用例…

  • 关于JSP的隐式对象的使用(供…

  • 使用ICE遇到的编译问题

  • Solaris10下,使用SunStudio…

  • Visual C++ 中使用内联汇编

  • LD中文使用手册完全版

  •   网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    网络学院©2007 www.23book.net
    为您提供web编程,vb编程,vc编程,服务器架设管理,数据库设计等方面的知识 站长:David