jQuery慢慢啃之ajax（九）

標籤：

1.jQuery.ajax(url,[settings])//通過 HTTP 要求載入遠端資料

如果要處理$.ajax()得到的資料，則需要使用回呼函數。beforeSend、error、dataFilter、success、complete。

• beforeSend 在發送請求之前調用，並且傳入一個XMLHttpRequest作為參數。
• error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字串以及一個異常對象（如果有的話）
• dataFilter 在請求成功之後調用。傳入返回的資料以及"dataType"參數的值。並且必須返回新的資料（可能是處理過的）傳遞給success回呼函數。
• success 當請求之後調用。傳入返回後的資料，以及包含成功碼的字串。
• complete 當請求完成之後調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤碼的字串。

 通過dataType選項還可以指定其他不同資料處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。

其中，text和xml類型返回的資料不會經過處理。資料僅僅簡單的將XMLHttpRequest的responseText或responseHTML 屬性傳遞給success回呼函數，

如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字串返回之前執行。類似的，指定script類型的話，也會先執行伺服器端產生JavaScript，然後再把指令碼作為一個文本資料返回。

2.load(url, [data], [callback])//載入遠程 HTML 檔案代碼並插入至 DOM 中。

$("#links").load("/Main_Page #p-Getting-Started li");//載入文章側邊欄導航部分至一個無序列表。根據返回的頁面的內容用篩選器篩選一部分需要的元素。

$("#feeds").load("feeds.html");/載入 feeds.html 檔案內容。因為沒有傳遞參數，所以預設為get方式

$("#feeds").load("feeds.php", {limit: 25}, function(){   alert("The last 25 entries in the feed have been loaded"); });//和前面那個一樣只是帶有參數，所以用post方式傳遞

 

3.jQuery.get(url, [data], [callback], [type])//通過遠程 HTTP GET 請求載入資訊

url:待載入頁面的URL地址

data:待發送 Key/value 參數。

callback:載入成功時回呼函數。

type:返回內容格式，xml, html, script, json, text, _default。

$.get("test.php");//請求 test.php 網頁，忽略傳回值。

$.get("test.php", { name: "John", time: "2pm" } );//請求 test.php 網頁，傳送2個參數，忽略傳回值。

$.get("test.php", function(data){  alert("Data Loaded: " + data);});//顯示 test.php 傳回值(HTML 或 XML，取決於傳回值)。

$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data);});//顯示 test.cgi 傳回值(HTML 或 XML，取決於傳回值)，添加一組請求參數。

4.jQuery.getJSON(url, [data], [callback])//通過 HTTP GET 請求載入 JSON 資料。

//從 Flickr JSONP API 載入 4 張最新的關於貓的圖片。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", 
function(data){  $.each(data.items, function(i,item){    $("<img/>").attr("src", item.media.m).appendTo("#images");    if ( i == 3 ) return false;  });});

$.getJSON("test.js", function(json){  alert("JSON Data: " + json.users[3].name);});

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);});//帶參數的調用

 

5.jQuery.getScript(url, [callback])//通過 HTTP GET 請求載入並執行一個 JavaScript 檔案

<button id="go">» Run</button><div class="block"></div>

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){  $("#go").click(function(){    $(".block").animate( { backgroundColor: ‘pink‘ }, 1000).animate( { backgroundColor: ‘blue‘ }, 1000);  });});

$.getScript("test.js");//載入並執行 test.js。 

$.getScript("test.js", function(){ alert("Script loaded and executed.");});//載入並執行 test.js ，成功後顯示資訊。

 

6.jQuery.post(url, [data], [callback], [type])//通過遠程 HTTP POST 請求載入資訊。

url:發送請求地址。

data:待發送 Key/value 參數。

callback:發送成功時回呼函數。

type:返回內容格式，xml, html, script, json, text, _default。

$.post("test.php");//請求 test.php 網頁，忽略傳回值：

$.post("test.php", { name: "John", time: "2pm" } );//請求 test.php 頁面，並一起發送一些額外的資料（同時仍然忽略傳回值）：

$.post("test.php", { ‘choices[]‘: ["Jon", "Susan"] });//向伺服器傳遞資料數組（同時仍然忽略傳回值）：

$.post("test.php", $("#testform").serialize());//使用 ajax 請求發送表單資料

$.post("test.php", function(data){ alert("Data Loaded: " + data); });//輸出來自請求頁面 test.php 的結果（HTML 或 XML，取決於所返回的內容）

$.post("test.php", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});//向頁面 test.php 發送資料，並輸出結果（HTML 或 XML，取決於所返回的內容）

$.post("test.php",{ name:"John",time:"2pm"},function(data){process(data);},"xml");//獲得 test.php頁面的內容，並儲存為XMLHttpResponse 對象，並通過process() 這個js函數進行處理

$.post("test.php", { "func": "getNameAndTime" },function(data){alert(data.name);console.log(data.time);}, "json");//獲得 test.php 頁面返回的 json 格式的內容

 

7.ajaxComplete(callback)//AJAX 請求完成時執行函數。Ajax 事件。

 $("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>請求完成.</li>");});//AJAX 請求完成時執行函數。

$("#txt").ajaxStart(function(){ $("#wait").css("display","block");});當 AJAX 請求進行中時顯示“正在載入”的指示

$("#txt").ajaxComplete(function(){$("#wait").css("display","none");});


8.ajaxError(callback)//AJAX 請求發生錯誤時執行函數

function (event, XMLHttpRequest, ajaxOptions, thrownError) {
      // thrownError 只有當異常發生時才會被傳遞      this; // 監聽的 dom 元素}

$("#msg").ajaxError(function(event,request, settings){     $(this).append("<li>出錯頁面:" + settings.url + "</li>");});


9.ajaxSend(callback)//AJAX 請求發送前執行函數。

 $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>開始請求: " + settings.url + "</li>");});//AJAX 請求發送前顯示資訊。

10.ajaxStart(callback)//AJAX 請求開始時執行函數。Ajax 事件。

 $("#loading").ajaxStart(function(){ $(this).show();});//AJAX 請求開始時顯示資訊。

11.ajaxStop(callback)//AJAX 請求結束時執行函數。

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

12.ajaxSuccess(callback)//AJAX 請求成功時執行函數。

 $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>請求成功!</li>"); });

 

13.jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )

 

14.jQuery.ajaxSetup([options])//設定全域 AJAX 預設選項。

//設定 AJAX 請求預設地址為 "/xmlhttp/"，禁止觸發全域 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項參數。

$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST"});$.ajax({ data: myData });

 

15.serialize()//序列表表格內容為字串

<p id="results"><b>Results: </b> </p><form>  <select name="single">    <option>Single</option>    <option>Single2</option>  </select>  <select name="multiple" multiple="multiple">    <option selected="selected">Multiple</option>    <option>Multiple2</option>    <option selected="selected">Multiple3</option>  </select><br/>  <input type="checkbox" name="check" value="check1"/> check1  <input type="checkbox" name="check" value="check2" checked="checked"/> check2  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1  <input type="radio" name="radio" value="radio2"/> radio2</form>

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

16.serializeArray()//序列化表格元素 (類似 ‘.serialize()‘ 方法) 返回 JSON 資料結構資料

‘‘‘注意‘‘‘，此方法返回的是JSON對象而非JSON字串。需要使用外掛程式或者第三方庫進行字串化操作。 

返回的JSON對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對——name參數和value參數（如果value不為空白的話）。舉例來說：  

 [      {name: ‘firstname‘, value: ‘Hello‘},      {name: ‘lastname‘, value: ‘World‘},     {name: ‘alias‘}, // this one was empty  ]

取得表單內容並插入到網頁中。

<p id="results"><b>Results:</b> </p><form>  <select name="single">    <option>Single</option>    <option>Single2</option>  </select>  <select name="multiple" multiple="multiple">    <option selected="selected">Multiple</option>    <option>Multiple2</option>    <option selected="selected">Multiple3</option>  </select><br/>  <input type="checkbox" name="check" value="check1"/> check1  <input type="checkbox" name="check" value="check2" checked="checked"/> check2  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1  <input type="radio" name="radio" value="radio2"/> radio2</form>

var fields = $("select, :radio").serializeArray();jQuery.each( fields, function(i, field){  $("#results").append(field.value + " ");});

 

jQuery慢慢啃之ajax（九）