Ajaxの仕方（デモセットのダウンロードはここだよ（*´ー｀）ノ）

Ajax

Ajaxで来る人がぽつぽつといるかもなので、簡単に書いてみる。以下の作業は5以降は「信頼済みのサイト」または、ローカルで行ってください
1.Andrew Gregory's Web Pagesから、xmlhttprequest.jsをもらってくる。
2.demo.jsももらってくる。
3.demo.htmlとかてきとーにつくる。以下に例を示す





<p>
</p> 
<p><div id="demo"></div></p>

4.どっかに以上3つのファイルを置いてぽちぽちボタン押して遊ぶ(サンプル1)
次にこれでは面白くないので読み込むページを変える
5.googleに生贄になってもらう。以下に例を示す。

demo.js 12行目     req.open('GET', 'http://www.google.co.jp');

6.ぐーぐるのソースがそのまま見えてガッカリする。(サンプル2:但し、sagittarius.dip.jpを「信頼済みサイト」にしないとデモ見れません。。。信頼済みサイトにするにはIEなら右下の「インターネット」のヤツをごにょごにょしてください。やる場合は各自の責任で。)
7.とりあえずinnerHTMLにしてみる

demo.js 8行目 demo.appendChild(document.createTextNode(req.responseText));
　　　　　　　　　　↓
　　　　　　　//demo.appendChild(document.createTextNode(req.responseText));
　　　　　　　demo.innerHTML = req.responseText;

8.画像は表示されないけどまあいいかと思っておく(サンプル3)
9.任意のページをがしっと取ってくるようにする(サンプル4:ちゃんとボタンで操作してね)

[demo.html]




<p>
<form name=form1>
<input type=text size=30 name=url><br>

</form></p> 
<p><div id="demo"></div></p>


[demo.js]
function loadcode() {
  var req = new XMLHttpRequest();
  if (req) {
    req.onreadystatechange = function() {
      if (req.readyState == 4 && req.status == 200) {
        removecode();
        var demo = document.getElementById('demo');
        //demo.appendChild(document.createTextNode(req.responseText));
        demo.innerHTML = req.responseText;
      }
    };
    req.open('GET', document.form1.url.value);
    req.send(null);
  }
}
function removecode() {
  var demo = document.getElementById('demo');
  while (demo.hasChildNodes()) {
    demo.removeChild(demo.firstChild);
  }
}

10.よろこぶ
11.あとはお好きにどうぞ。
デモセットのダウンロード
・・・ところで、こういうのをAjaxって呼ぶのであってるのかな？（いまだに自信なし

▽xmlhttprequest.jsを使わない場合

  var req = new XMLHttpRequest();
を
  try {
        req = new ActiveXObject("Msxml2.XMLHTTP")
  } catch (e) {
    try {
      req = new ActiveXObject("Microsoft.XMLHTTP")
    } catch (E) {
      req = false
    }
  }
に変える

▽で、なんかみんな色々やってるけどこれだけじゃあれだよね？
って思うかもですけど、結局のところ、ターゲットにCGI等を指定して、そこで処理を頑張ってるという仕組みです。