Ajax



Ajaxを試して見たのでメモ.

まず,Ajaxとは簡単に言うとHTTP通信を利用してXMLをブラウザのリロードなしに行うアプリケーションの実装形態.
もっというと,XML使わなくてもいい.
つまるところ,リロードなしになんかデータ引っ張ってこれるってとこが特徴でしょうかね?

ちょっと長いのでサンプルだけ見たい人はこちら
XMLHttpRequestってクラスでXML等を取得するんだけど,IEではActiveXコンポーネントを使うらしい.

new ActiveXObject(ProgID);
んで,ProgIDには
Microsoft.XMLHTTP(古)
MSXML2.XMLHTTP(新)
のどちらかを入れる模様.

MSXML2.XMLHTTPこっちのほうは大まかに言うとIE6かOSでWinXPが入ってれば使えるみたい.


簡単な流れは


1.XHTMLHttpRequestに相当するオブジェクトの生成.
2.onreadystatechange(オブジェクトの状態が変化したときに実行されるイベントハンドラ)の定義.
3.openメソッドで開くファイルとか設定を決める
4.sendメソッドでrequestパラメータとともにゲトーしにいく.

ってなわけでテス㌧.

ちなみにXMLはこれ.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<memberSet>
  <member id="mem001">
    <name>ヤマダ タロウ</name>
    <age>26</age>
    <email>yamada@graffiti-web.org</email>
  </member>
  <member id="mem002">
    <name>タナカ タロウ</name>
    <age>20</age>
    <email>tanaka@graffiti-web.org</email>
  </member>
</memberSet>

んで,上記流れの簡単なスクリプト.

  this.createXMLHttpRequest = function() {
    return typeof XMLHttpRequest != 'undefined' ? 
      new XMLHttpRequest()
       : new ActiveXObject("Microsoft.XMLHTTP");
  };

  var objRequest = createXMLHttpRequest();

  objRequest.onreadystatechange = function() {
    alert(typeof this);
  };

  objRequest.open("GET", 'test.xml', true);
  objRequest.send(null);

ちなみにこれだとFirefoxだと
// function
IEだと
// object
と出力…

Firefoxの方だとobjRequestではなくてonreadystatechangeに割り当てた無名関数の実態(?)がthisとなっている...(._・)>?
これは通常objRequestを指すのではないの??

イベントハンドラとして呼ばれるのが怪しいのかな…?
と思って
//  objRequest.open("GET", 'test.xml', true);
//  objRequest.send(null);

  objRequest.onreadystatechange();
こうしたら怒られた…
イベントハンドラ自身を直接叩いても怒られた…

んじゃ,objRequest自体をプリミティブなObjectにして
  this.createXMLHttpRequest = function() {
    return typeof XMLHttpRequest != 'undefined' ? 
      new XMLHttpRequest()
       : new ActiveXObject("Microsoft.XMLHTTP");
  };

//  var objRequest = createXMLHttpRequest();
  var objRequest = {};

  objRequest.onreadystatechange = function() {
    alert(typeof this);
  };

//  objRequest.open("GET", 'test.xml', true);
//  objRequest.send(null);

  objRequest.onreadystatechange();
とするとFirefox,IEともにObjectになった.
なんか,XMLHttpRequest内でのイベントの処理の仕方が違うのかな…(ワカラン

しょうがないのでとりあえずローカル変数を拾って
  objRequest.onreadystatechange = function() {
    alert(objRequest.readyState);
  };
こうした.

で,できたのがこちーら

なんか,IEでローカルだとobjXMLDocument.documentElementがとれない…
もしやと思ってサーバにあげたら取れた…な,なんで??

あと,これ実行するとタグがそのまま表示されちゃうんだけど,ど,どして??
追記)
JSからタグを直接タグ自体を挿入してもNG.
ちゃんとDOMのcreateElementappendChildしてあげないと.

ちなみに
objRequest.responseText
をみると取り込んだXMLの中身が入ってる.
おそらく,フツーのテキスト読めばそれが入ってるからXML形式の通信じゃなくてもだいじぶと思う.

フレームワークメモ) prototype
Ajaxに限ったものじゃないみたいだけど.時間があれば1度覗いてみたい.
Sack of Ajax
全然見てないけどメモだけ.


参考)
Hawk's W3 Laboratory | XMLHttpRequestについて
All About Japan | Ajaxはじめの一歩 XMLHttpRequest
ウェブ工房 | AjaxとHttpRequest
今日の戯言 | Ajax を使った郵便番号検索
JavaScript++かも日記 | 【Ajax】MSXML


contributor nao : 2005年05月20日 17:06

trackback

trackback for this entry URL:
http://blog.graffiti-web.org/mt/mt-tb.cgi/207

comment

あれ,コメントなしに設定してた…

contributor nao : 2005年05月24日 09:59