輔導個案專用電子書的改良

前兩項功能的架構如下圖：

圖 4.15 改良版輔導個案專用電子書

在寫問卷之時，讓 widget 可以自動去遠端 server 抓取題目資料，理由是因 為這些題目很可能會更改或是增減，如果可以用網路即時更新，就不需要使用 iBooks store 來下載書本的更新，因為它自己就會更新。

但之前說過，在 widget 中只能使用 HTML 與 javascript，這意味著我們只能 使用 client 端的技術來達成資料交換，在這裡我們採用 AJAX（Asynchronized Javascript And XML）來達成我們和伺服器端的連接。

並且在這裡我們解開第四個好奇，經測試，只要在有網路連接的狀態下，我 們就可以用<script href=”套件位址”><script>的方式去引入外部函式庫，所 以在這裡我們引入了 jQuery，這是一套將 AJAX 處理的很好的函式庫。

AJAX 的核心程式碼如下：

$.ajax({

url:'http://140.122.184.36/ibook/questions_data.php', jsonp: 'json_callback',

data:{'ques_num':localStorage.quesNum}, dataType:'jsonp', 問題，Javascript 禁止跨網域的動作，所以當我想要從 iBooks 中的 widget 發送 資料到伺服器端，並爭取資料的回傳時，就會遇到問題，iBooks 中 widget 的資 料是它內建的，怎麼樣也無法讓 widget 中的 Javascript 不跨網域來收取資料，

所以這裡我們就需要用到 jsonp 這個型態的連接，jsonp 提供了一個跨網域的解 決方案，當今天你使用 jsonp 型態連到伺服器端，並且設定回傳的資料是 json 格式的檔案時，就可以跨網域。

因此可以看到 AJAX 的核心程式碼當中，dataType 設定為 jsonp，把題號 ques_num 傳送給伺服器端，讓伺服器端去資料庫中搜尋並將題目內容返回。若 AJAX 成功，就返回兩個參數：ques_amount，在題庫中總共有幾題以及 question 代表題目的內容，並將 ques_amount 儲存在 localStorage 中，將題目內容嵌入 HTML 中輸出給使用者看。

伺服器端的程式碼如下：

$sql = "select * from question";

$resource = mysql_query($sql, $link_ID);

$ques_count = mysql_num_rows($resource);

$ques_num = $_GET["ques_num"];

$sql = "select * from question where ques_num=$ques_num";

$resource = mysql_query($sql, $link_ID);

$data = mysql_fetch_array($resource);

$result["ques_amount"] = $ques_count;

$result["number"] = $ques_num;

$result["question"] = $data["content"];

echo $_GET['json_callback'] . '(' . json_encode($result) . ');';

以上程式碼說明如何連接資料庫，比較值得注意的是，要回傳的資料將它們 分類好放在陣列當中，再用 json_encode 把它編碼成 json 格式。

那麼在輔導個案回答完題目後，我們也是要將這些資料回傳遠端資料庫當中，

一樣也是使用 AJAX 來達到這個目的。

$.ajax({

url:'http://140.122.184.36/ibook/receive_ques_data.php', jsonp: 'json_callback',

data:{'ques_answer':ques_string, 'name':name, 'sex':sex, 'birth':birth, 'handicap':handicap, 'email':email},

dataType:'jsonp',

ques_answer 當中所存的值，就是將各題答案以逗號串起來的字串，跟存入 localStorage 當中的是一樣的格式。

接收端的程式碼如下，目的是要將接收到的問卷答案以及個人資料存入資料 庫。

$name = $_GET["name"];

$sex = $_GET["sex"];

$birth = $_GET["birth"];

$handicap = $_GET["handicap"];

$email = $_GET["email"];

$ques_answer = $_GET["ques_answer"];

if($sex == "male") $sex = 0;

else

$sex = 1;

$sql = "insert into user_answer (answer, name, sex, birth, mainDisable, mailOrPhone, build_time) values('$ques_answer', '$name', '$sex', '$birth', '$handicap', '$email', Now())";

$resource = mysql_query($sql);

接收端接收到各項資訊後就存到 user_answer 這個資料表當中去。