XMLHttpRequest入門【メソッド等の確認とシンプルなコード】

Share :

前回のエントリーXMLHttpRequestの門を軽く叩いてみる::[7korobi8oki.com]にて、XMLHttpRequest家の門に軽くノック、というか遠くから石を投げて、様子を伺ってみたりしました。

前回のサンプルソースは簡単だったので付け焼き刃で何とかなりましたが、こりゃさらなる理解にはまず地固めが必要だと実感。

そこで、前回のエントリーで参考サイトとして上げましたHawk’s W3 Laboratory : XML さんのページに参考リンクとして貼られていたサイトを周りつつ、気がついたところなどを抜き出していこうと思います。

■XMLHTTPRequestとは何ぞや

XMLHTTPRequestとは何ぞやと言うところからですが、javascript:xmlhttprequest [JPSPAN]によりますと、こういったことが出来るもののようです。

XMLHttpRequest is a native JavaScript object allowing further HTTP requests to be made from a page which has already loaded.

「すでに読み込んだページからさらにHTTPRequestを発することが出来る、ネイティブのJavaScriptのオブジェクトとのことです。完全にページをリロードすること無しに、一部を変更したり出来るという。

JavaScriptで、ローカルでDOMを通じてフォームの中身をいじったり、背景をリロード無しで変えられますが、これがサーバ間での処理も同様に出来るようになったというイメージでしょうか。どのあたりでXMLが絡んでくるんだろう、これだけだとHTTPクライアントでは、と思いましたが、Hawk’s W3 Laboratoryさんによりますと、

極端な言い方をすればXMLに関連するのは responseXML プロパティを参照する時だけであり、それ以外の部分では”単なる”HTTPクライアント・コンポーネントと考えて差し支えありません

とのことです。ひとまず、XMLとしてパースできるHTTPクライアントとしてとららえればいいみたいです。
ちなみに、もともとはこの仕組み、Internet Explorer のActiveX関係のコンポーネントで、後にそのAPIをMozillaなど他のブラウザががサポートしたという経緯のようです。

The original implementation came from Microsoft as an ActiveX object for IE. Mozilla followed suit and implemented XMLHttpRequest with an (almost) identical API. Konqueror (and Safari v1.2, based also on KHTML) also has an XMLHttpRequest implementation and support should be coming in Opera from v7.6x+.

こんな感じでXMLHTTPRequestオブジェクトのあらましが何となくつかめた所で、次の項。続いてチュートリアルのあるサイトへのリンク集があります。

しかし、私はこの辺に全く疎いので、その前にHTTPRequestそのものについてインターネット興隆の立役者「HTTP~前編」にて確認しました。よろしければ。

■どうやってHTTPリクエストをするのか

これは、XMLHTTPオブジェクトのメソッドを使用して行います。先ほどのUsing the XML HTTP Request objectにあるサンプルコードは以下のようになっています。

xmlhttp.open(“GET”, “test.txt”,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)

openメソッドを用いて、test.txtに対してGETメソッドを送っています。そして、それをトリガーとして(onreadystatechangeイベントで)関数を呼び出しています。このあたりは前回のエントリーと全く同じですね。HTTPリクエストを送った際に発生するイベントのハンドラがonreadystatechangeでした。そして、”readyState == 4″は、それに対するレスポンスが完全にダウンロードされたら、という意味でした。

さて、頻出するメソッドだけ眺めているのも不透明で気持ちが悪いので、DevGuru XML DOM HttpRequest Objectの、メソッド一覧を見てみました。どんなのがあるのやら。簡単に訳してみます。

1)HttpRequest.abort( )
現在送っているHTTPリクエストを中断する。オブジェクトは”UNINITIALIZED”という状態を返す。続いてopenメソッドが呼ばれないといけない。

使用例:HttpRequest.abort( )

2)getAllResponseHeaders
このメソッドは、指定したHTTPヘッダを文字列として取ってくる。nameとvalueの組み合わせは、CR/LFで分けられている。

使用例;HttpRequest.getAllResponseHeaders( )

3)open
Microsoft.XMLHTTPリクエストを初期化して使えるようにする。同時にURLや認証の情報を付加する。

使用例;HttpRequest.open(Method[GET or POST], URL, Async, User, Password)

4)send
サーバに実際にリクエストを送信する

使用例:HttpRequest.send(varHeader)

5)setRequestHeader
リクエストヘッダーを加える。コロンの無いテキストであるべし。すでにあるヘッダーを指定すると上書きされる。

使用例;HttpRequest.setRequestHeader(bstrHeader, bstrValue)

そして、プロパティー一覧。大体が読み出しオンリーです。レスポンスの内容などが入っていたりします。
どのように取り出すかどうかで使うプロパティーが違います。普通に文字列として取り出したいときはHttpRequest.responseTextですし、XMLとしてパースされた状態で欲しい場合はHttpRequest.responseXMLです。詳しくは原文まで。

同ページの、サンプルコードは、ASPにデータをPOSTしてレスポンスを返す関数。

function PostOrder (xmldoc)
{
var xmlhttp = new ActiveXObject (“Microsoft.XMLHTTP”);
xmlhttp.Open(“POST”, “http://guruserver/processorder.asp”, false);
xmlhttp.Send(xmldoc);
return xmlhttp.responseXML;
}

です。new ActiveXObjectでオブジェクトを生成して、openメソッドで http://guruserver/processorder.aspに対するPOSTリクエストを同期状態で送る準備をし、その旨をサーバに伝えます。そして、sendメソッドでデータを送信。非同期では無いのでonreadystatechangeを使う必要は無く、返ってきたレスポンスを、responseXMLから取得して返り値に。

非同期、同期は、Openの三つ目のブーリアン値で指定します。trueにすると非同期になります。非同期の場合、Sendメソッドが行われた瞬間すぐにリクエストが発され、レスポンスが完全に帰ってくるこない関わらず、スクリプトがどんどん実行されます。falseを指定すると同期になり、レスポンスが完全に帰ってくるまで待機します。

同期だと、サーバが落ちていた時に延々と待つことになってしまうので、非同期にしてonreadystatechangeでレスポンス完了を検地した方が、色々と柔軟に対応できそうです。
 #この辺りは詳しくはDynamic HTML and XML: The XMLHttpRequest Objectがオススメです。
 #iTunesのRSSをリアルタイムに表示するサンプルもにありますね。

こんな感じでレスポンスを取得します。
また、同様のサンプルがいくつかUsing the XML HTTP Request objectにありますので、続いてそちらも。

■サンプルをいくつか

指定したURLのレスポンスヘッダーを表示するものです。

xmlhttp.open(“HEAD”, “/faq/index.html”,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.getAllResponseHeaders())
}
}
xmlhttp.send(null)

/faq/index.htmlに対して、非同期でHEADリクエストをします。
そして、リクエストが行われたらそれをトリガーとして、レスポンスの読み込みが完了次第getAllResponseHeaders()でヘッダーを全て取得し、アラートとして表示します。最後にnullを送るのはお作法でしょうか?(‘A`)

続いて、指定したURLが存在するかどうかを調べるものがあります。あんまり転載するのも申し訳ないので要点だけ抜き出しますと、返ってきたステータスコードがいくつかで判断します。コードでは”xmlhttp.status==200″だったら、URLは生きているということに。404だったら存在しないということになります。

ひとまず、XMLHTTPRequestの基礎についてでした。基本的なデータの取得などはこれでも何とかなりそうですが、もちっと包括的に理解したいです。また掘り下げたいと思います。


Share :
お悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム