快速、简便使用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的业务需求了,根本没有必要弄得那么复杂。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值