webdesign:head_rush_ajax_appendix
差異處
這裏顯示兩個版本的差異處。
| 下次修改 | 前次修改 | ||
|
webdesign:head_rush_ajax_appendix [2007/03/04 17:27] wenpei 建立 |
webdesign:head_rush_ajax_appendix [2007/03/04 18:00] (目前版本) wenpei |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| ====== Head Rush Ajax 讀書筆記 ====== | ====== Head Rush Ajax 讀書筆記 ====== | ||
| - | ===== Chapter Five ===== | + | ===== Appendix 1 ===== |
| + | ===== Ajax 工具包 ===== | ||
| ==== Prototype ==== | ==== Prototype ==== | ||
| http://prototype.conio.net | http://prototype.conio.net | ||
| 行 24: | 行 25: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | ==== Dojo ==== | ||
| + | http://dojotoolkit.org | ||
| + | |||
| + | 想使用「包裹」時，就在靜態 JavaScript 中執行 dojo.require(包裹名稱)。 | ||
| + | |||
| + | dojo.io.bind 是 Dojo 包裹，含有 Ajax 相關程式碼和通用程式。 | ||
| + | |||
| + | <code> | ||
| + | <script language="JavaScript" type="text/javascript"> | ||
| + | dojo.require("dojo.io.bind"); | ||
| + | </script> | ||
| + | </code> | ||
| + | |||
| + | 送出請求： | ||
| + | <code> | ||
| + | var arguments = { | ||
| + | url: 'lookupCustomer.php', | ||
| + | method: 'GET', | ||
| + | content: 'phone=1234567890&name='SARS', | ||
| + | error: reportError, | ||
| + | load: updatePage | ||
| + | }; | ||
| + | |||
| + | dojo.io.bind(arguments); | ||
| + | </code> | ||
| + | |||
| + | 處理回應： | ||
| + | <code> | ||
| + | function updatePage(type, value, evt) { | ||
| + | var response = value; // 伺服器的回應 | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ===== JavaScript 程式庫，建立使用者介面。 ===== | ||
| + | ==== script.aculo.us ==== | ||
| + | http://script.aculo.us | ||
| + | |||
| + | <script type="text/javascript" src="prototype.js"> </script> | ||
| + | <script type="text/javascript" src="scriptaculous.js"> </script> | ||
| + | |||
| + | |||
| + | ==== Rico ==== | ||
| + | http://openrico.org | ||
| + | |||
| + | <script type="text/javascript" src="prototype.js"> </script> | ||
| + | <script type="text/javascript" src="rico.js"> </script> | ||
| + | <script type="text/javascript" src="util.js"> </script> | ||
| + | |||
| + | ===== JSON-PHP ===== | ||
| + | http://mike.teczno.com/json.html | ||
| + | |||
| + | <code> | ||
| + | require_once('JSON.php'); | ||
| + | $json = new Services_JSON(); | ||
| + | |||
| + | $order1 = array('name' => 'SARS', | ||
| + | 'age' => 18 ); | ||
| + | $order2 = array('name' => 'Kimble', | ||
| + | 'age' => 17 ); | ||
| + | |||
| + | $orders = array('coffeeOrders' => array($order1, $order2) ); | ||
| + | $output = $json->encode($orders); | ||
| + | print($output); | ||
| + | </code> | ||
| + | |||
| + | ===== JSON 剖析器 ===== | ||
| + | eval() 直接執行伺服器傳回來的 JSON 回應，沒有考慮到安全問題。 | ||
| + | |||
| + | 使用 JSON 剖析器，避免在 JavaScript 中使用 eval()。 | ||
| + | |||
| + | http://www.json.org/js.html | ||
| + | |||
| + | var jsonData = JSON.parse(request.resonseText); | ||
| + | |||
| + | JSON 剖析器只接受字串輸入，JSON.parse() 將伺服器回應字串當參數，轉變成物件。 | ||
webdesign/head_rush_ajax_appendix.1173000428.txt.gz · 上一次變更: 2007/03/04 17:33 (外部編輯)
若無特別註明，本 wiki 上的內容都是採用以下授權方式： CC Attribution-Noncommercial-Share Alike 3.0 Unported
