Ajax 技術在 JavaWeb 應用中隨處可見，比如購物車中根據商品數量及時更新等應用，那么我們今天就來說說 Ajax 的一些小應用！
Ajax 技術也就是允許瀏覽器與服務器通信而無需刷新當前頁面，數據在客戶端和服務端獨立傳輸，而不是以前客戶端向服務端發送一個請求，服務器返回整個頁面，如此反復。完成 Ajax 請求就需要使用 XMLHttpRequest 類的方法，下面我們先開始介紹 XMLHttpReqest 的 API
一、XMLHttpRequest API
1.1 XMLHttpRequest 方法
1. open("method", "url") -- -- 建立對服務器的調用，Method 參數可以是 get，也可以是 post，url 可以是相對的也可以是絕對的（准備發送請求）
2. send("content") -- -- 向服務器發送請求（發送的內容）
3. setRequestHeader(“header”, "value") -- -- 把指定的首部設置為所提供的值，在設置任何首部之前必須先調用 open() 方法
1.2 XMLHttpRequest 屬性
1. OnReadystateChange -- -- 每個狀態改變都會觸發這個時間處理器，通常是 JS 函數（改事件由服務器觸發）
1.2.1 Ajax 執行過程中，服務器會通知客戶端當前的通信狀態，依靠 readyState 屬性實現，改變 readryState 屬性是服務器對客戶端連接操作的一種方式，每次 readyState 屬性改變都會觸發 onReadyStateChange 事件
2. readyState -- -- 請求的狀態，有 5 個可取值 0（未初始化）， 1（正在加載）， 2（已經加載）， 3（交互中）， 4（已經完成）
3. responseText -- -- 服務器的響應，表示為一個串
4. responseXML -- -- 服務器的響應，表示為XML 可以解析為 DOM 對象
5. status -- -- 服務器的 Http 狀態碼（200 對應 ok，404 對應 notFound）
二、Ajax 小案例（使用 JS 實現）
使用 Ajax 實現如下案例，分別用三種數據傳輸格式（Html、XML、JSON）
2.1 案例演示
2.2 Html 傳輸格式
由於返回的數據格式為 html 所以利用函數 innerHtml 插入標簽內即可。
htmlTest.jsp 代碼如下
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/04 5 Time: 23:23 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>HtmlPage</title> 12 <script type="text/javascript"> 13 window.onload = function () { 14 // 獲取 a 標簽 15 var aTags = document.getElementsByTagName("a"); 16 // 為每一個 a 標簽添加點擊事件 17 for (var i = 0; i < aTags.length; i++) { 18 aTags[i].onclick = function () { 19 // 新建 XMLHttpRequest 對象 20 var request = new XMLHttpRequest(); 21 // 定義傳輸方法為 GET 22 var method = "GET"; 23 // 定義 URL 24 var url = this.href + "?time=" + new Date(); 25 // 發送請求 26 request.open(method, url); 27 // 不需要傳輸數據，設置傳輸內容為 null 28 request.send(null); 29 // 處理響應 30 request.onreadystatechange = function () { 31 // 如果響應已經完成 32 if (request.readyState == 4) { 33 // 如果服務器狀態碼正確 34 if (request.status == 200 || request.status == 304) { 35 // 那么就將響應字段加入預先定義好的 Html 中 36 document.getElementById("htmlTest").innerHTML = request.responseText; 37 } 38 } 39 } 40 // 超鏈接點擊事件返回 false，取消其默認事件的觸發 41 return false; 42 } 43 } 44 } 45 </script> 46 </head> 47 <body> 48 <ul> 49 <li><a href="yy.html">YY Page</a></li><br> 50 <li><a href="SSPage.html">SS Page</a></li><br> 51 <li><a href="YYSSPage.html">YS Page</a></li><br> 52 </ul> 53 <div id="htmlTest"></div> 54 </body> 55 </html>
各超鏈接所對應的頁面（SSPage.jsp、yy.html、YYSSPage.html）
1 <h3>SS</h3> 2 <b>ssPage please go to</b>
1 <h3>YY</h3> 2 <b>yyPage please go to</b>
1 <h3>YS</h3> 2 <b>ysPage please go to</b>
2.3 XML 傳輸格式
傳輸格式為 XML 需要在 jsp 頁面中解析為 XML 獲取標簽內容然后加入頁面
xmlTest.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/05 5 Time: 8:41 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>XMLPage</title> 12 <script type="text/javascript"> 13 window.onload = function () { 14 var aTag = document.getElementsByTagName("a"); 15 for (var i = 0; i < aTag.length; i++) { 16 aTag[i].onclick = function () { 17 var url = this.href + "?time=" + new Date(); 18 var method = "GET"; 19 var request = new XMLHttpRequest(); 20 21 request.open(method, url); 22 request.send(null); 23 request.onreadystatechange = function () { 24 if (request.readyState == 4) { 25 if (request.status == 200 || request.readyState == 304) { 26 // 獲得返回數據的 XML 格式 27 var result = request.responseXML; 28 // 獲得返回內容的 name 標簽 29 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; 30 // 獲得返回內容的 website 標簽 31 var website = result.getElementsByTagName("website")[0].firstChild.nodeValue; 32 // 創建 h3 標簽 33 var hNode = document.createElement("h3"); 34 // 將 website 內容加入到 h3 標簽內 35 hNode.appendChild(document.createTextNode(name)); 36 37 var bNode = document.createElement("b"); 38 bNode.appendChild(document.createTextNode(website)); 39 40 var divNode = document.getElementById("details"); 41 // 每次點擊的時候首先將其內容清空，在加入對應的標簽 42 divNode.innerHTML = ""; 43 divNode.appendChild(hNode); 44 divNode.appendChild(bNode) 45 } 46 } 47 } 48 return false; 49 } 50 } 51 } 52 </script> 53 </head> 54 <body> 55 <ul> 56 <li><a href="yy.xml">YYPage</a></li><br><br> 57 <li><a href="ss.xml">SSPage</a></li><br><br> 58 <li><a href="ys.xml">YSPage</a></li><br><br> 59 </ul> 60 <div id="details"></div> 61 </body> 62 </html>
各超鏈接所對應的 xml 文件（ss.xml、yy.xml、ys.xml）
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <details> 3 <name>ss</name> 4 <website>ss.com</website> 5 </details>
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <details> 3 <name>yy</name> 4 <website>yy.com</website> 5 </details>
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <details> 3 <name>ys</name> 4 <website>ys.com</website> 5 </details>
2.4 JSON 傳輸格式
傳輸數據格式為 JSON 首先在頁面需要將其轉換為 JSON 格式
jsonTest.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/04 5 Time: 23:23 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>JSONPage</title> 12 <script type="text/javascript"> 13 window.onload = function () { 14 var aTags = document.getElementsByTagName("a"); 15 16 for (var i = 0; i < aTags.length; i++) { 17 aTags[i].onclick = function () { 18 var request = new XMLHttpRequest(); 19 var method = "GET"; 20 var url = this.href + "?time=" + new Date(); 21 request.open(method, url); 22 request.send(null); 23 24 request.onreadystatechange = function () { 25 if (request.readyState == 4) { 26 if (request.status == 200 || request.status == 304) { 27 var result = request.responseText; 28 // 轉換為 JSON 格式，將字符串 29 var jsonCon = eval("(" + result + ")"); 30 // 獲取 name 和 website 節點值 31 var name = jsonCon.person.name; 32 var website = jsonCon.person.website; 33 // 創建新的 html 節點 34 var hNode = document.createElement("h3"); 35 hNode.appendChild(document.createTextNode(name)); 36 var bNode = document.createElement("b"); 37 // 給新建的節點添加子節點，並為新的子節點添加內容 38 bNode.appendChild(document.createTextNode(website)); 39 40 var divNode = document.getElementById("jsonTest"); 41 // 清空 div 節點中的內容 42 divNode.innerHTML = ""; 43 // 添加子節點 44 divNode.appendChild(hNode); 45 divNode.appendChild(bNode); 46 } 47 } 48 } 49 return false; 50 } 51 } 52 } 53 </script> 54 </head> 55 <body> 56 <ul> 57 <li><a href="yy.json">YY Page</a></li><br> 58 <li><a href="ss.json">SS Page</a></li><br> 59 <li><a href="ys.json">YS Page</a></li><br> 60 </ul> 61 <div id="jsonTest"></div> 62 </body> 63 </html>
各超鏈接所對應的 json 文件
1 { 2 "person":{ 3 "name":"ss", 4 "website":"ss.com" 5 } 6 }
1 { 2 "person":{ 3 "name":"ys", 4 "website":"ys.com" 5 } 6 }
{
"person": {
"name": "yy",
"website": "yy.com"
}
}
2.5 各種傳輸格式的優缺點
2.5.1 優點
1. Html 傳輸格式不需要 js 解析 html 代碼，可讀性好，html 代碼和 innerHtml 屬性搭配效率高
2. XML 是一種通用的傳輸格式，不必把數據強加到已經定義好的格式中，而為數據自定義合適的標記，且利用 DOM 可以完全掌握文檔
3. JSON 和 XML 相似但相比起來更加輕巧
2.5.2 缺點
1. 若需要使用 Ajax 更新一篇文檔的多個部分則 html 不合適
2. 當瀏覽器接收到較長的 XML 文檔時 DOM 解析可能會很復雜
3. JSON 的語法嚴謹，代碼不宜讀
2.5.3 適用場景
1. 若 application 不需要與其他程序共享數據時使用 HTML
2. 如果數據需要重用 JSON 在性能和大小方面有優勢
3. 當遠程程序未知時 XML 文檔是首選
三、案例再實現（使用 JQuery 實現）
案例效果如上，只是實現方式為 JQuery
3.1 JQuery 中 Ajax 的 API
1. load(url) -- -- 任何 HTML 節點都可以使用 load 方法加載 Ajax，它可以載入遠程的 HTML 代碼並插入 HTML 中，若需要使用部分內容則可以使用選擇器（在定義 URL 的時候使用選擇器）
2. load 方法的傳遞方式根據 load 方法是否傳遞參數而定，若沒有傳遞參數那么就是 get 請求方式，若有則為 post 請求方式
3. 對於必須在完成加載才可以繼續的操作，load() 方法提供了回調函數，該函數有三個參數，代表請求返回內容的 data，代表請求狀態的 textStatus 對象和 XMLHttpRequest 對象
4. $.get(url, args, function) -- -- 使用 get 方式進行異步請求，data 代表返回的內容可以是 XML、Html、JSON 等數據格式；args 為 JSON 格式的傳遞參數；響應結束時觸發回調函數，其響應結果在函數參數中
5. $.getJSON() -- -- 對於 JSON 傳輸格式直接使用該方法，參數和 $.get() 方法一樣
3.2 HTML 數據傳遞格式
htmlTest.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/04 5 Time: 23:23 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>HtmlPage</title> 12 <script type="text/javascript" src="../jquery-1.7.2.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 $("a").click(function () { 16 // 使用選擇器，選擇出 h3 標簽部分 17 var url = this.href + " h3"; 18 // 參數 19 var args = {"time": new Date()}; 20 // 所有的 html 節點均可調用 load 方法將返回內容直接加入到目標標簽內 21 $("#htmlTest").load(url, args); 22 return false; 23 }); 24 }) 25 </script> 26 </head> 27 <body> 28 <ul> 29 <li><a href="yy.html">YY Page</a></li><br> 30 <li><a href="SSPage.html">SS Page</a></li><br> 31 <li><a href="YYSSPage.html">YS Page</a></li><br> 32 </ul> 33 <div id="htmlTest"></div> 34 </body> 35 </html>
3.3 XML 數據傳輸格式
xmlTest.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/05 5 Time: 8:41 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>XMLPage</title> 12 <script type="text/javascript" src="../jquery-1.7.2.js"></script> 13 <script> 14 $(function () { 15 $("a").click(function () { 16 var url = this.href; 17 var args = {"time": new Date()}; 18 19 $.get(url, args, function (data) { 20 // 找到 name 節點屬性值 21 var name = $(data).find("name").text(); 22 var website = $(data).find("website").text(); 23 // 首先清空在添加節點，然后加入新建的節點 24 $("#details").empty().append("<h2>" + name + "</h2><b>" + website + "</b>"); 25 }); 26 return false; 27 }) 28 }) 29 </script> 30 </head> 31 <body> 32 <ul> 33 <li><a href="yy.xml">YYPage</a></li> 34 <br><br> 35 <li><a href="ss.xml">SSPage</a></li> 36 <br><br> 37 <li><a href="ys.xml">YSPage</a></li> 38 <br><br> 39 </ul> 40 <div id="details"></div> 41 </body> 42 </html>
3.4 JSON 數據傳輸格式
jsonTest.html
1 <%-- 2 Created by IntelliJ IDEA. 3 User: yin‘zhao 4 Date: 2017/12/04 5 Time: 23:23 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>JSONPage</title> 12 <script type="text/javascript" src="../jquery-1.7.2.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 $("a").click(function () { 16 var url = this.href; 17 var args = {"time": new Date()}; 18 19 $.getJSON(url, args, function (data) { 20 var name = data.person.name; 21 var website = data.person.website; 22 23 $("#jsonTest").empty().append("<h3>" + name + "</h3><b>" + website + "</b>"); 24 }) 25 return false; 26 }) 27 }) 28 </script> 29 </head> 30 <body> 31 <ul> 32 <li><a href="yy.json">YY Page</a></li><br> 33 <li><a href="ss.json">SS Page</a></li><br> 34 <li><a href="ys.json">YS Page</a></li><br> 35 </ul> 36 <div id="jsonTest"></div> 37 </body> 38 </html>
以上這些就是我所知道有關 Ajax 的一些知識，我們可以利用以上知識實現三級聯動，演示如下：
寫的有不好的地方還望指出，謝謝！