2009年11月13日

今更のAjax基本:XMLHttpRequestについて

前記

恥ずかしいことに今仕事でjQueryでばりばりAjaxを使ってますが、
実際はただjQueryの便利なAPIを使っただけで
Ajaxそのものの仕組みも分かっていません。

今更ですが、その辺の基礎知識を勉強しできるだけ誰にも分かるように
自分が理解したことをメモとして残したいです。

XMLHttpRequestとは

JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト(API)である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。 XMLHttpRequest - Wikipedia

なるほど、これがAjaxを支える基幹ですね。
JavaScriptのオブジェクトです。
名前にXMLがついていますが、XML以外のデータも扱うことができます。

XMLHttpRequestの歴史

XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインターフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMozillaプロジェクトがこれと互換性のある組み込みオブジェクトをMozilla 0.9.7およびNetscape 7で実装し、アップルも2004年にSafari 1.2でMozillaと同様の組み込みオブジェクトを実装し始めた[2]。 このように徐々にInternet Explorer以外のブラウザにも実装されていったXMLHttpRequestは、2005年にAjaxによって一躍有名になった。 XMLHttpRequest - Wikipedia

ようは各ブラウザが先にXMLHttpRequestオブジェクトを実装した、
そして偉い人がAjaxを提唱してから一気に有名になった訳ですよね。

XMLHttpRequestの仕組み

AllAboutの記事に載ってた仕組みを自分で書きました。
f:id:kinopyo:20091114023141j:image
XMLHttpRequestのメソッドやプロパティは多分これからも使うことはありませんが、
一応図で見て大体把握しておきましょう。
openメソッドはイニシャライズみたいな感じで、GETかPOSTか、URLなどのパラメータを受け取ります。
そしてsendメソッドによるサーバに送信する前に、onreadystatechangeイベントのコールバックでステータスを判断しresponseTextやresponseXML プロパティのデータを返す流れですね。

拡張機能から XMLHttpRequest を使いたい場合は、非同期でロードするようにすべきです。
非同期の使用法では、データを受け取ったときにコールバックを受け取ります。
そのため、リクエストが発生している間はブラウザは通常どおりに動き続けます。

XMLHttpRequestの宣言

ブラウザにより異なる。 IE では、ActiveXObject("Microsoft.XMLHTTP") を使用。 IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") , ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。 Mozilla 系ブラウザでは、XMLHttpRequest() を使用。 http://ponpon-village.net/ajax/xmlhttp.htm

非同期通信のサンプルコード

  var req;
  if( window.XMLHttpRequest){
    req = new XMLHttpRequest();
  }else if(window.ActiveXObject){
    try {
      req = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (e) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  if (req) {
    req.open('GET', 'http://www.example.com/contents.txt');
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        document.write(req.responseText);
      }
    }
    req.send(null);
  }

req.statusはHTTPレスポンスコードで200はOK、404はよく見るNot Foundです。

注意点

とりあえず自分が気になった点を書きました。
肝心なところはonreadystatechangeでのコールバックだと思います。

次回

XMLHttpRequestは同一ドメイン内に制限されていますね。
別のドメインとのやり取りはどう行うのかを次のテーマにします。
なんかJSONPとかクロスドメインなどのキーワードがよく見えますが、
その辺をはっきりしようと思います。

参考サイト:

XMLHttpRequest - Wikipedia
XMLHttpRequest - MDC
Ajaxはじめの一歩 XMLHttpRequest - [JavaScript]All About

Share on Twitter Share the post
Qihuan Piao

朴 起煥

東京で働いている「外人歴」9年のソフトウェア「ライター」。いつの間にか納豆が食えるようになり、これで日本に慣れきったと思いきやまだまだ驚きが続いてる。読んだり書いたりするのが好きで、自身の経験や本から得た「何か」をここに書き出してる。最近古本屋にハマってる。

他にも英語中国語で書いてます、よろしければチェックしてみてください。