jQuery 学习笔记之十一 (jQuery ajax 详解)

$.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现。
它的结构为:
$ajax(options);
这个对象里包含了$.ajax()方法所需要的请求设置以及会掉函数信息，参数以key/value 的形式存在，所有参数都是可选的，常用参数如表 6-3所示。

参数名称    类型             说明
url        string           (默认为当前页地址)发送请求的地址
type       string           请求方式(post或get)默认为get，注意其他http请求方法，例如put和delete 也可以使用。
timeout    Number            设置请求超时时间(毫秒)，此数值将覆盖$.ajaxSetup()方法得全局设置。
data       object            发送到服务器的数据，如果已经不是字符串，将自动转换为字符串格式，Get请求中将附加在URL后，防止这种自动转换，可以查看processData选项，对象必须为key/value格式
                               例如{fool:"bar1",foo2:"bar2"}   转换为&fool=bar1&foo2=bar2 如果是数组，jquery 将自动为不同值对应同一个名称例如 {foo:["bar1","bar2"]} 转换为 &foo=bar1&foo=bar2
dataType string             预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML 或responseText,并作为回调函数参数传递。
                              可用的类型如下。
                              xml:返回XML文档，可用jQuery处理
                              html:返回存文本Html信息；包含的script标签会在插入DOM时执行
                              script:返回纯文本javascript代码，不会自动缓存结果，除非设置了cache参数，注意在远程请求时(不在同一个领域下),所有post请求都将转为get请求
                              json:返回json 数据
                              jsonp:JSONP格式，使用SONP形式调用函数时，例如myurl?callback=?,jQuery将自动替换后一个"?"为正确的函数名，以执行回调函数
                              text：返回存文本字符串
beforeSend function         发送请求钱可以修改xmlhttprequest 对象的函数，例如添加自定义http头，在beforeSend中如果返回false 可以取消本次Ajax请求，xmlHttpRequest对象是惟一的参数
complete    function         请求完成后调用的回调函数(请求成功或失败时均调用) 参数XMLHttpRequest对象和一个描述成功请求类型的字符串 function(xmlhttprequest,textstatus){ this;//}
success     function         请求成功后调用的回调函数，有两个参数
                             (1)有服务器返回，并根据dataType参数进行处理后的数据。
                             (2)描述状态的字符串。
                             function(data,textStatus){ //data 可能是xmlDoc,jsonObj,html,text等等    this//调用本次ajax时传递的option参数 }
error      funciton          请求失败时被调用的函数，该函数有3个参数，即XMLHttpRequest对象，错误信息,捕获的错误对象(可选)
                             Ajax事件函数如下。
                             function(XMLHttpRequest,textStatus,errorThrown) { //通常情况下textstatus 和errorThrow 只有其中一个包含信息this//调用本次 ajax请求时传递的options参数 }
global     boolean           默认为true   表示是否处罚全局ajax事件，设置为false 将不会触发全局ajax事件，ajaxstart或ajaxStop可用于控制各种Ajax事件

$.load(),$get(),$post(),$getScript()和$.getJSON这些方法，都是基于$.ajax()方法构建的,$ajax()方法是jQuery最底层的Ajax实现，因此可以用来代替前面的所有方法。

使用jQuery 代码代替$.getScript()方法
$(function(){
    $('#send').click(function(){
       $ajax({
             type:"GET",
             url:"test.js",
             dataType:"script"
           });
   });

})

使用jQuery 代码来代替$getJSON()方法：
$(funciton(){
$('#send').click(function(){
      $.ajax({
       type:"GET",
       url:"test.json",
       dataType:"json",
       success:function(data){
          $('#resText').empty();
          var html='';
          $each(data,function(commentIndex,commnet){
              html+='<div class="comment"><h6>'
              +comment['username']+':</h6><p class="para">'
              +comment['content']+'</p></div>';
          });
          $("#resText") .html(html);
         }
     });
})

})

                                                                                           序列化元素serialize()方法
表单是必不可少的，经常用来提供数据.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("#send").click(function(){
$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
}
);
   })
})
</script>
</head>
<body>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>

<div class='comment'>已有评论：</div>
<div id="resText" >
</div>
</body>
</html>

加载图片提示信息
<div id="loading"> 加载中</div>
然后用css控制元素隐藏，当Ajax请求开始的时候，将此元素显示，用来提示用户ajax请求正在进行。
$("#loading").ajaxStart(function(){
   $(this).show();
});

$("#laoding").ajaxStop(function(){
   $(this).hide();
});

//这样一来，在ajax请求过程中，只要图片还未加载完毕，就会一直显示"加载中..."的提示信息。
//如果在此页面的其他地方使用ajax，该提示信息仍然有效，因为它是全局的。
jQuery 的Ajax全局事件中还有几个方法，也可以在Ajax的过程中为其带来方便。

    方法名称                       说明
ajaxComplete(callback)        Ajax请求完成时执行的函数
ajaxError(callback)           Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)            Ajax请求发送前执行的函数
ajaxSuccess(callback)         Ajax请求成功时执行的函数

如果想使某个Ajax请求不受全局方法得影响，那么可以在使用$ajax(options)方法时，将参数中的global设置为false，jQuery代码如下：
$.ajax({
url:"test.html",
global:fasle
});

$.ajax({
type: "get",                             //请求类型
url: "http://www.cnblogs.com/liuyong",
beforeSend: function(XMLHttpRequest){
//show loading
},
success: function(data, textStatus){
$("#content").html("");
$("item",data).each(function(i, domEle){
$("#content").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//hide loading();
},
error: function(){
//请求出错处理
}
});

这里的一片好像也是一样的，介绍的也还行http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html

posted @ 2011-03-23 16:50 jackyong 阅读(1924) 评论(0) 编辑收藏举报

刷新页面返回顶部

jQuery 学习笔记之十一 (jQuery ajax 详解)

公告