1. AJAX概述

1.1 什么是AJAX

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）

AJAX還有一個最大的特點就是，當服務器響應時，不用刷新整個瀏覽器頁面，而是可以局部刷新。這一特點給用戶的感受是在不知不覺中完成請求和響應過程

• 與服務器異步交互
• 瀏覽器頁面局部刷新

1.2 同步交互與異步交互

• 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
• 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

1.3 AJAX常見應用情景

當我們在百度中輸入一個“傳”字后，會馬上出現一個下拉列表！列表中顯示的是包含“傳”字的10個關鍵字

其實這里就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含“傳”字的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器，最后瀏覽器把這10個關鍵字顯示在下拉列表中

• 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！

• 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！

當輸入用戶名后，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為zhangSan的用戶是否存在，最終服務器返回true表示名為zhangSan的用戶已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊！”

• 整個過程中頁面沒有刷新，只是局部刷新了
• 在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其他操作

1.4 AJAX的優缺點

優點：

• AJAX使用Javascript技術向服務器發送異步請求
• AJAX無須刷新整個頁面
• 因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高

缺點：

• AJAX并不適合所有場景，很多時候還是要使用同步交互
• AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大
• 因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題

2. AJAX技術

2.1 AJAX第一例

2.1.1 準備工作

因為AJAX也需要請求服務器，異步請求也是請求服務器，所以我們需要先寫好服務器端代碼，即編寫一個Servlet！

這里，Servlet很簡單，只需要輸出“Hello AJAX!”。

public class AServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("Hello AJAX!");response.getWriter().print("Hello AJAX!");} }

2.1.2 AJAX核心：XMLHttpRequest

其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpRequest對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可

注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！大多數瀏覽器都支持DOM2規范，都可以使用：var xmlHttp = new XMLHttpRequest()來創建對象；但IE有所不同，IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)來創建對象；而IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)來創建對象；而IE7以及更新版本也支持DOM2規范

為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：

function createXMLHttpRequest() {var xmlHttp;// 適用于大多數瀏覽器，以及IE7和IE更高版本try{xmlHttp = new XMLHttpRequest();} catch (e) {// 適用于IE6try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {// 適用于IE5.5，以及IE更早版本try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){}}} return xmlHttp; }

2.1.3 打開與服務器的連接

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：

open(method, url, async)：

• method：請求方式，通常為GET或POST
• url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數
• async：這個參數可以不給，默認值為true，表示異步請求

var xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", "/ajaxdemo1/AServlet", true);

2.1.4 發送請求

當使用open打開連接后，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL后連接參數。

注意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！

xmlHttp.send(null);

2.1.5 接收服務器響應

當請求發送出去后，服務器端Servlet就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

• 0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法
• 1：請求已開始，open()方法已調用，但還沒調用send()方法
• 2：請求發送完成狀態，send()方法已調用
• 3：開始讀取服務器響應
• 4：讀取服務器響應結束

onreadystatechange事件會在狀態為1、2、3、4時引發。

下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange = function() {alert('hello'); };

但通常我們只關心最后一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4) {alert('hello'); } };

其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。

最后，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {alert(xmlHttp.responseText); } };

2.1.6 AJAX第一例小結

• 創建XMLHttpRequest對象
• 調用open()方法打開與服務器的連接
• 調用send()方法發送請求
• 為XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在XMLHttpRequest的1、2、3、4，四種狀態時被調用

XMLHttpRequest對象的5種狀態：

• 0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法
• 1：請求已開始，open()方法已調用，但還沒調用send()方法
• 2：請求發送完成狀態，send()方法已調用
• 3：開始讀取服務器響應
• 4：讀取服務器響應結束

通常我們只關心4狀態

XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState為4時才能獲取到

XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在readyState為4時才能獲取到！

2.2 AJAX第二例：發送POST請求

2.2.1 發送POST請求注意事項

POST請求必須設置ContentType請求頭的值為application/x-www.form-encoded。表單的enctype默認值就是為application/x-www.form-encoded！因為默認值就是這個，所以大家可能會忽略這個值！當設置了<form>的enctype=” application/x-www.form-encoded”時，等同與設置了Cotnent-Type請求頭。

但在使用AJAX發送請求時，就沒有默認值了，這需要我們自己來設置請求頭：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

當沒有設置Content-Type請求頭為application/x-www-form-urlencoded時，Web容器會忽略請求體的內容。所以，在使用AJAX發送POST請求時，需要設置這一請求頭，然后使用send()方法來設置請求體內容。

xmlHttp.send("b=B");

這時Servlet就可以獲取到這個參數！！！

AServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println(request.getParameter("b"));System.out.println("Hello AJAX!");response.getWriter().print("Hello AJAX!");}

ajax2.jsp

<script type="text/javascript"> function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多數瀏覽器} catch (e) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {return new ActiveXObject("Microsoft.XMLHTTP");}} }function send() {var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {var div = document.getElementById("div1");div.innerHTML = xmlHttp.responseText;}};xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttp.send("b=B"); } </script> <h1>AJAX2</h1> <button onclick="send()">測試</button> <div id="div1"></div>

2.3 AJAX第三例：用戶名是否已被注冊

2.3.1 功能介紹

在注冊表單中，當用戶填寫了用戶名后，把光標移開后，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被注冊過，返回false表示沒有注冊過。

客戶端得到服務器返回的結果后，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息！

2.3.2 案例分析

• regist.jsp頁面中給出注冊表單
• 在username表單字段中添加onblur事件，調用send()方法
• send()方法獲取username表單字段的內容，向服務器發送異步請求，參數為username
• RegistServlet：獲取username參數，判斷是否為“itcast”，如果是響應true，否則響應false

2.3.3 實現代碼

regist.jsp

<script type="text/javascript"> function createXMLHttpRequest() {try {return new XMLHttpRequest();} catch (e) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {return new ActiveXObject("Microsoft.XMLHTTP");}} }function send() {var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {if(xmlHttp.responseText == "true") {document.getElementById("error").innerHTML = "用戶名已被注冊！";} else {document.getElementById("error").innerHTML = "";}}};xmlHttp.open("POST", "/ajaxdemo1/BServlet", true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var username = document.getElementById("username").value;xmlHttp.send("username=" + username); } </script> <h1>注冊</h1> <form action="" method="post"> 用戶名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/> 密　碼：<input type="text" name="password"/><br/> <input type="submit" value="注冊"/> </form>

RegistServlet.java

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String username = request.getParameter("username");if("itcast".equals(username)) {response.getWriter().print(true);} else {response.getWriter().print(false);}}

2.4 AJAX第四例：省市二級聯動

2.4.1 功能介紹

select.jsp

<h1>省市聯動</h1> 省： <select name="province" id="province"><option>===請選擇===</option> </select> 市： <select name="city" id="city"><option>===請選擇===</option> </select>

當select.jsp頁面打開時，向服務器發送異步請求，得到所有省份的名稱（文本數據）。然后使用每個省份名稱創建<option>，添加到<select name=”province”>中

并且為<select name=”province”>元素添加onchange事件監聽。當選擇的省份發生變化時，再向服務器發送異常請求，得到當前選中的省份下所有城市（XML數據）。然后客戶端解析XML文檔，使用每個城市名稱創建<option>，添加到<select name=”city”>元素中

2.4.2 代碼實現

服務器端：使用china.xml保存所有省份和城市名稱：

china.xml

<?xml version="1.0" encoding="utf-8"?> <china><province name="北京"><city>東城區</city><city>西城區</city>……</province><province name="天津"><city>和平區</city><city>河東區</city>……</province><province name="河北"><city>石家莊</city><city>衡水</city>……</province> …… </china>

• ProvinceServlet：負責把所有省份名稱響應給客戶端，這需要使用dom4j解析china.xml，得到所有<province>元素的name屬性值，連接成一個字符串發送給客戶端
• CityServlet：負責得到某個省份元素，然后以字符串形式發送給客戶端

ProvinceServlet.java

public class ProvinceServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 注意設置編碼response.setContentType("text/html;charset=utf-8");// 使用DOM4J解析xml文檔InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");SAXReader reader = new SAXReader();try {Document doc = reader.read(input);// xpath查詢所有province元素的name屬性List<Attribute> provinceNameAttributeList = doc.selectNodes("//province/@name");// 用來裝載所有name屬性值List<String> provinceNames = new ArrayList<String>();// 遍歷每個屬性，獲取屬性名稱，添加到list中for(Attribute proAttr : provinceNameAttributeList) {provinceNames.add(proAttr.getValue());} // System.out.println(provinceNames);// 把list轉換成字符串String str = provinceNames.toString();// 把字符串前后中的[]去除發送給客戶端response.getWriter().print(str.substring(1, str.length()-1));} catch (DocumentException e) {throw new RuntimeException(e);}} }

CityServlet.java

public class CityServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");// 注意，這里內容類型必須是text/xml，不然客戶端得到的就不是xml文檔對象，而是字符串了。response.setContentType("text/xml;charset=utf-8");// 獲取省份參數String provinceName = request.getParameter("provinceName");InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");SAXReader reader = new SAXReader();try {Document doc = reader.read(input);// 查詢指定省份名稱的<province>元素Element provinceElement = (Element)doc.selectSingleNode("//province[@name='" + provinceName + "']"); // System.out.println(provinceElement.asXML());// 把元素轉換成字符串發送給客戶端response.getWriter().print(provinceElement.asXML());} catch (Exception e) {throw new RuntimeException(e);}} }

客戶端：

• 在打開select.jsp頁面時就向服務器請求所有省份的名稱，添加到<select name=”province”>元素中
• 給<select name=”province”>元素添加onchange事件監聽，內容為向服務器發送請求，得到XML文檔：<province>元素，然后解析它，添加到<select name=”city”>中

// 文檔加載完成后 // 加載所有省份名稱 window.onload = function() {//請求服務器，加載所有省名稱到<select>中//[1]ajax四步var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = callback;//服務器響應完成后執行callback函數xmlHttp.open("GET", "/ajaxdemo1/ProvinceServlet", true);//向服務器發送GET請求xmlHttp.send(null);//發送請求 }; // 本方法獲取服務器響應的所有省份的名稱 function callback() {if(this.readyState == 4 && this.status == 200) {// 把服務器響應的省份名稱，使用逗號分割成字符串數組var provinceNameArray = this.responseText.split(", ");// 遍歷每個省份名稱，使用每個省份名稱創建<option>元素，添加到province的<select>中for(var i = 0; i < provinceNameArray.length; i++) {addProvinceOption(provinceNameArray[i]);}// 為province的<select>元素添加onchange事件監聽document.getElementById("province").onchange = loadCities;} } // 本函數在province的<select>元素發送變化時執行！ // 本函數會使用當前選中的省份名稱為參數，向服務器發送請求，獲取當前省份下的所有城市！ function loadCities() {var proName = this.value;//獲取<select>選擇的省份名稱/*AJAX4步*/var xmlHttp = createXMLHttpRequest();//創建異常對象// 指定回調函數xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 得到服務器響應的xml文檔對象var doc = xmlHttp.responseXML;//注意，這里使用的是resopnseXML屬性，不是resopnseText// 獲取文檔中所有city元素var cityElementList = doc.getElementsByTagName("city");// 獲取html元素：city的<select>var citySelect = document.getElementById("city");// 刪除city的<select>元素的所有子元素removeChildNodes(citySelect);// 創建<option>元素，指定文本內容為“請選擇”var qxzOption = document.createElement("option");var textNode = document.createTextNode("===請選擇===");qxzOption.appendChild(textNode);// 把"請選擇"這個<option>添加到<select>元素中citySelect.appendChild(qxzOption);// 循環遍歷每個服務器端響應的每個<city>元素for(var i = 0; i < cityElementList.length; i++) {var cityEle = cityElementList[i];var cityName = null;// 獲取<city>元素的文本內容！處理瀏覽器差異！if(window.addEventListener) {cityName = cityEle.textContent;} else {cityName = cityEle.text;}// 使用城市名稱創建<option>，并添加到<select>元素中addCityOption(cityName);}}};xmlHttp.open("POST", "/ajaxdemo1/CityServlet", true);//打開與服務器的連接// 因為是POST請求，所以要設置Content-Type請求頭xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 參數為當前選中的省份名稱xmlHttp.send("provinceName=" + proName); } // 使用proName創建<option>元素添加到<select>元素中 function addProvinceOption(proName) {var option = document.createElement("option");//創建<option>元素var textNode = document.createTextNode(proName);//使用省份名稱創建文本節點option.appendChild(textNode);//把省份名稱的文本節點添加到<option>元素中option.setAttribute("value", proName);//使用省份名稱來設置<option>元素的value屬性document.getElementById("province").appendChild(option);//把<option>元素添加到<select>元素中　 } // 本函數用來創建城市的<option>，并添加到<select>元素中 function addCityOption(cityName) {var citySelect = document.getElementById("city");//獲取id為city的<select>var cityOption = document.createElement("option");//創建<option>元素var textNode = document.createTextNode(cityName);//使用城市名稱創建文本節點cityOption.appendChild(textNode);//把文本節點添加到<option>元素中cityOption.setAttribute("value", cityName);//設置<option>元素的value屬性為城市名稱citySelect.appendChild(cityOption);//把<option>元素添加到<select>元素中 } //刪除指定元素的所有子元素 function removeChildNodes(ele) {var nodes = ele.childNodes;//獲取當前元素的所有子元素集合while(nodes.length > 0) {//遍歷所有子元素ele.removeChild(nodes[0]);//刪除子元素} }

3. XStream

3.1 XStream的作用

XStream可以把JavaBean對象轉換成XML！

通常服務器向客戶端響應的數據都是來自數據庫的一組對象，而我們不能直接把對象響應給響應端，所以我們需要把對象轉換成XML再響應給客戶端，這時就需要使用XStream組合了。

3.2 XStream入門

為了演示XStream的作用，我們需要先寫兩個類，Province和City。

City.java

public class City {private String name;private String description; …… }

Province.java

public class Province {private String name;private List<City> cities = new ArrayList<City>();public void addCity(City city) {cities.add(city);} …… }

接下來，我們需要寫一個main()，創建一個List，List中存放兩個Province對象！最終我們把List轉換成XML

Province p1 = new Province("遼寧省"); p1.addCity(new City("沈陽", "shenyang")); p1.addCity(new City("大連", "dalian"));Province p2 = new Province("吉林省"); p2.addCity(new City("長春", "changchen")); p2.addCity(new City("白城", "baicheng"));List<Province> list = new ArrayList<Province>();list.add(p1); list.add(p2);

3.2.1 XStream相關JAR包

我們可以到http://xstream.codehaus.org/地址去下載XStream安裝包！
XStream的必導JAR包：

• 核心JAR包：xstream-1.4.7.jar
• 必須依賴包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）

3.2.2 使用XStream把Java對象轉換成XML

下面是使用XStream轉換list為XML的代碼：

XStream xstream = new XStream(); String s = xstream.toXML(list); System.out.println(s); <list><cn.itcast.xstream.demo1.Province><name>遼寧省</name><cities><cn.itcast.xstream.demo1.City><name>沈陽</name><description>shenyang</description></cn.itcast.xstream.demo1.City><cn.itcast.xstream.demo1.City><name>大連</name><description>dalian</description></cn.itcast.xstream.demo1.City></cities></cn.itcast.xstream.demo1.Province><cn.itcast.xstream.demo1.Province><name>吉林省</name><cities><cn.itcast.xstream.demo1.City><name>長春</name><description>changchen</description></cn.itcast.xstream.demo1.City><cn.itcast.xstream.demo1.City><name>白城</name><description>baicheng</description></cn.itcast.xstream.demo1.City></cities></cn.itcast.xstream.demo1.Province> </list>

也就是說，XStream是根據對象名、類名、屬性名來生成XML文檔的！

3.2.3 alias用法

大家也看到了，生成的XML中，與類名對應的元素名稱包含了包名部分，這很不好看！若想自定義生成的元素名稱，需要使用XStream為類名提供別名：

xstream.alias("province", Province.class); xstream.alias("china", List.class); xstream.alias("city", City.class); <china><province><name>遼寧省</name><cities><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></cities></province><province><name>吉林省</name><cities><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></cities></province> </china>

3.2.4 把子元素變為元素屬性

例如我們需要把子元素變成：樣式，那么需要調用如下方法：

xstream.useAttributeFor(Province.class, "name"); <china><province name="遼寧省"><cities><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></cities></province><province name="吉林省"><cities><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></cities></province> </china>

3.2.5 去除集合屬性對應元素

大家可能已經發現了，因為Pronvice類有一個cities成員，所以生成了<cities>元素，但這個元素對XML文檔而言沒有什么意義，所以我們希望把它去除！

xstream.addImplicitCollection(Province.class, "cities"); <china><province name="遼寧省"><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></province><province name="吉林省"><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></province> </china>

3.2.6 讓類的成員不生成對應XML元素

到現在為止，我們都是每個類，每個成員都有對應的元素（或屬性）存在，但有時我們并不希望某些類的成員在對應的XML文檔中出現，例如我們不希望City類的description成員出現在XML文檔中，可以使用下面方法：

xstream.omitField(City.class, "description"); <china><province name="遼寧省"><city><name>沈陽</name></city><city><name>大連</name></city></province><province name="吉林省"><city><name>長春</name></city><city><name>白城</name></city></province> </china>

4. JSON

4.1 什么是JSON

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

JSON是用字符串來表示Javascript對象，例如可以在Servlet中發送一個JSON格式的字符串給客戶端Javascript，Javascript可以執行這個字符串，得到一個Javascript對象。

XML也可以用來佟大為數據交換，前面已經學習過在Servlet中發送XML給Javascript，然后Javascript再去解析XML。

4.2 JSON對象語法

JSON 語法：

• 數據在名稱/值對中
• 數據由逗號分隔
• 花括號保存對象
• 方括號保存數組

var person = {"name":"zhangSan", "age":"18", "sex":"male"}; alert(person.name + ", " + person.age + ", " + person.sex);

注意，key也要在雙引號中！

JSON值：

• 數字（整數或浮點數）
• 字符串（在雙引號中）
• 邏輯值（true 或 false）
• 數組（在方括號中）
• 對象（在花括號中）
• null

var person = {"name":"zhangSan", "age":"18", "sex":"male", "hobby":["cf", "sj", "ddm"]}; alert(person.name + ", " + person.age + ", " + person.sex + ", " + person.hobby);

帶有方法的JSON對象：

var person = {"name":"zhangSan", "getName":function() {return this.name;}}; alert(person.name); alert(person.getName());

4.3 JSON與XML比較

• 可讀性：XML勝出；
• 解碼難度：JSON本身就是JS對象（主場作戰），所以簡單很多；
• 流行度：XML已經流行好多年，但在AJAX領域，JSON更受歡迎。

4.4 把Java對象轉換成JSON對象

apache提供的json-lib小工具，它可以方便的使用Java語言來創建JSON字符串。也可以把JavaBean轉換成JSON字符串。

4.4.1 json-lib核心jar包

json-lib的核心jar包有：　

• json-lib.jar

json-lib的依賴jar包有：

• commons-lang.jar
• commons-beanutils.jar
• commons-logging.jar
• commons-collections.jar
• ezmorph.jar

4.4.2 json-lib中的核心類

在json-lib中只有兩個核心類：

• JSONObject
• JSONArray

4.5 JSONObject

JSONObject類本身是一個Map，所以學習它很方便。

JSONObject jo = new JSONObject(); jo.put("name", "zhangSan"); jo.put("age", "18"); jo.put("sex", "male"); System.out.println(jo.toString());Person person = new Person("liSi", 18, "female"); JSONObject jo = JSONObject.fromObject(person); System.out.println(jo.toString());Map map = new HashMap(); map.put("name", "wangWu"); map.put("age", "81"); map.put("sex", "male");JSONObject jo = JSONObject.fromObject(map); System.out.println(jo.toString());String xml = "<person><name>zhaoLiu</name><age>59</age><sex>female</sex></person>"; XMLSerializer serial = new XMLSerializer(); JSONObject jo = (JSONObject)serial.read(xml); System.out.println(jo.toString());

4.6 JSONArray

JSONArray本身是一個List，所以使用起來很方便。

JSONArray ja = new JSONArray(); Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); ja.add(p1); ja.add(p2);System.out.println(ja.toString());Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); List<Person> list = new ArrayList<Person>(); list.add(p1); list.add(p2);JSONArray ja = JSONArray.fromObject(list);System.out.println(ja.toString());Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); Person[] persons = {p1, p2};JSONArray ja = JSONArray.fromObject(persons);System.out.println(ja.toString());

5. JS解釋服務器發送過來的JSON字符串

服務器發送過來JSON字符串后，客戶端需要對其進行解析。這時客戶端需要使用eval()方法對JSON字符串進行執行！但要注意，eval()方法在執行JSON時，必須把JSON字符串使用一對圓括號括起來。

var json = "{\"name\":\"zhangSan\", \"age\":\"18\", \"sex\":\"male\"}"; var person = eval("(" + json + ")"); alert(person.name + ", " + person.age + ", " + person.sex);

6. ajaxutils小工具

// 創建request對象 function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多數瀏覽器} catch (e) {try {return ActvieXObject("Msxml2.XMLHTTP");//IE6.0} catch (e) {try {return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) {alert("哥們兒，您用的是什么瀏覽器啊？");throw e;}}} } /** option對象有如下屬性*//*請求方式*/method, /*請求的url*/ url, /*是否異步*/asyn, /*請求體*/params, /*回調方法*/callback,/*服務器響應數據轉換成什么類型*/typefunction ajax(option) {/** 1. 得到xmlHttp*/var xmlHttp = createXMLHttpRequest();/** 2. 打開連接*/if(!option.method) {//默認為GET請求option.method = "GET";}if(option.asyn == undefined) {//默認為異步處理option.asyn = true;}xmlHttp.open(option.method, option.url, option.asyn);/** 3. 判斷是否為POST*/if("POST" == option.method) {xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");}/** 4. 發送請求*/xmlHttp.send(option.params);/** 5. 注冊監聽*/xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷var data;// 獲取服務器的響應數據，進行轉換！if(!option.type) {//如果type沒有賦值，那么默認為文本data = xmlHttp.responseText;} else if(option.type == "xml") {data = xmlHttp.responseXML;} else if(option.type == "text") {data = xmlHttp.responseText;} else if(option.type == "json") {var text = xmlHttp.responseText;data = eval("(" + text + ")");}// 調用回調方法option.callback(data);}}; };

總結

以上是生活随笔為你收集整理的JavaWeb：AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。