jquery與ajax的應用2

1.兩個全域方法

 $.getScript(path,function(){}) ;

用途：動態載入script指令碼。

 path:script地址。

 callback:可選。在javascript檔案成功載入後運行。

代碼：

$(function(){
  $.getScript('jquery.color.js',function(){
   $("#go").click(function){
    $(".block").animate({backgroundColor: 'pink'}, 1000).animate({backgroundColor: 'blue'}, 1000)
});
});
});

 

 $.getJSON(url,function(data){}) ;

 用途：當於載入JSON檔案。

 url:目標url地址

 callback:可選。

       data：返回的內容的json片段。

代碼：

 

$(function(){
  $('#send').click(function(){
       $.getJSON('test.json', function(data){
       $(('#resText').empty();
       var html = '';
       $.each(data, function(commentIndex, comment){
        html +='<div class="comment"><h6>'+
       comment['username']+':</h6><p class="para">'+commnet['content']+'</p></div>';
});
 $('#resText').html(html);
})
})
});

ps: 全域函數$.each(data, function(commentIndex, comment){})用法。用於遍曆數組或對象集合。

    data是一個數組或者一個對象。

    commentIndex代表索引，comment為索引對應的變數或內容。

 

2.jQuery最底層的Ajax實現

  $.ajax()方法是jQuery最底層的Ajax實現。

  它的結構為：$.ajax(options)

   options參數以key/value的形式存在。

   url: String 發送請求地址。

   type:請求方式預設為Get.

   timeout:逾時時間，毫秒級。

   data：發送到伺服器的資料，Object或者String.

   dataType：預期伺服器返回資料類型，如果不指定將根據HTTP包的MIME資訊返回reponseXML或reponseText.

   beforeSend：發送請求前可以修改XMLHttpRequest對象函數，例如添加自訂HTTP頭。返回false可取消此次ajax請求。

   complete：請求完成時的回呼函數.

   success：請求成功時的回呼函數。

   error：請求失敗時的回呼函數。

   global：是否觸發全域Ajax事件。預設為true;

 

代碼：

$(function(){
  $('#send').click(function(){
   #.ajax({
       type: "GET",
       url: "test.js",
       dataType: "script"
});
});
});

 

 3.序列化元素

  serialize()方法

  用途：作用於一個Jquery對象，將dom元素的內容序列化為字串。通常用於ajax表單提交。

  返回字串。

 

<form id="form1" action="#">
<p>評論：</p>
<p>姓名：<input type="text" name="username" id="username"/></p>
<p>內容：<input type="text" name="content" id="content"/></p>
<p>內容：<input type="button" id="send" value="提交"/></p>
</form>

 

$('#send').click(function(){
   $.get("get1.php", $('#form1').serialize(),function(data,textStatus){
 #('#resText').html(data);
})
});

 

  serialize()函數的核心是$.param()方法

用途：對一個數組或對象按照key/value進行序列化。

 

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);//輸出a=1&b=2%c=3

 

4.jQuery中全域Ajax事件

當Ajax開始請求時會觸發ajaxStart()方法的回呼函數。請求結束時會請求ajaxStop回呼函數。

ajaxStart(callback) 開始請求執行

ajaxStop(callback) 請求結束執行

ajaxComplete(callback) 請求完成時執行

ajaxError(callback) 發生錯誤時執行

ajaxSend(callback) 請求發送前執行

ajaxSuccess(callback) 請求成功時執行

如果想使某個Ajax請求不受全域方法的影響，可以將參數中的global設定為false.