jQuery基礎之六 -- 異步Ajax

jQuery對Ajax進行了封裝，在jQuery中有三層方法：

第1層方法： $.ajax()

第2層方法： load(), $.get()和$.post()

第3層方法： $.getScript()和$.getJson()

首先介紹第2層的方法，因爲其使用頻率很高

1.load()方法：載入遠程HTML代碼並插入DOM中

load(url [, data] [, callback]);

url: 請求HTML頁面的URL地址

data: 可選，發送到服務器的key/value數據，無參數傳遞是GET方式，有參數傳遞自動轉換成POST方式

callback(responseText, textStatus, XMLHttpRequest): 可選，有3個參數，請求完成時的回調函數，無論成功或失敗都會被觸發

textStatus： success, error, notmodified, timeout 4種

$("#div").load("test.html");    //將test.html頁面的HTML內容插入到主頁面的<div>中
$("#div").load("test.html .para");    //將test.html中class爲"para"的內容插入到主頁面的<div>中

2.$.get()與$.post()方法： jQuery中的全局函數

$.get/post(url [, data] [, callback] [, type]);

url: 請求HTML頁面的URL地址

data: 可選，發送到服務器的key/value數據

callback(response, textStatus): 可選，只有當Response的返回狀態是success進才調用

type: 可選，服務器返回內容的格式，包括xml, html, script, json, text和_default

html: $("#html").html(response);

xml: $(data).find("comment").attr("username"); 或者 $(data).find("comment usrename").text(); 在服務器端必須設置Content-Type：text/xml

json: data.username;

$("#send").click(function(){
   $.get("xxx.jsp", { username: $("#username").val(), content: $("#content").val() }, function(data, textStatus){
       $("#resText").html(data.username + data.content);
   }, "json");
});

GET與POST區別：

1.ＧＥＴ請求會將對數跟在ＵＲＬ後進行傳遞，而ＰＯＳＴ請求則是作爲ＨＴＴＰ消息的實體內容發送給ＷＥＢ服務器

2.ＧＥＴ方式對傳輸的數據有大小限制，通常不能大於2ＫＢ，而使用ＰＯＳＴ方式傳遞沒有限制

3.ＧＥＴ方式請求的數據會被瀏覽器緩存起來，例如賬號和密碼等，會帶來嚴重的安全性問題

4.ＧＥＴ方式和ＰＯＳＴ方式傳遞的數據在服務器端的獲取不相同，在ＰＨＰ中，ＧＥＴ通過$_GET[]獲取，而POST通過$_POST[]獲取，都可以用$_REQUEST[]來獲取

3.$.getScript()和$.getJson()方法：動態加載js和json文件

在頁面初次加載時就取得所需的全部JavaScript文件是完全沒有必要的，可以在需要哪個JavaScript文件時，動態地創建<script>標籤，js代碼：

$(document.createElement("script")).attr("src", "xxx.js").appendTo("head");
或者
$("<script type='text/javascript' src='xxx.js'>").appendTo("head");

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); 
     }); // 當jquery.color.js 動畫插件加載完畢後，單擊按鈕，class爲block的元素就有了顏色動畫變化
  });

$.getJson("test.json", function(data){
   $("#repText").empty();
   var html = '';
   $.each(data, function(index, data){
      html += '<div class="comment">' + data.username + data[comment] + '</div>';
   });
   $("#repText").html(html);
});

4.$.ajax()方法

$.ajax(options); options以key/value的形式存在，所有參數都是可選的，$.Ajax()方法是jQuery最底層的Ajax實現，可以代替前面的所有方法

url:        請求HTML頁面的URL地址
type:       請求方式，get或者post，默認是get，部分瀏覽器支持but，delete
timeout:    設置請求超時時間（毫秒），將覆蓋$.ajaxSetup()方法的全局設置
data:       發送到服務器的數據
processData: (默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"
dataType:   預設服務器返回的數據類型，xml, html, script,json, jsonp, text
dataFilter: 給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數
async: (默認: true) 默認設置下，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲 false
cache: (默認: true,dataType爲script和jsonp時默認爲false) 設置爲 false 將不緩存此頁面。
contentType: (默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型
context; 設置Ajax相關回調函數的上下文。也就是說，讓回調函數內this指向這個對象（如果不設定這個參數，那麼this就指向調用本次AJAX請求時傳遞的options參數）
global:     默認爲true，表示觸發全局Ajax事件  
username: 用於響應HTTP訪問認證請求的用戶名
password:  用於響應HTTP訪問認證請求的密碼
traditional: 如果你想要用傳統的方式來序列化數據，那麼就設置爲true
ifModified: (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷
jsonp: 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
jsonpCallback: 爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。
scriptCharset: 只有當請求時dataType爲"jsonp"或"script"，並且type是"GET"纔會用於強制修改charset。通常只在本地和遠程的內容編碼不同時使用。
beforeSend(XMLHttpRequest): 發送請求前可以修改XMLHttpRequest對象的函數,例如添加HTTP頭，在beforeSend中,如果返回false可以取消本次Ajax請求  
complete(XMLHttpRequest, textStatus):   請求完成後調用的回調函數，成功或失敗時均調用，有點類似 load() 方法  
success(response, textStatus):    請求成功時調用的回調函數  
error(XMLHttpRequest, textStatus, errorThrown):      請求失敗時調用的回調函數

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
}); //加載並執行一個 JS 文件
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
}); //保存數據到服務器，成功時顯示信息。
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
}); //裝入一個 HTML 網頁最新版本。
 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 }); // 發送 XML 數據至服務器。設置 processData 選項爲 false，防止自動轉換數據格式。

5.序列化元素
serialize(); //作用一個jQuery對象，它能夠將DOM元素內容序列化字符串，用於Ajax請求

$.get("xxx.jsp", $("#form").serialize(), function(data, textStatus){  // { username: $("#username").val(), content: $("#content").val() }
   $("#resText").html(data);
});

serialize()不僅可以作用於form，它可以作用於任何jQuery對象
data不僅可以使用映射方式，也可以使用字符串方式，但要注意中文編碼問題

"username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($("#content").val())

serializeArray(); //將DOM元素內容序列化後，不是返回字符串，而是返回JSON格式的數據

var fields = $(":checkbox, :radio").serializeArray();
$.each(fields, function(index, field){
    $("#html").append(field.value +",");  
});

$.param(); //它是serialize（）方法的核心，用來將一個數組或對象按照key/value進行序列化

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

全局事件：

 ajaxSetup(name: value, name:value, ...)  設置全局 AJAX 默認選項,所有的選項都可以通過$.ajaxSetup()函數來全局設置。
 ajaxStart(callback); Ajax請求 開始 時執行的函數
 ajaxStop(callback); Ajax請求 結束 時執行的函數
 ajaxComplete(callback); Ajax請求 完成 時執行的函數
 ajaxError(callback); Ajax請求 發生錯誤 時執行的函數，捕捉到的錯誤可以作爲最後一個參數傳遞
 ajaxSend(callback); Ajax請求 發送前 執行的函數
 ajaxSucess(callback); Ajax請求 成功 時執行的函數
 //如果想使某個Ajax請求不受全局方法的影響，可以設置參數global爲false
$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
}); //設置 AJAX 請求默認地址爲 "/xmlhttp/"，禁止觸發全局 AJAX 事件，用 POST 代替默認 GET 方法。其後的 AJAX 請求不再設置任何選項參數
$.ajax({ data: myData });

<div id="loading">Loading。。。</div>
$("#loading").ajaxStart(function(){
   $(this).show(); 
}).ajaxStop(function(){
   $(this).hide();
});
 $("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>請求完成.</li>");
 });
$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出錯頁面:" + settings.url + "</li>");
});
 $("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>開始請求: " + settings.url + "</li>");
 });
 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>請求成功!</li>");
 });

jQuery基礎之六 -- 異步Ajax

Window 安裝 Python 失敗 0x80070643，發生嚴重錯誤

《最新出爐》系列入門篇-Python+Playwright自動化測試-41-錄製視頻

海量jQuery插件

MyEclipse安裝Ext JS和jQuery自動提示功能

MyEclipse8.5下配置JPA (Without Springframework)

在Spring框架下配置JPA

Response.ContentType+詳細列表

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結