トップページ / JavaScriptオンラインエディタ

JavaScriptオンラインエディタ

スクリプトを入力ボックスに書いて「スクリプト実行」ボタンを押すとWEB上でJavaScriptを実行＆動作確認できます。

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
var myajax;
function execute() {
	myajax = new Ajax.PeriodicalUpdater(
		"container",
		"/samples/ajax/test.php",
		{
			"method": "get",
			"parameters": "p=hoge",
			frequency: 5, // 5秒ごとに実行
			onSuccess: function(request) {
				// 成功時の処理を記述
				// alert('成功しました');
				// jsonの値を処理する場合↓↓
				//  var json;
				//  eval("json="+request.responseText);
				
				// ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え)
				var str = myajax.options.parameters;
				var hash = str.parseQuery();
				hash["ajax_request_id"] = Math.random();
				hash = $H(hash);
				myajax.options.parameters = hash.toQueryString();
			},
			onComplete: function(request) {
				// 完了時の処理を記述
				// alert('読み込みが完了しました');
				// jsonの値を処理する場合↓↓
				//  var json;
				//  eval("json="+request.responseText);
			},
			onFailure: function(request) {
				alert('読み込みに失敗しました');
			},
			onException: function (request) {
				alert('読み込み中にエラーが発生しました');
			}
		}
	);
}
function stop() {
	if (myajax != null && myajax != undefined) {
		myajax.stop();
	}
}
</script>
<body>
<div id="container">content</div>
<button onclick="execute()">Ajax開始</button>
<button onclick="stop()">停止する</button>
</body>

<!--
サーバサイドスクリプト(test.php)

<?php header("Content-type:text/html;charset=utf-8"); ?>
<html>
<body>
<?php
echo "server response:".date("Y/m/d H:i:s")."<br>";
echo "request:".$_SERVER["REQUEST_URI"];
?>
</body>
</html>
-->

スクリプト実行結果が表示されます。