HTML5 表單元件：server端，開啟json檔，並直接轉成json物件 (下載school.json)
(要用chrome才能查詢到json資料)

1.重要觀念：
在server端是用loadjson的方式讀進的是整個json物件(不是純文字檔)，好處是可以直接由jsonDoc物件抓到所需的數據，缺點是若要輸出全部xml內容在螢幕上，則必須先將json物件轉成字串

2.步驟1：server端讀進整個json物件

function loadjson() {
var xmlhttp = new XMLHttpRequest();
var url = "json/school.json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var jsonDoc = JSON.parse(xmlhttp.responseText);
myFunction(jsonDoc);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

3.步驟2：由jsonDoc物件，抓出所需的資料

function myFunction(jsonDoc) {
document.getElementById("id01").innerHTML=jsonDoc[0].name;
document.getElementById("id02").innerHTML=jsonDoc[1].name;
document.getElementById("id03").innerHTML=jsonDoc[2].name;

//將json物件轉成string文字
txt01.value = JSON.stringify(arr);
}

4.步驟3：若需輸出全部json內容在螢幕上，則要先將json物件轉成字串

//將json物件轉成string文字
txt01.value = JSON.stringify(jsonDoc);

5.json物件，與json字串互相轉換的公式

(1).將字串轉換成 json 物件

var jsonDoc = JSON.parse(jsonstring);

(2).將json 物件轉換成字串

txt01.value = JSON.stringify(jsonDoc);

6.school.json內容

[
{"ip":"http://www.tsu.edu.tw/","name":"台灣首府大學","address":"台南市麻豆區南勢里168號","tel":"06-5718888","pic":"icon80_80/image01.jpg"},
{"ip":"http://web.ncku.edu.tw/","name":"成功大學","address":"臺南市東區大學路1號","tel":"06-2757575","pic":"icon80_80/image02.jpg"},
{"ip":"http://www.nutn.edu.tw/","name":"台南大學","address":"台南市中西區樹林街二段33號","tel":"06-2133111","pic":"icon80_80/image03.jpg"},
{"ip":"http://www.feu.edu.tw/","name":"遠東科大","address":"台南市新市區中華路49號 ","tel":"06-5979566","pic":"icon80_80/image04.jpg"},
{"ip":"http://www.ksu.edu.tw/","name":"崑山科大","address":"台南市永康區崑大路 195 號","tel":"06-2727175","pic":"icon80_80/image05.jpg"},
{"ip":"http://www.stust.edu.tw/","name":"南台科大","address":" 台南市永康區南台街一號","tel":"06-2533131","pic":"icon80_80/image06.jpg"}
]