1 / 24

DOJO AJAX

DOJO AJAX. IDIC By Cwlin. 何謂 AJAX. AJAX 的全名為 Asynchronous JavaScript and XML 使用 JavaScript 透過 XML 非同部存取資料的技術 XML 是一種可通用來 表達 資料的語言 解決 JavaScript 無法存取資料庫的限制 以 XML 做為媒介解決了 JavaScript 無法存取資料庫的問題 可以 透過 JavaScript 更新網頁上的內容. 資料處理的同步與非同步. 參考自 O’Reilly 網站. 實務上 AJAX 的應用.

hera
Download Presentation

DOJO AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DOJO AJAX IDIC By Cwlin

  2. 何謂 AJAX • AJAX 的全名為 Asynchronous JavaScript and XML • 使用 JavaScript 透過 XML 非同部存取資料的技術 • XML 是一種可通用來表達資料的語言 • 解決 JavaScript 無法存取資料庫的限制 • 以 XML 做為媒介解決了 JavaScript 無法存取資料庫的問題 • 可以透過 JavaScript 更新網頁上的內容

  3. 資料處理的同步與非同步 參考自 O’Reilly 網站

  4. 實務上 AJAX 的應用 • 由於 JavaScript 在不同瀏覽器所支援程度的不同，因此 AJAX 語法中做了許多兼容的判斷 • 因此在實務上會拿已有的 AJAX Framework 使用，如: Dojo, jQuery, Prototype 以節省時間，專心撰寫主要的程式 • AJAX 的使用以較少使用 XML 取而代之的是 JSON 格式，由於它更為簡便與易於存取

  5. JSON • JSON,JavaScript Object Notation 一種以文字為基礎的資料表示格式 • 由於它的表達格式簡單、資料量小、易於轉換，已逐漸取代 XML 的應用 • 資料的轉換採用序列化(serialize) • 將程式中的變數、陣列、物件轉換為可以傳輸的格式(字串)，傳輸完再做反序列化(deserialize)即可直接使用

  6. 使用 Dojo AJAX • AJAX 其實就如同一般開啟網頁傳送資料 • 差別在於 AJAX 是透過 JavaScript 在背後執行 • Dojo 針對 AJAX 資料存取的方式提供了兩個方法: • xhr.get– 以 GET 的方式存取資料 • xhr.post– 以 POST 的方式存取資料 • 在使用 AJAX 前必須要知道所要存取資料的網址，為產生資料的後端程式，如: PHP

  7. 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             } }); });

  8. 參數說明 • url • 存取資料的網址，通常是後端的程式，如: PHP • content • 傳送給網頁伺服器的資料 • load • 載入資料時會執行的函數，載入完的資料會以參數的方式傳入這個函數，如: newContent • error • 發生錯誤時會執行的函數

  9. 非同步程式的特點 • 非同步程式的執行不是按照順序的 • 由於資料送出後回應的時間均不同，因此執行的順序與結果的順序不一定會一致 • 非同步函式的呼叫並不會收到結果後才繼續執行後面的函數 • 非同步函式的執行不論是否有收到結果都會繼續執行後面的程式碼

  10. 練習一 • 以 AJAX 做一個按鈕點選後從 PHP 取得目前日期，並更新到畫面上

  11. 使用 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格式的資料

  12. 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}); });

  13. PHP 轉換 JSON 格式 • 將變數轉換為 JSON 格式並印出 • 將收到的 JSON 轉換為變數並以 var_dump印出 • 通常由 $_GET 及 $_POST 取得資料 <?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr); ?> <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; var_dump(json_decode($json)); ?>

  14. 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 } }); });

  15. 練習二 • 做一個註冊的表單包含姓名，電子郵件，以AJAX 的方式傳送到 PHP，PHP 回傳註冊成功的訊息並顯示在畫面上

  16. AJAX 的防呆 • 避免相同動作重複執行 • 送出 AJAX 訊息後要將事件停用直到收到結果 • 介面在尚未取得結果前需顯示載入的圖示，並避免使用者繼續更改介面內容 • 將表單元件停用(Disable) • dojox/widget/Standby 的使用

  17. 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-dojo-props="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>

  18. Dojo StandBy (續) • 顯示讀取圖示 • registry.byId("basicStandby1").show(); • 取消顯示讀取圖示 • registry.byId("basicStandby1").hide();

  19. 練習三 • 承練習二，在註冊的過程中以 StandBy元件顯示載入中的圖示

  20. Dojo Store • Dojo Store 定義了一個共通存取的介面可以存取不同種類的資料

  21. 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" } ] }

  22. 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);

  23. Dojo 使用 Store 載入資料 • JavaScript • HTML require(["dojo/parser", "dojo/data/ItemFileReadStore", "dijit/form/FilteringSelect"]); <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>

  24. 作業 • 設計一註冊程式，表單需填入帳號、密碼、姓名、E-mail，以 AJAX 方式傳送到 PHP 並存入資料庫 • 帳號填寫完畢，以事件的方式呼叫向 PHP 查詢使用用者是否已存在並顯示在帳號欄位後面 • 資料傳送過程中需顯示讀取中的畫面 • 若帳號已存在則不允許註冊 • 註冊後需顯示註冊成功的訊息 • 不可使用 alert() 顯示訊息

More Related