Transcript 06.2 Dojo AJAX

DOJO AJAX
IDIC
By Cwlin
何謂 AJAX
• AJAX 的全名為 Asynchronous JavaScript and XML
• 使用 JavaScript 透過 XML 非同部存取資料的技術
• XML 是一種可通用來表達資料的語言
• 解決 JavaScript 無法存取資料庫的限制
• 以 XML 做為媒介解決了 JavaScript 無法存取資料庫的問題
• 可以透過 JavaScript 更新網頁上的內容
資料處理的同步與非同步
參考自 O’Reilly 網站
實務上 AJAX 的應用
• 由於 JavaScript 在不同瀏覽器所支援程度的不同，因此
AJAX 語法中做了許多兼容的判斷
• 因此在實務上會拿已有的 AJAX Framework 使用，如: Dojo,
jQuery, Prototype 以節省時間，專心撰寫主要的程式
• AJAX 的使用以較少使用 XML 取而代之的是 JSON 格式，由
於它更為簡便與易於存取
JSON
• JSON, JavaScript Object Notation
一種以文字為基礎的資料表示
格式
• 由於它的表達格式簡單、資料
量小、易於轉換，已逐漸取代
XML 的應用
• 資料的轉換採用序列化
(serialize)
• 將程式中的變數、陣列、物件
轉換為可以傳輸的格式(字串)，
傳輸完再做反序列化
(deserialize)即可直接使用
使用 Dojo AJAX
• AJAX 其實就如同一般開啟網頁傳送資料
• 差別在於 AJAX 是透過 JavaScript 在背後執行
• Dojo 針對 AJAX 資料存取的方式提供了兩個方法:
• xhr.get– 以 GET 的方式存取資料
• xhr.post – 以 POST 的方式存取資料
• 在使用 AJAX 前必須要知道所要存取資料的網址，為產生
資料的後端程式，如: PHP
Dojo 使用 AJAX 的範例
• 向 get-content.php 取得資料並將取得的資料放進 ID 為
contentNode 的 HTML 標籤裡
require(["dojo/_base/xhr", "dojo/dom", "dojo/domReady!"],
function(xhr, dom) {
// Using xhr.get, as very little information is being sent
xhr.get({
// The URL of the request
url: "get-content.php",
// The success callback with result from server
load: function(newContent) {
dom.byId("contentNode").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
參數說明
• url
• 存取資料的網址，通常是後端的程式，如: PHP
• content
• 傳送給網頁伺服器的資料
• load
• 載入資料時會執行的函數，載入完的資料會以參數的方式傳
入這個函數，如: newContent
• error
• 發生錯誤時會執行的函數
非同步程式的特點
• 非同步程式的執行不是按照順序的
• 由於資料送出後回應的時間均不同，因此執行的順序與結果
的順序不一定會一致
• 非同步函式的呼叫並不會收到結果後才繼續執行後面的函
數
• 非同步函式的執行不論是否有收到結果都會繼續執行後面的
程式碼
練習一
• 以 AJAX 做一個按鈕點選後從 PHP 取得目前日期，並更新
到畫面上
使用 JSON 傳遞資料
• AJAX 的資料傳送介於前端(JavaScript)與後端(PHP)程式之間，
因此傳送前須將格式轉換為兩個語言共同的格式
• PHP 轉換 JSON 格式的方法
• json_encode($data)
• 將變數轉換為 JSON 格式的資料
• json_decode($json)
• 將 JSON 格式的資料轉換回變數
• JavaScript 使用 Dojo 轉換 JSON 格式的方法
• json.parse(json)
• 將 JSON 格式的資料轉換為變數
• json.stringify(data)
• 將變數轉換為 JSON 格式的資料
Dojo JSON
• 需要載入 dojo/json 元件
require(["dojo/json"], function(json){
json.parse("{x: 5, y: 3}");
});
require(["dojo/json"], function(json){
json.stringify({x: 5, y: 3});
});
PHP 轉換 JSON 格式
• 將變數轉換為 JSON 格式並印出
<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
echo json_encode($arr);
?>
• 將收到的 JSON 轉換為變數並以 var_dump 印出
<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json));
?>
• 通常由 $_GET 及 $_POST 取得資料
Dojo AJAX – 以 JSON 格式存取
• 加入參數 handleAs: "json" 會自動將收到的 JSON 資料轉換
回變數
• JSON 的資料要以物件的方式存取
require(["dojo/_base/xhr", "dojo/dom", "dojo/domReady!"],
function(xhr, dom) {
// Using dojo.xhrGet, as very little information is being sent
xhr.get({
// The URL of the request
url: "get-content.php",
handleAs: "json",
// The success callback with result from server
load: function(jsonData) {
dom.byId("newsContainerNode").innerHTML = jsonData.content;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
練習二
• 做一個註冊的表單包含姓名，電子郵件，以 AJAX 的方式
傳送到 PHP，PHP 回傳註冊成功的訊息並顯示在畫面上
AJAX 的防呆
• 避免相同動作重複執行
• 送出 AJAX 訊息後要將事件停用直到收到結果
• 介面在尚未取得結果前需顯示載入的圖示，並避免使用者
繼續更改介面內容
• 將表單元件停用(Disable)
• dojox/widget/Standby 的使用
Dojo Standby
• Dojo Standby 的元件主要用來解決 AJAX 在存取資料時，避
免使用者未取得結果就進行下一個動作，並顯示載入中的
圖示
<div id="basic" style="width: 300px; height: 150px; background-color: yellow;
border-style: solid; border-width: 2px;"></div>
<div id="basicStandby1" data-dojo-type="dojox/widget/Standby" data-dojoprops="target:'basic'"></div>
<script type="text/javascript">
require([
"dijit/registry", "dojo/parser", "dojox/widget/Standby", "dijit/form/Button"],
function(registry){
registry.byId("basicStandby1").show();
});
</script>
Dojo StandBy (續)
• 顯示讀取圖示
• registry.byId("basicStandby1").show();
• 取消顯示讀取圖示
• registry.byId("basicStandby1").hide();
練習三
• 承練習二，在註冊的過程中以 StandBy 元件顯示載入中的
圖示
Dojo Store
• Dojo Store 定義了一個共通存取的介面可以存取不同種類
的資料
Dojo Store (續)
• 透過 Dojo Store 可以使用同樣的資料內容代入不同的 Dojo
表單元件，產生不同的結果，如: Dojo DataGrid, Dojo
FilteringSelect, Dojo Tree
• Dojo Store 的資料格式
{
"identifier": "abbreviation",
"label": "name",
"items": [
{ "abbreviation": "AL", "name": "Alabama" },
... other 48 states here ...
{ "abbreviation": "WY", "name": "Wyoming" }
]
}
PHP 產生 JSON 資料
• 使用 PHP 產生相同格式的陣列再轉換為 JSON
$data = array();
$data["identifier"] = "abbreviation";
$data["label"] = "name";
$data["items"] = array();
$data["items"][] = array(
"abbreviation" => "AL",
"name" => "Alabama"
);
$data["items"][] = array(
"abbreviation" => "WY",
"name" => "Wyoming"
);
echo json_encode($data);
Dojo 使用 Store 載入資料
• JavaScript
require(["dojo/parser", "dojo/data/ItemFileReadStore", "dijit/form/FilteringSelect"]);
• HTML
<div id="countryStore" data-dojo-type="dojo/data/ItemFileReadStore"
data-dojo-props="url:'get_country.php', clearOnClose:true"
data-dojo-id="myStore">
</div>
<div data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="store: myStore,
searchAttr: 'name'"></div>
作業
• 設計一註冊程式，表單需填入帳號、密碼、姓名、E-mail，
以 AJAX 方式傳送到 PHP 並存入資料庫
• 帳號填寫完畢，以事件的方式呼叫向 PHP 查詢使用用者是否
已存在並顯示在帳號欄位後面
• 資料傳送過程中需顯示讀取中的畫面
• 若帳號已存在則不允許註冊
• 註冊後需顯示註冊成功的訊息
• 不可使用 alert() 顯示訊息