JQuery+Ajax 整理



****************************************************************************
load( url [,data] [,callback] )方法
load()方法通常用来从web服务器上获取静态的数据文件
****************************************************************************
url                   string类型               请求HTML页面的URL地址
data(可选)        Object类型             发送至服务器的 key/value值
callback(可选)   function                 请求完成后回调函数，无论成功或失败
******************************************************************************
     $(function(){
     $("#send").click(function(){
       $("#resetText").load("ajax2.jsp");把ajax2.jsp的内容加载出来
     })
  });

  <input type="button" id="send" value="Ajax获取"/>
  <div id="resetText"></div>
*******************************************************************************
筛选载入的文档
******************************************************************************
 $("#resetText").load("ajax2.jsp");把ajax2.jsp的内容加载出来
 $("#resetText").load("ajax2.jsp .para") 把ajax2.jsp页面中 class为 ”para“ 的内容加载出来
***********************************************************************************
传递方式
************************************************************************************
 $("#resetText").load("ajax2.jsp",function(){
       //.................无参数传递，则是get方式
   });

  $("#resetText").load("ajax2.jsp",{name:"rain",age:"22"}，function(){
    //................. 有参数传递，则是post方式
   });
****************************************************************************************
回调参数
  function(responseText , textStatus , XMLHttpRequest){
   responseText 请求返回的内容
   textStatus      请求的状态success、error、timeout 、notmodified 四种
   XMLHttpRequest 对象
}
***************************************************************************************
$.get()方法和$.post()方法
*****************************************************************************************
$.get(  url  [,data]  [callback] [,type] )
       url          String       请求的html网页的url地址
data(可选)      Object      发送至服务器的key/value数据作为QueryString附加到请求的URL中
callback(可选) function   载入成功时回调函数（只有当response的返回状态时success才调用该方法）
type(可选)       string       服务器端返回内容的格式，包括xml、html、script、json、text、和_default
************************************************************************************************
$.getScript()方法和$.getJson()方法
**************************************************************************************************
 $(function(){
   $.getScript("test.js");.
})

$(function(){
  $.getScript("test.js",function(){
      $("#go").click(function(){
      $(".block").animate({backgroundColor:'pink'},1000)
       .animate({backgroundColor:'blue'},1000);
  })
 })
})
******************************************************************************************
$.getJson()
*****************************************************************************************
$.getJson()方法用于加载json文件
$(function(){
  $("#send").click(function(){
  $.getJson("test.json");
})
})

$(function(){
  $("#send").click(function(){
   $.getJson("test.json",function(data){
   //返回的数据
})
})
*****************************************************************************
$.ajax()方法
****************************************************************************
$.ajax(options)参数以key,value的形式存在
url    发送请求的地址（默认当前）
type  请求方式，post或get，默认get
timeout  设置请求超时时间
data   发送到服务器的数据
dataType  服务器返回的类型  可返回：xml、html、script、json、text
beforeSend    function(XMLHttpRequest){this;//调用本次Ajax请求时传递的options参数}
complete  请求完成后调用的回调函数function(XMLHttpRequest,textStatus){
                 this;调用本次Ajax请求时传递的options参数 }
sucess    请求成功后调用的回调函数，有两个参数 (1)由服务器返回，根据dataType参数进行                处理后的数据 （2）描述状态的字符串 function(data,textStatus){
               //data可能是xmlDoc、jsonObj、html、text
                this;调用本次Ajax请求时传递的options参数 
               }
error     请求失败时调用的函数，有3个参数XMLHttpRequest对象、错误信息、捕获的错误对           象（可选） function(XMLHttpRequest,textStatus,errorThrown){
            //通常情况下textStatus和errorThrown只有其中一个包含信息
             this;调用本次Ajax请求时传递的options参数 
              }
global    默认为true，表示是否触发全局Ajax事件，设置为false将不会触发全局Ajax事件
              AjaxStart或AjaxStop可用于控制各种Ajax事件
例如：用下面的jquery代码代替$.getScript()方法
     $(function(){
          $("#send").click(function(){
              $.ajax({
              type:"get",
              url:"test.js",
             dataType:"script"
     });
   });
 });
例如：用下面的代码代替$.getJson()方法
  $(function(){
   $("#send").click(function(){
   $.ajax({
           type:"get";
           url:"test.json";
           dataType:"json";
          success:function(data){
           $("#resText").empty();
           var html="";
        each(data,function(commentIndex,comment){
            html+="<div class="comment"><h6>"
                    +comment['username']+":</h6><p class=
                   +comment['content']+"</p>></div>";
    });
      $("#resText").html(html);
   }
  })
 })
 })
**************************************************************
序列化元素
***************************************************************
1.serialize()方法
$("#send").click(function(){
  $.get("get1.jsp",{
  username:$("#username").val();
  content:$("#content").val();
},function(data,textStatus){
 $("#resText").html(data);
 })
})
简化后的代码如下
$("#send").click(function(){
  $.get("get1.jsp",$("#form1").serialize(),function(data,textStatus){
    $("#resText").html(data);
})
})
2.serializeArray方法
该方法不是返回字符串，而是将dom元素序列化后，返回json格式的数据
var fields=$(":checkbox,:radio").serializeArray();
console.log(fields); 用fireBug输出
******************************************************************
$.each()函数对数据进行迭代
******************************************************************
$(function(){
   var feelds=$(":checkbox,:radio").serializeArray();
   console.log(fields);//用fireBug输出
   $.each(feelds,function(i,feelds){
    $("#results").append(feeld.value+ " , ")
})
})
3.param()方法
用来将一个数组或对象按照key/value进行序列化
var  obj={a:1,b:2,c:3};
var k=$.param(obj);
alert(k);输出a=1,b=2,c=3;
************************************************************************
jquery 中的 全局事件
************************************************************************
<div id="loading">加载中......</div>
$("#loading").ajaxStart(function(){
  $(this).show();
})
$("#loading").ajaxStop(function(){
   $(this).hide();
})
只要图片未加载完毕，就会一直显示“加载中......”
ajaxStart(callback)
ajaxStop(callback)
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxSuccess(callback)
如果想使某个Ajax请求不受全局方法的影响，可以再使用Ajax()方法时,将参数中的global设置为false
$.ajax({
  url:"test.jsp";
 global:false; //不触发全局ajax事件
})