本当にいまさらなんだけど
非同期通信
なるものをやってみた。
仕事で必要に迫られたわけでもないんだけど、バリバリに使いこなせないまでも
使った経験があるというのが大きいというのは経験として大いにあるので簡単なものを作ってみた。
もちろん最初から全て自作を考えたんだけど、逆にメンテや互換性を考えるとJQueryの方がいいだろうと思いそちらを利用することにした。
サンプルは以下
syncsample.html
text.php');<html>
<head>
<title>synchro</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>
<body>
<script type='text/javascript'>
<!--
function synctest(){
$('#message').load('asynchro
}
//-->
</script>
<H1>非同期通信テスト</H1>
<div class='msg' id='message'>ここにメッセージ出てくるよ</div>
<input type='button' value='sync start' onclick='synctest();'>
</body>
</html>
asynchrotext.php<?php
if( (rand(0, 2) % 2) == 0 )
{
echo '割り切れてるっす';
}
else
{
echo '割れるわけないっす';
}
?>
この2つのファイルを用意します。
sync startボタンをクリックすると
asynchrotext.php
にあるテキストがランダムに表示されるようになります。
驚くほど簡単。
これが非同期通信。
さらにこれを3秒おきに自動で更新するように改造してみます。
サンプルはこんな感じ
<html>
<head>
<title>synchro</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>
<body>
<script type='text/javascript'>
<!--
function synctest(){
$('#message').load('asynchro_text.php');
}
//-->
</script>
<H1>非同期通信テスト</H1>
<div class='msg' id='message'>ここにメッセージ出てくるよ</div>
<input type='button' value='sync start' onclick='synctest();'>
<script>
setInterval( function () {
// 3秒ごとに更新
synctest();
} , 3000 );
</script>
</body>
</html><script>
setInterval( function () {
// 3秒ごとに更新
synctest();
} , 3000 );
</script>関連記事
