* prototype.js [#s8be96cf]
** 普通にAjaxでデータ取得 [#f78b1544]
- Ajax.Requestクラスを使用する。
- test.txtでなくtest.xmlでも同様に動作する。ライブラリが勝手に処理してくれるようだ。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="lib/prototype.js"></script>
<script>
function getData() {
var ajx = new Ajax.Request(
'http://192.168.0.100/~ryuichi/ajax/test.txt',
{
method: 'get',
onComplete: show
}
);
}
function show(req) {
$('result').innerHTML = req.responseText;
}
</script>
</head>
<body>
<input type="button" value="ok" onClick="getData()">
<div id="result"></div>
</body>
</html>
** 次に読み込み中の表示を加える。 [#a3a813f3]
- 分かり易いようにsleepをかけたtest.phpを使用する。
- Ajax.Responders.registerを使用する。
test.php:
<?
sleep(1);
print "HELLO\n";
?>
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="lib/prototype.js"></script>
<script>
var globalHandler = {
onCreate: function () {
Element.show('working');
},
onComplete: function () {
if (Ajax.activeRequestCount == 0) {
Element.hide('working');
}
}
};
Ajax.Responders.register(globalHandler);
function getData() {
var ajx = new Ajax.Request(
'http://192.168.0.100/~ryuichi/ajax/test.php',
{
method: 'get',
onComplete: show
}
);
}
function show(req) {
$('result').innerHTML = req.responseText;
}
</script>
</head>
<body>
<input type="button" value="ok" onClick="getData()">
<div id="working" style="display:none">WORIKING ...</div>
<div id="result"></div>
</body>
</html>
** Ajaxで返って来た文字列を表示するだけなら、もっと楽に出来る [#q2ce4325]
- Ajax.Updaterを使う。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="lib/prototype.js"></script>
<script>
var globalHandler = {
onCreate: function () {
Element.show('working');
},
onComplete: function () {
if (Ajax.activeRequestCount == 0) {
Element.hide('working');
}
}
};
Ajax.Responders.register(globalHandler);
function getData() {
var ajx = new Ajax.Updater(
'result',
'http://192.168.0.100/~ryuichi/ajax/test.php',
{
method: 'get',
}
);
}
</script>
</head>
<body>
<input type="button" value="ok" onClick="getData()">
<div id="working" style="display:none">WORIKING ...</div>
<div id="result"></div>
</body>
</html>
