随笔-67  评论-522  文章-0  trackbacks-0
    Ajax无疑是当今WEB开发的重要技术,也是目前RIA(富互联网应用)的主要实现方式之一。本文将在前几篇的基础上,介绍如何利用jQuery使得操作Ajax变得更方便,实现更强大的功能。
    就算到目前为止,Ajax的技术标准还是没有统一起来,主要体现在微软与非微软浏览器上面。虽然IE7之后提供了标准版本XHRXMLHttpRequest)对象,但早期的IE6及以前版本则是另一种实现方式(XMLHTTP)。所以在使用Ajax之前都得先检测当前浏览器提供哪种对象,然后再进行后续的操作,相信有过这种经历的朋友都应该印象深刻。总之一句话,非常不爽!
    如今有了jQuery,使得操作Ajax变得极其简单!你不必再去关心当前是哪种浏览器,你只需要关注你的程序想实现什么功能。jQuery已经为我们处理好了浏览器(应该是当前大多数)的兼容问题,而且提供了很多很好用的方法来实现Ajax功能。
    jQuery提供了六种请求方式实现AjaxloadgetScriptgetJSONgetpostajax。这里面getScriptgetJSON是最上层的方法调用,getpost是倒数第二层调用,而ajax则是最底层的调用函数,所有的调用最终都会转换为调用ajax函数。如果对这段话存有疑惑的朋友请看下源码,不用完全看懂,只需要了解他们之间的调用顺序即可。另外load方法一般是用来加载页面内容到匹配的元素上。如果省略load方法的parametera参数,发送GET请求;如果有parametera参数,则是POST请求。如果想带参数又想发送GET请求怎么办呢?可以把参数写到url中。
    大象在这里建议并推荐大家采用$.ajax()方式来实现Ajax调用。一是这种方式最直接,效率最高;二是这种方式功能最强大;三是从写法来看,key:value(键值对)可以减少出错。当然了,我并不是强制不能使用其它方式,我只是善意的建议,根据具体的情况作出最适当的选择。

    记得在jQuery学习总结(二)最后第四部分,我用一个项目实例来说明如何利用$.ajax实现Ajax,下面进行详细讲解。
    先来看看$.ajax()函数常用参数说明,有个总体印象。


    在实际开发中,我们大多数情况下,只会使用这样几个参数:urltypedatadataTypesuccess。它们的使用频率是非常高的,基本上实现Ajax的调用,这样几个参数够用了。当然,jQuery还提供其它更丰富的参数,来满足你不同的需求。帮助文档中有完整的说明。
    在实际应用中,我们很多时候都会用到相同的参数,这时可以利用jQuery提供的属性工具,设置一组默认的Ajax属性简化开发。

$.ajaxSetup({
    type: 'POST',
    dataType: 'text',
    error: 
function(xhr){
        $(
"#errorDiv").html("Ajax错误信息:"+xhr.status+' '+xhr.statusText);
    }
});
    这样设置后,将确保后面的每个Ajax调用(不包括load)使用这些默认值。
    接下来看看全局Ajax事件。注意global参数,它的默认值为true,所以会自动触发全局Ajax函数。如果显示的设为false,则不会触发。ajaxStartajaxSendajaxSuccessajaxErrorajaxCompleteajaxStop等等。这些全局函数将在Ajax请求处理的不同阶段被触发。看个示例:

$(function(){
    $(
"#success_msg").html("成功加载完成!").hide();
    $(
"#tip").html("图形正在加载...").hide();
    $(
"#btn_show ").click(
        
function(){
            $(
"#div_info").empty(); //清空它里面的内容
            $("#tip").ajaxStart(function(info){
                $(info.target).show(
300);
            }).ajaxStop(
function(info){
                $(info.target).hide(
300);
            });
            $(
"#success_msg").ajaxSuccess(function(info){
                $(info.target).show().hide(
1000);
            });
            $.ajax({
                type:
"GET",
                url:
"b.html",
                success:
function(info){
                    $(
"#div_info").append(info);
                }
            });
        }
    );
});

<div><input id="btn_show" type="button" value="显示" /></div>
<div id="tip"></div>
<div id="success_msg"></div>
<div id="div_info"></div>
    b.html很简单,就是在body之间插入这一段代码。
<div style="background-color:#00FF00;width:300px;height:300px"></div>
    现在对这个例子做下说明。
    首先初始化时,对IDsuccess_msgtip的两个DIV设置页面内容,并将其隐藏。再对显示按钮绑定事件,同时定义全局Ajax函数的回调函数,在不同的执行阶段,进行不同的结果处理。当触发时,会执行ajax调用,ajax方法执行后,会在div_info中显示出b.html中的内容,我这里是为了演示,所以将样式写到style属性中,大家不要这样写,应该采取我前面讲过的规范方法做。

    ajaxStart 是在发起Ajax请求时,并在XHR实例被创建之前执行。回调函数也在这个时候被触发,这里我让初始化时设置的tip信息在300毫秒内显示出来。
    ajaxStop 是在Ajax请求结束后,没有进行中的Ajax,任何回调函数执行完成之后调用。这里当请求结束后,让tip300毫秒内隐藏起来。
    最后是请求成功的ajaxSuccess函数,先让它显示出来,再让它在1秒内逐渐隐藏。
    全局事件的回调函数都有一个对象参数,它有两个属性。
        type全局函数类型字符串,就是全局事件的名称。比如:ajaxStartajaxStop等。
        target被引用的DOM元素。比如:tipsuccess_msg等。
    除此之外还有一个XHR对象参数,这个参数只有ajaxStartajaxStop没有,其它的函数都有。
    到这里Ajax的内容基本上都说完了,剩下的就是实际运用。如果大家有什么好的想法和意见还请提出来,大象喜欢和各位交流经验,共同提高。以上代码是在jquery-1.2.6版本下测试通过。
    本文为菠萝大象原创,如要转载请注明出处。
posted on 2010-03-20 15:10 菠萝大象 阅读(3087) 评论(1)  编辑  收藏 所属分类: jQuery

评论:
# re: jQuery学习总结(四) 2013-01-09 10:32 | cegod
用了半天的时间1-4全看完了,没的说,向作者致敬  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: