JavaScript - Ajax(onmouseover、onmouseout)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

独習JavaScript 高橋 和也 (著), 竹添 直樹 (著), 里見 知宏 (著) の第10章(Ajax)の理解度チェック3を解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)

3

HTML(TextWrangler)

<script>
function f(name){
  if(!name){
    $('#d0').html('');
    return;
  }
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState == 4 && request.status == 200){
      $('#d0').html(request.responseText);
    }
  };
  request.open('GET','https://sites.google.com/site/sitekamimura/dokusyujavascript/' + name,true);
  request.send(null);
}
</script>
<p onmouseover="f('a.txt')" onmouseout="f()">a.txt</p>
<p onmouseover="f('b.txt')" onmouseout="f()">b.txt</p>
<div id='d0'></div>

a.txt

b.txt