06jQuery-06-AJAX

標籤：loaded   return   判斷   請求   智能   索引值   console   設定   plain   

1、JS的AJAXAJAX，Asynchronous JavaScript and XML，意思就是用JavaScript執行非同步網路請求。
如果要讓使用者留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到資料後，再用JavaScript更新頁面，這樣一來，使用者就感覺自己仍然停留在當前頁面，但是資料卻可以不斷地更新。

即，為了實現局部重新整理。
JS中如果使用AJAX，在主流瀏覽器上主要依靠 XMLHttpRequest 對象（IE略不同）：

 

  
function success(text) {
  
 var textarea = document.getElementById(‘test-response-text‘);
  
 textarea.value = text;
  
}
  

  
function fail(code) {
  
 var textarea = document.getElementById(‘test-response-text‘);
  
 textarea.value = ‘Error code: ‘ + code;
  
}
  

  
var request = new XMLHttpRequest(); // 建立XMLHttpRequest對象
  

  
request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
  
 if (request.readyState === 4) { // 成功完成
  
 // 判斷響應結果:
  
 if (request.status === 200) {
  
 // 成功，通過responseText拿到響應的文本:
  
 return success(request.responseText);
  
 } else {
  
 // 失敗，根據響應碼判斷失敗原因:
  
 return fail(request.status);
  
 }
  
 } else {
  
 // HTTP請求還在繼續...
  
 }
  
}
  

  
// 發送請求:
  
request.open(‘GET‘, ‘/api/categories‘);
  
request.send();
  

  
alert(‘請求已發送，請等待響應...‘);
 

2、jQuery的AJAX而jQuery中使用AJAX方法的話就簡單多了，設定項也簡單明了，例如通過AJAX載入一段文本：

 

  
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
  
<button id="b01" type="button">Change Content</button>
  

  
//jQuery操作
  
$(document).ready(function(){
  
 $("#b01").click(function(){
  
 htmlobj=$.ajax({url:"/jquery/test1.txt",async:true});
  
 $("#myDiv").html(htmlobj.responseText);
  
 });
  
});
 

jQuery中ajax方法的文法是：

 

  
jQuery.ajax(url, [settings])
 

settings，可選。用於配置 Ajax 請求的索引值對集合，常用選項如下：

• async：是否非同步執行AJAX請求，預設為true，千萬不要指定為false
  
• method：發送的Method，預設為‘GET‘，可指定為‘POST‘、‘PUT‘等
  
• contentType：發送POST請求的格式，預設值為‘application/x-www-form-urlencoded; charset=UTF-8‘，也可以指定為text/plain、application/json
  
• data：發送的資料，可以是字串、數組或object。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contentType把data序列化成合適的格式
  
• headers：發送的額外的HTTP頭，必須是一個object
  
• dataType：接收的資料格式，可以指定為‘html‘、‘xml‘、‘json‘、‘text‘等，預設情況下根據響應的Content-Type猜測
  

實際上，因為get和post極其常用，jQuery對這兩者還額外提供了方法 $.get() 和 $.post()，這兩者的文法都類似：

 

  
//get
  
jQuery.get(url, data, success(response,status,xhr), dataType)
  

  
//post
  
jQuery.post(url, data, success(data, textStatus, jqXHR), dataType)
 

它們都是簡寫的ajax函數，其中：

• url：必需。規定把請求發送到哪個 URL
  
• data：可選。映射或字串值。規定連同請求發送到伺服器的資料
  
• success(data, textStatus, jqXHR)：可選。請求成功時執行的回呼函數
  
• dataType：可選。規定預期的伺服器響應的資料類型。預設執行智能判斷（xml、json、script 或 html）

樣本：

 

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

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

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

06jQuery-06-AJAX