******* 使用 JSON 傳出及傳回資料 *******

  1. 在 HTML 的 head 部份加入使用 json.js 及 json2.js 檔案:

    先至 http://www.json.org 下載 json.js 及 json2.js,
    再將這兩個檔案前面的第一行程式碼(alert())刪除後儲存。
    然後在 HTML 的 head 部份加入

    <script type=”text/javascript” src=”scripts/json.js”></script>
    <script type=”text/javascript” src=”scripts/json2.js”></script>

    如此一來就可以在網頁中使用 JSON.parse()obj.toJSONString()

  2. 前端撰寫 button onclick 會呼叫的 submitForm() 程式碼:

    先接收表單資料,再將資料設定為 Javascript 物件的屬性,
    然後指定後端處理程式的位置,指定 POST 資料的 Content-Type
    指定 readyState 改變時要呼叫的程式,最後再送出資料;

    
    function submitForm()
    {
      var name=document.forms[0].name.value;
      var age=document.forms[0].age.value;
      var habits_array=document.forms[0].habits;
    
      var habits=new Array();
      for(var i=0;i < habits_array.length;i++)
      {
        if(habits_array[i].checked==true)
          habits.push(habits_array[i].value);
      }
    
      var profile={"name":name,"age":age,"habits":habits};
    
      request.open("POST","getForm2.php",true);
      request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      request.onreadystatechange=updatePage;
      request.send("profile="+profile.toJSONString());
    }
    
    
  3. 後端取得 JSON 字串並轉成該程式可使用之物件(或陣列)後再處理資料:

    由於前端傳來一個 JSON 字串,因此要透過 function 將字串轉成物件。
    PHP 5.2 版以後提供兩個 function 可以處理 JSON,
    使用 json_encode 可以把 PHP 物件或關聯式陣列轉成 JSON 字串,
    使用 json_decode 可以把 JSON 字串轉成 PHP 物件或關聯式陣列。
    先用 json_decode 將接收的資料轉成 PHP 物件,然後判斷資料是否有空值,
    若有,則在標頭加入錯誤訊息後回傳,若無,則將該物件轉成 JSON 字串後輸出前端。

    
    # 判斷是否有傳入空的資料
    function checkEmpty($title,$str)
    {
      if(strlen(trim($str))<=0)
        return $title."沒資料;";
      else
        return "";
    }
    
    # 接收來自前端的資料
    $profile=json_decode($_POST["profile"]);
    
    # 判斷是否接收到空的資料
    $err=checkEmpty("姓名",$profile->name);
    $err.=checkEmpty("年齡",$profile->age);
    
    # 模擬處理時間
    sleep(2);
    
    # 若有空資料,則傳回錯誤
    if(strlen(trim($err))>0)
    {
      header("Status: ".$err,false,400);
      exit();
    }
    
    # 設定標頭後送出資料
    print json_encode($profile);
    
    
  4. 前端撰寫接收後端傳來資料的處理程式:

    同處理 XML 的方式先判斷 request 的 readyStatestatus 後再處理。
    當回應 OK 時,先用 request.responseText 接收純文字資料(非 responseXML),
    再用 json2.js 的 JSON.parse() 將字串轉成 Javascript 物件,
    接著就可以使用「物件.屬性」的方式找出需要的資料,再顯示出來。

    
    function updatePage()
    {
      var state=request.readyState;
      switch(state)
      {
        case 1:
        case 2:
        case 3:
          document.getElementById("shower").innerHTML="處理中 ...";
          break;
        case 4:
          if(request.status==200)
          {
            var profile=JSON.parse(request.responseText);
            var name=profile.name;
            var age=profile.age;
    	var habits_array=profile.habits;
    
    	var habits="";
    	if(habits_array && habits_array.length>0)
    	{
    	  for(var i=0;i < habits_array.length;i++)
    	  { habits+=(habits_array[i]+","); }
    	  habits=habits.substring(0,habits.length-1);
    	}
    
            document.getElementById("shower").innerHTML
    	="姓名:"+name+"
    " +"年齡:"+age+"
    " +"興趣:"+habits; } else { if(request.getResponseHeader("Status")) { document.getElementById("shower").innerHTML ="發生錯誤:"+request.getResponseHeader("Status"); } else { document.getElementById("shower").innerHTML ="發生錯誤:狀態碼="+request.status; } } } }

比較兩個同樣功能的程式,一個為處理 XML,一個為處理 JSON
以 coding 的份量來說,JSON 似乎少了許多,也比較清楚。
不過需要藉助一些額外的外掛(Plugin),否則要自行撰碼處理。