編輯“Ajax- 與服務(wù)器通信2”（章節(jié)）

== 使用JSON向服務(wù)器發(fā)送數(shù)據(jù) ==


做了這么多，你已經(jīng)能更順手地使用JavaScript了，也許在考慮把更多的模型信息放在瀏覽器上。不過(guò)，看過(guò)前面的例子后（使用XML向服務(wù)器發(fā)送復(fù)雜的數(shù)據(jù)結(jié)構(gòu)），你可能會(huì)改變主意。通過(guò)串連接來(lái)創(chuàng)建XML串并不好，這也不是用來(lái)生成或修改XML數(shù)據(jù)結(jié)構(gòu)的健壯技術(shù)。<br>

'''JSON概述'''<br>

XML的一個(gè)替代方法是JSON，可以在www.json.org找到。JSON是一種文本格式，它獨(dú)立于具體語(yǔ)言，但是使用了與C系列語(yǔ)言（如C、C#、JavaScript等）類(lèi)似的約定。JSON建立在以下兩種數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)上，當(dāng)前幾乎所有編程語(yǔ)言都支持這兩種數(shù)據(jù)結(jié)構(gòu)：<br>

l    名/值對(duì)集合。在當(dāng)前編程語(yǔ)言中，這實(shí)現(xiàn)為一個(gè)對(duì)象、記錄或字典。<br>

l    值的有序表，這通常實(shí)現(xiàn)為一個(gè)數(shù)組。<br>

因?yàn)檫@些結(jié)構(gòu)得到了如此眾多編程語(yǔ)言的支持，所以JSON是一個(gè)理想的選擇，可以作為異構(gòu)系統(tǒng)之間的一種數(shù)據(jù)互換格式。另外，由于JSON是基于標(biāo)準(zhǔn)JavaScript的子集，所以在所有當(dāng)前Web瀏覽器上都應(yīng)該是兼容的。<br>

JSON對(duì)象是名/值對(duì)的無(wú)序集合。對(duì)象以 { 開(kāi)始，以 } 結(jié)束，名/值對(duì)用冒號(hào)分隔。JSON數(shù)組是一個(gè)有序的值集合，以[ 開(kāi)始，以 ] 結(jié)束，數(shù)組中的值用逗號(hào)分隔。值可以是串（用雙引號(hào)引起）、數(shù)值、true或false、對(duì)象，或者是數(shù)組，因此結(jié)構(gòu)可以嵌套。圖3-6以圖形方式很好地描述了JSON對(duì)象的標(biāo)記。<br>

[[Image:Image009.jpg]]


圖3-6  JSON對(duì)象結(jié)構(gòu)的圖形化表示（摘自www.json.org）<br>

請(qǐng)考慮employee對(duì)象的簡(jiǎn)單例子。employee對(duì)象可能包含名、姓、員工號(hào)和職位等數(shù)據(jù)。使用JSON，可以如下表示employee對(duì)象實(shí)例：
<br>
 var employee = {<br>
    "firstName" : John<br>
    , "lastName" : Doe<br>
    , "employeeNumber" : 123<br>
    , "title" : "Accountant"<br>
 }<br>
然后可以使用標(biāo)準(zhǔn)點(diǎn)記法使用對(duì)象的屬性，如下所示：<br>

var lastName = employee.lastName;   //Access the last name<br>
var title = employee.title;             //Access the title<br>
employee.employeeNumber = 456;      //Change the employee number<br>

JSON有一點(diǎn)很引以為豪，這就是它是一個(gè)輕量級(jí)的數(shù)據(jù)互換格式。如果用XML來(lái)描述同樣的employee對(duì)象，可能如下所示：<br>

 <employee><br>
    <firstName>John</firstName><br>
    <lastName>Doe</lastName><br>
    <employeeNumber>123</employeeNumber><br>
    <title>Accountant</title><br>
 </employee><br>
顯然，JSON編碼比XML編碼簡(jiǎn)短。JSON編碼比較小，所以如果在網(wǎng)絡(luò)上發(fā)送大量數(shù)據(jù)，可能會(huì)帶來(lái)顯著的性能差異。<br>

www.json.org網(wǎng)站列出了至少與其他編程語(yǔ)言的14種綁定，這說(shuō)明，不論在服務(wù)器端使用何種技術(shù)，都能通過(guò)JSON與瀏覽器通信。<br>

使用JSON的示例<br>

下面是一個(gè)簡(jiǎn)單的例子，展示了如何使用JSON將JavaScript對(duì)象轉(zhuǎn)換為串格式，并使用Ajax技術(shù)將這個(gè)串發(fā)送到服務(wù)器，然后服務(wù)器根據(jù)這個(gè)串創(chuàng)建一個(gè)對(duì)象。這個(gè)例子中沒(méi)有業(yè)務(wù)邏輯，也幾乎沒(méi)有用戶交互，它強(qiáng)調(diào)的是客戶端和服務(wù)器端的JSON技術(shù)。圖3-7顯示了一個(gè)“字符串化的”Car對(duì)象。<br>

[[Image:Image010.jpg]]


圖3-7  “字符串化的”Car對(duì)象<br>

因?yàn)檫@個(gè)例子幾乎與前面的POST例子完全相同，所以我們只關(guān)注JSON特定的技術(shù)。點(diǎn)擊表單上的按鈕將調(diào)用doJSON函數(shù)。這個(gè)函數(shù)首先調(diào)用getCarObject函數(shù)來(lái)返回一個(gè)新的Car對(duì)象實(shí)例，然后使用JSON JavaScript庫(kù)（可以從www.json.org免費(fèi)得到）將Car對(duì)象轉(zhuǎn)換為JSON串，再在警告框中顯示這個(gè)串。接下來(lái)使用XMLHttpRequest對(duì)象將JSON編碼的Car對(duì)象發(fā)送到服務(wù)器。<br>

因?yàn)橛锌梢悦赓M(fèi)得到的JSON-Java綁定庫(kù)，所以編寫(xiě)Java servlet來(lái)為JSON請(qǐng)求提供服務(wù)相當(dāng)簡(jiǎn)單。更妙的是，由于對(duì)每種服務(wù)器端技術(shù)都有相應(yīng)的JSON綁定，所以可以使用任何服務(wù)器端技術(shù)實(shí)現(xiàn)這個(gè)例子。
[[Image:Image011.jpg]]

<br>JSONExample servlet的doPost方法為JSON請(qǐng)求提供服務(wù)。它首先調(diào)用readJSONStr- ingFromRequestBody方法從請(qǐng)求體獲得JSON串，然后創(chuàng)建JSONObject的一個(gè)實(shí)例，向JSONObject構(gòu)造函數(shù)提供JSON串。JSONObject在對(duì)象創(chuàng)建時(shí)自動(dòng)解析JSON串。一旦創(chuàng)建了JSONObject，就可以使用各個(gè)get方法來(lái)獲得你感興趣的對(duì)象屬性。<br>

這里使用getString和getInt方法來(lái)獲取year、make、model和color屬性。這些屬性連接起來(lái)構(gòu)成一個(gè)串返回給瀏覽器，并在頁(yè)面上顯示。圖3-8顯示了讀取JSON對(duì)象之后的服務(wù)器響應(yīng)。<br>

代碼清單3-11顯示了jsonExample.html，代碼清單3-12顯示了JSONExample.java。<br>

代碼清單3-11  jsonExample.html<br>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <html xmlns="http://www.w3.org/1999/xhtml"><br>
 <head><br>
 <nowiki><title>JSON Example</title></nowiki><br>
 <nowiki><script type="text/javascript" src="json.js"></script></nowiki><br>
 <nowiki><script type="text/javascript"></nowiki><br>
 <nowiki>var xmlHttp;</nowiki><br>
 function createXMLHttpRequest() {<br>
    if (window.ActiveXObject) {<br>
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function doJSON() {<br>
    var car = getCarObject();<br>
    //Use the JSON JavaScript library to stringify the Car object<br>
    var carAsJSON = JSON.stringify(car);<br>
    alert("Car object as JSON:\n " + carAsJSON);<br>
    var url = "JSONExample?timeStamp=" + new Date().getTime();<br>
    createXMLHttpRequest();<br>
    xmlHttp.open("POST", url, true);<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.setRequestHeader("Content-Type",<br>
                   "application/x-www-form-urlencoded;");<br>
    xmlHttp.send(carAsJSON);<br>
 }<br>
 function handleStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            parseResults();<br>
        }<br>
    }<br>
 }<br>
 function parseResults() {<br>
    var responseDiv = document.getElementById("serverResponse");<br>
    if(responseDiv.hasChildNodes()) {<br>
        responseDiv.removeChild(responseDiv.childNodes[0]);<br>
    }<br>
    var responseText = document.createTextNode(xmlHttp.responseText);<br>
    responseDiv.appendChild(responseText);<br>
 }<br>
 function getCarObject() {<br>
    return new Car("Dodge", "Coronet R/T", 1968, "yellow");<br>
 }<br>
 function Car(make, model, year, color) {<br>
    this.make = make;<br>
    this.model = model;<br>
    this.year = year;<br>
    this.color = color;<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><form action="#"></nowiki><br>
      <nowiki><input type="button" value="Click here to send JSON data to the server"</nowiki><br>
        <nowiki>onclick="doJSON();"/></nowiki><br>
  <nowiki></form></nowiki><br>
  <nowiki><h2>Server Response:</h2></nowiki><br>
  <nowiki><div id="serverResponse"></div></nowiki><br>
 </body><br>
 </html><br>

代碼清單3-12  JSONExample.java<br>

 package ajaxbook.chap3;<br>
 import java.io.*;<br>
 import java.net.*;<br>
 import java.text.ParseException;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 import org.json.JSONObject;<br>
 public class JSONExample extends HttpServlet {<br>
    protected void doPost(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String json = readJSONStringFromRequestBody(request);<br>
        //Use the JSON-Java binding library to create a JSON object in Java<br>
        JSONObject jsonObject = null;<br>
       try {<br>
            jsonObject = new JSONObject(json);<br>
        }<br>
        catch(ParseException pe) {<br>
            System.out.println("ParseException: " + pe.toString());<br>
        }<br>
        String responseText = "You have a " + jsonObject.getInt("year") + " "<br>
            + jsonObject.getString("make") + " " + jsonObject.getString("model")<br>
            + " " + " that is " + jsonObject.getString("color") + " in color.";<br>
        response.setContentType("text/xml");<br>
        response.getWriter().print(responseText);<br>
    }<br>
    private String readJSONStringFromRequestBody(HttpServletRequest request){<br>
        StringBuffer json = new StringBuffer();<br>
        String line = null;<br>
        try {<br>
            BufferedReader reader = request.getReader();<br>
            while((line = reader.readLine()) != null) {<br>
               json.append(line);<br>
            }<br>
        }<br>
        catch(Exception e) {<br>
           System.out.println("Error reading JSON string: " + e.toString());<br>
        }<br>
        return json.toString();<br>
    }<br>
 }<br>
[[category:Ajax]]