Java Web開發(五) JavaScript庫jQuery學習(3) jQuery與Ajax的應用(1)
關於jQuery選擇器的知識這裡就先不介紹了，這裡向大家介紹一種比較厲害的技術，就是jQuery的Ajax應用，哈哈哈，我們當然先了解一些先進的技術啦，之後再為大家介紹jQuery選擇器和其他知識。
現在讓我們進入強大的jQuery的Ajax應用學習中吧。
一：Ajax簡介
1.Ajax全稱為“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML)，是指一種建立互動式網頁應用的網頁開發技術。
2.該技術並不是一種單一的技術，而是一系列互動式網頁應用相關的技術所形成的結合體。
3.優點
(1) 建立快速動態網頁。
(2) 通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。使Web應用程式能更為快速地迴應使用者的操作。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。
(3) 不需要任何外掛支援，就能被絕大多數主流瀏覽器所支援，只需允許JavaScript在瀏覽器上執行即可。
(4) 與傳統模式相比，Ajax模式在效能上的最大區別就在於傳輸資料的方式。在傳統模式中，資料提交是通過表單來實現的，而資料獲取是靠全頁面重新整理來重新獲取整頁的內容;Ajax模式只是通過XMLHttpRequest物件向伺服器端提交希望提交的資料，按需傳送。
(5) Ajax的工作原理相當於在使用者和伺服器之間加了一箇中間層，使使用者操作與伺服器響應非同步化。它在客戶端建立Ajax引擎，把傳統模式下的一些伺服器的工作轉到客戶端，既便於客戶端資源管理，又減輕伺服器和頻寬的負擔。
4.缺點
就算看起來很完美的Ajax也並不是一項完美的技術。Ajax主要有以下幾點不足：
(1) 瀏覽器對XMLHttpRequest物件的支援度不足
為了使Ajax應用能在各個瀏覽器中正常執行，我們必須花費大量的精力編碼兼顧各個瀏覽器之間的差別,來讓Ajax應用能夠很好地相容各個瀏覽器。這使得Ajax開發的難度比普通的Web開發高出很多。
(2) 破壞瀏覽器前進，"後退"按鈕的正常功能
在Ajax中"前進"和"後退"按鈕功能都會失效，大多數程式設計師寧可放棄前進，後退功能，也不願意在繁瑣的邏輯中去處理問題。然而，對於使用者來說，他們會經常想後退取消操作，就會使得通過Ajax互動得到的內容消失掉。
(3) 對搜尋引擎的支援的不足
由於是動態網頁技術，通常瀏覽器通過爬蟲程式來對網際網路上的資料進行搜尋整理，然而爬蟲程式現在還不能理解那些奇怪的JavaScript程式碼和引起的頁面內容的變化，推廣起來會更難。
(4) 開發和除錯工具的缺失
這一點相信大家都能理解。
4.Ajax的XMLHttpRequest物件
XMLHttpRequest物件可以在不向伺服器提交整個頁面的情況下，實現區域性更新網頁。當頁面全部載入完畢後，客戶端通過該物件向伺服器請求資料，伺服器端接受資料並處理後，向客戶端反饋資料。 而且，它可以同步或非同步返回 Web 伺服器的響應，並且能以文字或者一個 DOM 文件形式返回內容。
這個物件是Ajax實現的關鍵：傳送非同步請求，接收響應及執行回撥都是通過它來完成的。雖然瀏覽器對它的實現方式有所區別，但是大多數瀏覽器都提供了類似的屬性和方法，編寫方法的區別也不大，實現得到的效果也基本相同。
二：jQuery中的Ajax
由於XMLHttpRequest物件的很多屬性和方法，對於想要快速入門Ajax的人來說是很困難的，然而，jQuery中提供了一些快捷操作，使得jQuery開發Ajax變得容易，這樣，我們就不必理會那些繁瑣的XMLHttpRequest物件，就能把大部分程式開發集中在業務和使用者體驗上，既減輕了我們的負擔，又能給使用者更好的體驗。下面介紹jQuery中的Ajax。
jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬於最底層的方法，而第二層是load()，$.get()和$.post()方法，第三層是$.getScript()和$.getJSON()方法。下面先介紹第二層的方法。
1.load()方法
(1)結構：load(url[,data][,callback])
(2)作用：載入遠端HTML程式碼並插入DOM中。
(3)引數解釋：
| 名稱 | 型別 | 說明 |
|---|---|---|
| url | String | 請求的HTML頁面的URL地址 |
| data | Object | 傳送至伺服器的key/value資料 |
| callback | Function | 請求完成時的回撥函式，無論請求成功或失敗 |
load()方法完成了原本很繁瑣的工作。開發人員只需要使用jQuery選擇器為HTML片段指定目標位置，然後將要載入的檔案的URL作為引數傳遞給load()方法即可，如果你在主介面用CSS添加了樣式，就會應用到新載入的頁面上。
引數詳解：
url：請求的HTML頁面的地址，如果只需要一部分元素，可以通過為URL引數指定選擇符。
語法結構為："url selector"，這裡要注意的是，URL和選擇器之間有一個空格。
data：如果該引數沒有，則採取GET方式傳遞；反之，則會自動轉換為POST方式。
該引數是一個鍵值對集合。
callback：該引數是為在載入完成後才繼續執行的操作而設定的。該引數實際上是一個回撥函式。
寫法為：function(responseText,textStatus,XMLHttpRequest){}
該引數函式也有三個引數：
| response | 請求返回的內容 |
| textStatus | 請求狀態success,error,notmodfied,timeout |
| XMLHttpRequest | XMLHttpRequest物件 |
注：無論Ajax請求是否成功，只要當請求完成後，回撥函式就被觸發。
上面的load()方法通常用來從Web伺服器上獲取靜態的資料檔案。但如果需要傳遞一些引數給伺服器中的頁面，可以使用$.get()或者$.post()方法或者$.ajax()方法。$.get()和$.post()方法是jQuery中的全域性函式，對jQuery物件進行操作。
2.$.get()方法
(1)方式：該方法使用GET方式進行非同步請求
(2)結構：$.get(url[,data][,callback][,type])
(3)引數解釋：
| 引數名稱 | 型別 | 說明 |
|---|---|---|
| url | String | 請求的HTML頁的URL地址 |
| data | Object | 傳送至伺服器的key/value資料會作為QueryString附加到請求URL中 |
| callback | Function | 載入成功時回撥函式(只有當Response的返回狀態是success才呼叫該方法)自動將請求結果和狀態傳給該方法 |
| type | String | 服務端返回內容的格式，包括xml,html,script,json,text和_default |
(4)例項
我們先建立一個評論頁面的HTML程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資訊網頁</title>
<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script src = "myjQuery.js"></script> -->
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<form id="forml" action="#">
<p> 請填寫 </p>
<p> 姓名 <input type="text" name="name" id="name"/></p>
<p> 內容 <textarea name="content" id="content" rows="5" cols="20"></textarea></p>
<p> <input type="button" id="sendButton" value="傳送" /></p>
</form>
<div class="this"> 結果為: </div>
<div id="getText"> </div>
</body>效果如下：
這裡我們先把HTML分為兩個檔案：
a:我們首先要確定請求頁面的URL地址，但是我們提交時會出現錯誤：
原因很簡單，瀏覽器（Webkit核心）的安全策略決定了file協議訪問的應用無法使用XMLHttpRequest物件。
跨域請求僅支援協議：http, data, chrome, chrome-extension, https, chrome-extension-resource
在某些瀏覽器中是允許這種操作的，比如Firefox瀏覽器，也就是說Filefox支援file協議下的AJAX請求。我們這裡就用火狐瀏覽器來進行操作。
b：然後我們獲取我們想要得到的資料後，就可以通過回撥函式將返回的資料顯示在頁面上，
這裡$.get()的回撥函式又兩個引數：
function(data,textStatus){
}
| data | 請求返回的內容，可以是XML文件，JSON檔案，HTML片段 |
| textStatus | 請求的狀態,有success，error，notmodified，timeout |
注：回撥函式只有當資料成功返回後才被呼叫。
(5)type引數資料格式
伺服器返回的資料格式可以有多種。下面是幾種常見的返回格式：
a：HTML片段
由於返回的是HTML片段，因此並不需要經過處理就可以經返回的資料插入到主頁面中。
程式碼示例：
$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
$("#getText").html(data);
},
"html");
});
});優點：使用方便。
缺點：但這種固定的資料結構並不一定能在其他的Web應用程式中廣泛使用。
b：XML文件
由於伺服器返回資料格式的是XML文件，因此需要對返回的資料進行處理，處理XML文件與處理HTML文件一樣，可以使用常規的attr()，find()，filter()以及其他方法。
程式碼示例：
$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
//$("#getText").html(data);
var name = $(data).find("this").attr("name");
var content = $(data).find("this content").text();
var txtHtml = "<div class='this'><h6>"+name+":</h6><p class='sa'>"+content+"</p></div>"
$("#getText").html(txtHtml);
});
});
});這裡要注意的是服務端必須為XML格式。
優點：可移植性比較強以這種資料格式提供的資料的重用性將極大提高。
缺點：實現比較複雜，XML體積相對較大，解析和操作它們的速度要慢些。
c：JSON檔案
JSON集合了HTTP和XML的優點，即簡潔，容易閱讀，也可以方便的被重用。
由於服務端返回的資料格式師JSON檔案，因此也需要對返回的資料進行處理。
程式碼示例：
$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
var name = data.name;
var content = data.content;
var txtHtml = "<div class='this'><h6>"+name+":</h6><p class='sa'>"+content+"</p></div>"
$("#getText").html(txtHtml);
},"JSON");
});
});上面的程式碼中，把返回格式設定為"JSON"來指定返回的資料格式。
具體用到哪個格式要具體問題具體考慮。
3.$.post()方法
該方法與$.get()方法的的結構和使用方式都相同，不過它們之間仍有以下區別：
(1)GET請求會將傳送的資料作為QueryString附加到請求URL中，而POST請求則是通過HTTP訊息的實體內容傳送給Web伺服器。這種區別對使用者是不可見的。
(2)GET方式對傳輸的資料有大小限制(通常不能大於2KB),而使用POST方式傳遞的資料量要比GET方式大得多。
(3)GET方式請求的資料會被瀏覽器快取起來，會帶來嚴重的安全問題，而POST方式相對來說就可以避免這些問題。
(4)GET方式和POST方式傳遞的資料在服務端的獲取也不相同。在不同的方式下，獲取方法也不同。
(5)前面講到，$.load()方法在加入data引數時，是以POST方式傳送請求，因此可以用該方法來完成同樣的功能。
上面介紹了jQuery對Ajax操作的第二層的$.load()，$.get()和$.post()方法，之後會介紹可以實現第二層所有功能的$.ajax()方法和可以載入json檔案的第三層$.getScript()方法和$.getJson()方法。