HTML5 表單元件：client端，開啟book.json文字檔，再以上一筆，下一筆顯示資料(下載book.json)
(要用chrome才能查詢到json資料)

1.重要觀念：
(A).client端讀取文字檔，要等待這個函數讀完，jsonstring 才會完整正確
(B).所以，解析jsonstring的工作必須在另外一個函數來做 initialjsonDoc()
(C).必須分兩階段來處理，也就是cilient端讀取json，一定要有兩個按鈕，第1個是opfile對話方塊(show01()函數)，第2個是將jsonstring轉成xmlDoc物件的函數initialjsonDoc()(在上一頁previous()，下一頁next()，在這兩個函數裡面呼叫initialjsonDoc())
(D).但在上一頁裡面的有個問題：因為要判別是否下一個已經超過極限，if(i>jsonDoc.length){i=0;}，第一次執行next()，jsonDoc書籍物件還沒有值undefined，
所以要先判斷if(jsonDoc == undefined){initialjsonDoc();}若是書籍jsonDoc物件還沒有值undefined，就去執行initialjsonDoc()，將jsonstring轉成jsonDoc。

2.重要觀念：
在client端是無法用loadjson的方式讀進整個json物件的，所以若要在client 端讀進json的資料，變通的方法是，以『字串』的方式讀入(而非json物件)，讀入後再將字串轉成json物件

3.步驟1：第1個函數show01()讀入純文字的步驟

var jsonstring ="";
function show01(fileinfo) {
//讀取json到字串jsonstring
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
jsonstring = event.target.result;
};
fReader.readAsText(file);
}

(3).步驟2：函數2：initialjsonDoc()將字串轉成jsonDoc物件

function initialjsonDoc() {
jsonDoc = JSON.parse(jsonstring);
}

(4).步驟3：以上一筆，下一筆顯示資料

步驟1:建立next()函數來控制到下一筆

function next() {
if(jsonDoc == undefined){initialjsonDoc();}
i++;
if(i>jsonDoc.length){i=0;}
changedata(i);
}

步驟2:建立previous()函數來控制到下一筆

function previous() {
if(jsonDoc == undefined){initialjsonDoc();}
i--;
if(i<0){i=jsonDoc.length-1;}
changedata(i);
}

步驟3:建立顯示單筆資料的changedata(i)

var i=0;
var jsonDoc;
function changedata(i)
{
str ="書名:" + jsonDoc[i].title;
str +="<br/>作者:" + jsonDoc[i].author;
str +="<br/>類別:" + jsonDoc[i].category;
str +="<br/>出版日期:" + jsonDoc[i].pubdate;
str +="<br/>書號:" + jsonDoc[i].id;

document.getElementById("id01").innerHTML = str;
}

(5).book.json內容

[
{
"title": "Dreamweaver CC 網站設計",
"author": "鄧文淵",
"category": "網頁設計",
"pubdate": "05/2014",
"id": "web001"
},
{
"title": "ASP.NET 3.5 網頁程式設計",
"author": "陳會安",
"category": "網頁設計",
"pubdate": "07/2014",
"id": "web002"
},
{
"title": "C#.NET 程式設計",
"author": "曹祖聖",
"category": "程式設計",
"pubdate": "11/2012",
"id": "prog001"
},
{
"title": "jQuery Mobile設計",
"author": "陳會安",
"category": "手機設計",
"pubdate": "06/2014",
"id": "mobile001"
}
]