====== Head Rush Ajax 讀書筆記 ======
===== Appendix 1 =====
===== Ajax 工具包 =====
==== Prototype ====
http://prototype.conio.net
var request = new Ajax.Request(
url, // 請求所要送達的地方
{
method: 'get', // GET or POST
parameters: 'phone=1234567890&name=SARS', // 名值對,送到伺服端
onSuccess: updatePage,
onFailure: reportError // 發生錯誤時執行此回呼函式
}
......
}
處理回應:
function updatePage(request) {
var response = request.responseText; // 不需要檢查備妥狀態和狀態碼,Prototype 會處理
}
==== Dojo ====
http://dojotoolkit.org
想使用「包裹」時,就在靜態 JavaScript 中執行 dojo.require(包裹名稱)。
dojo.io.bind 是 Dojo 包裹,含有 Ajax 相關程式碼和通用程式。
送出請求:
var arguments = {
url: 'lookupCustomer.php',
method: 'GET',
content: 'phone=1234567890&name='SARS',
error: reportError,
load: updatePage
};
dojo.io.bind(arguments);
處理回應:
function updatePage(type, value, evt) {
var response = value; // 伺服器的回應
}
===== JavaScript 程式庫,建立使用者介面。 =====
==== script.aculo.us ====
http://script.aculo.us
==== Rico ====
http://openrico.org
===== JSON-PHP =====
http://mike.teczno.com/json.html
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);
===== JSON 剖析器 =====
eval() 直接執行伺服器傳回來的 JSON 回應,沒有考慮到安全問題。
使用 JSON 剖析器,避免在 JavaScript 中使用 eval()。
http://www.json.org/js.html
var jsonData = JSON.parse(request.resonseText);
JSON 剖析器只接受字串輸入,JSON.parse() 將伺服器回應字串當參數,轉變成物件。