JSON(Javascript Object Notation)簡介與使用教學

JSON是一個基於Java Script的語言
它利用文字的方式定義物件的描述方法
讓你的後端系統(C,C++,C#,ASP,Delphi,PHP,Java,Perl...等)
可以透過此格式輕易的與前端(Java Script)交換資訊
尤其在開發AJAX程式時，讓Java Script處理資料就像操作物件一樣簡單

舉例來講
假設我以Java初始化一個物件Person
Person person = new Person();
person.setName("become");
person.setBlog("become.wei-ting.net");

這物件經過JSON轉換後，你可以在Java Script端以類似的方式存取
jsonPerson.name;
jsonPerson.blog;

當然不是只有物件可以處理，
除了數字、字串外，連物件的屬性也可以是其他物件
甚至連陣列(Array)都可以處理

其實這種方式跟JAXB(Java Architecture for XML Binding)很類似
JAXB是做Java物件與XML轉換，將xml當做中介格式
JSON則是使用自己的定義格式
那為什麼還要用JSON呢？因為JSON幫你寫好很多方便的工具
讓你在個語言間轉換非常方便，尤其是在前端的Java Script

JSON很多資料與Library下載都可以在這裡找到 http://www.json.org/

這裡以我熟悉的Java為例，目的是讓後端的Java與前端的Java Script透過AJAX的方式交換物件資訊

所需的Jar檔案
1.json-lib.jar
2.ezmorpy.jar
3.json-taglib.jar


以ArrayList為例，後端(Server)程式如下：
Person person1 = new Person();
person1.setName("become");
person.setBlog("become.wei-ting.net");

Person person2 = new Person();
person2.setName("cindy");
person2.setBlog("cindy.wei-ting.net");

ArrayList list = new ArrayList();
list.add(person1 );
list.add(person2 );

JSONArray jsonArray = JSONArray.fromObject(list);
System.out.println(jsonArray); //這時候可以看到Json將Java物件轉換的文字
response.getWriter().write(jsonArray.toString());//回傳給前端，如果有中文，參考後面


前端(Client)程式如下：

/*
url指的是目標網址，pars是附加的參數
透過Ajax.Request呼叫後端程式，並將結果呼叫displayResult處理
*/

function getData(){
var url = 'http://localhost:8080/MyApp/ajaxHandler';
var pars = 'action=getUser';
var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: displayResult} );
}

/*
url指的是目標網址，pars是附加的參數
透過Ajax.Request呼叫後端程式，並將結果呼叫displayResult處理
*/
function displayResult(originalRequest){
var oProgressInfo = originalRequest.responseText;//取得回應的JSON字串
var jsonContent = eval("(" + oProgressInfo + ")");//將JSON文字轉成物件
alert(jsonContent[0].name);//跳出become字串
}

//建立定時呼叫function
function myPeriod(){
getData();
}
//設定定時呼叫的function與間隔時間(秒)
var pe = new PeriodicalExecuter(myPeriod, 1);

補充說明：
1.定時呼叫時，因為參數都相同，所以會有cache的問題
只要在Server端 response時加上這段就可以 response.setHeader("Cache-Control", "no-cache");

2.當傳送的文字有中文或是其他編碼文字時，也是在Server端 response時加上與頁面相同的編碼就可以。
response.setContentType("text/json;charset=big5");