在伺服器端AJAX 是一門與語言無關的技術。在商務邏輯層使用何種伺服器端語言都可以。從伺服器端接收資料的時候，那些資料必須以瀏覽器能夠理解的格式來發送。伺服器端的程式設計語言只能以如下 3 種格式返回資料：
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 // 定義傳輸方法為 GET22 var method = "GET";23 // 定義 URL24 var url = this.href + "?time=" + new Date();25 // 發送請求26 request.open(method, url);27 // 不需要傳輸資料，設定傳輸內容為 null28 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>
XML 傳輸格式
傳輸格式為 XML 需要在 jsp 頁面中解析為 XML 擷取標籤內容然後加入頁面
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>
JSON 傳輸格式
傳輸資料格式為 JSON 首先在頁面需要將其轉換為 JSON 格式
<%-- Created by IntelliJ IDEA. User: yin‘zhao Date: 2017/12/04 Time: 23:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JSONPage</title> <script type="text/javascript"> window.onload = function () { var aTags = document.getElementsByTagName("a"); for (var i = 0; i < aTags.length; i++) { aTags[i].onclick = function () { var request = new XMLHttpRequest(); var method = "GET"; var url = this.href + "?time=" + new Date(); request.open(method, url); request.send(null); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200 || request.status == 304) { var result = request.responseText; // 轉換為 JSON 格式，將字串 var jsonCon = eval("(" + result + ")"); // 擷取 name 和 website 節點值 var name = jsonCon.person.name; var website = jsonCon.person.website; // 建立新的 html 節點 var hNode = document.createElement("h3"); hNode.appendChild(document.createTextNode(name)); var bNode = document.createElement("b"); // 給建立的節點添加子節點，並為新的子節點新增內容 bNode.appendChild(document.createTextNode(website)); var divNode = document.getElementById("jsonTest"); // 清空 div 節點中的內容 divNode.innerHTML = ""; // 添加子節點 divNode.appendChild(hNode); divNode.appendChild(bNode); } } } return false; } } } </script> </head> <body> <ul> <li><a href="yy.json">YY Page</a></li><br> <li><a href="ss.json">SS Page</a></li><br> <li><a href="ys.json">YS Page</a></li><br> </ul> <div id="jsonTest"></div> </body> </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" }}
各種傳輸格式的優缺點
優點
1. Html 傳輸格式不需要 js 解析 html 代碼，可讀性好，html 代碼和 innerHtml 屬性搭配效率高
2. XML 是一種通用的傳輸格式，不必把資料強加到已經定義好的格式中，而為資料自訂合適的標記，且利用 DOM 可以完全掌握文檔
3. JSON 和 XML 相似但相比起來更加輕巧
缺點
1. 若需要使用 Ajax 更新一篇文檔的多個部分則 html 不合適
2. 當瀏覽器接收到較長的 XML 文檔時 DOM 解析可能會很複雜
3. JSON 的文法嚴謹，代碼不宜讀
適用情境
1. 若 application 不需要與其他程式共用資料時使用 HTML
2. 如果資料需要重用 JSON 在效能和大小方面有優勢
3. 當遠程程式未知時 XML 文檔是首選
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
