JSON傳送與接收

Ajax Gossip: JSON傳送與接收

在 JSON 中我們已經介紹過其基本格式，與XML相同，JSON只是一個文字格式，只要客戶端與伺服端可以剖析它，就可以利用它作為傳送資料的格式，但它是JavaScript的核心特性之一，所以在JavaScript中使用JSON作為資料格式很方便，您還可以在 http://www.json.org 找到處理JSON的程式庫，包括客戶端JavaScript library與伺服端的library。

相較於XML，JSON在資料表示時更為簡潔，例如一個表示帳戶的資料，XML中可能如下表示：

<account>
<number>123456</number>
<name>Justin</name>
<balance>1000</balance>
</account>

而使用JSON可以這麼表示：

var account = {
number : "123456",
name: "Justin",
balance: "1000"
};

您可以下載 http://www.json.org/json.js ，並將之加入至網頁之中：

json.js 中有JSON parser與JSON stringifier，例如它擴充了物件，增加了toJSONString()函式，您可以直接如下傳回物件的JSON表示法：

function Account(number, name, balance) {
    this.number = number;
    this.name = name;
    this.balance = balance;
}

var account = new Account(123456, "Justin", 1000);
alert(account.toJSONString());

您可以按下執行範例觀看結果。

您可以把JSON表示法以POST發送至伺服端，例如：

HandleJSONEx-2.js

var xmlHttp;

function createXMLHttpRequest() {
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function prepareJSON() {
	var number = document.getElementById("num").value;
	var name = document.getElementById("name").value;
	var balance = document.getElementById("bal").value;
	
	var account = new Object();
	account.number = number;
	account.name = name;
	account.balance = balance;
	
	return account.toJSONString();
}

function handleAccount() {
    var json = prepareJSON();
    var url = "JSONServlet?timeStamp" + new Date().getTime();
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("POST", url);
    xmlHttp.setRequestHeader("Content-Type", 
                             "application/x-www-form-urlencoded");
    xmlHttp.send(json);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            document.getElementById("response").innerHTML = xmlHttp.responseText;
        }
    }
}

這個程式使用者輸入的帳號資訊包裝為物件，並使用JSON擴充的toJSONString()將之轉換為JSON格式，之後POST至伺服端，伺服端可以至 JSON in Java 下載JSON伺服端的Parser，您可以撰寫以下的程式：

JSONServlet.java

package onlyfun.caterpillar;

import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.*;

 public class JSONServlet extends javax.servlet.http.HttpServlet 
                          implements javax.servlet.Servlet {
	public JSONServlet() {
		super();
	}   	

	protected void doPost(HttpServletRequest request, 
            HttpServletResponse response) throws ServletException, IOException {
        String json = readJSONString(request);
        
        JSONObject jsonObject = null;
        String responseText = null;
        try {
            jsonObject = new JSONObject(json);
            responseText = "帳號 " + jsonObject.getString("number") + 
                "<br/> 名稱 "+ jsonObject.getString("name") + "<br/> 餘額 " 
                + jsonObject.getString("balance");
        }
        catch (JSONException e) {
            e.printStackTrace();
        }
        
        
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/xml");
        response.getWriter().print(responseText);
	}   
    
    private String readJSONString(HttpServletRequest request){
        StringBuffer json = new StringBuffer();
        String line = null;
        try {
            BufferedReader reader = request.getReader();
            while((line = reader.readLine()) != null) {
                json.append(line);
            }
        }
        catch(Exception e) {
            System.out.println(e.toString());
        }
        return json.toString();
    }
}

這個Servlet剖析JSON，並將資料取出後再傳回文字回應。

如果將JSON字串傳回給客戶端瀏覽器，則可以使用eval()將之運算為一個JavaScript物件以進行操作。

From Gossip@caterpillar

Ajax Gossip: JSON傳送與接收