Ajax と XMLHttpRequest について

このサイト内ではないのですが、Ajax を利用したページを作成してみたので、復習として記述してみました。

Ajax について

Ajax(Asynchronous JavaScript + XML)とは、ブラウザから JavaScript を用いてXML等のデータを非同期に受け取る技術の総称です。

非同期であることからページ全体を書き換えずに、受け取ったデータをもとにページの一部のみを更新することができます。

今回は、非同期通信機能を持つ XMLHttpRequest を利用した、Ajax の従来の方法を記述しておきます。(やり方は知りませんが、他の方法もあるそうです。)

XMLHttpRequest

XMLHttpRequest オブジェクト

メソッド

open
リクエストの初期化。
req.open(HTTPメソッド, URL [, async(true|false), ユーザー名, パスワード]);
HTTPメソッドには、GET|POSTのいずれかを指定し、リクエスト先URLは、クロスドメインの制約があるため相対パスでの指定が無難です。

XMLHttpRequest Level2 に対応しているブラウザの場合は別ですが。

setRequestHeader
リクエストヘッダの設定。
あらかじめ open で初期化しておく必要があります。
req.setRequestHeader(ヘッダー名, 値);
send
リクエストの送信。
引数は省略可能ですが、open でHTTPメソッドをPOSTに指定している場合は、その内容を引数とする必要があります。
abort
送信したリクエストの中断。
getAllResponseHeaders
すべてのレスポンスヘッダを文字列で返す。
getResponseHeader
指定したレスポンスヘッダを文字列で返す。
req.getResponseHeader(ヘッダー名);

プロパティ

onreadystatechange
通信状態変更用イベントハンドラ。
readyState
通信状態。( 0 - 4 の値で表す。)
  • 0 : UNSET (open前)
  • 1 : OPENED (送信前)
  • 2 : HEADERS_RECEIVED (送信後 - レスポンスヘッダ受信)
  • 3 : LOADING (読込開始 - 解析終了まで)
  • 4 : DONE (完了)

余談ですが、readystatechange イベント発生のたびに alert で readyState の値を表示してみたのですが、Firefox の場合、'3' の状態が三回出力されます。

responseText
レスポンスの文字列形式。
responseXML
レスポンスの document オブジェクト形式。
status
通信後のHTTPステータスコード。(200,404等)

readyState が '2' の段階でステータスコードが返ってきます。

statusText
HTTPステータスコード + ステータスメッセージ。

XMLHttpRequest による通信方法

本当はこのページで簡単な Ajax のサンプルでも置きたいのですが、あいにくこのサイトはホームページスペースに載せているため、通信してもサーバー側に応答してくれるプログラムを置くことができません。

ということで、オブジェクトの作成から通信を行いレスポンスを受け取るまでの部分を、一つの関数 (server_connect) としてみたので、その部分だけ記載しておきます。(/* */で囲まれた部分は変更してください。)

なお、POSTで送信したい場合は「POSTメソッドでのリクエスト」、IE6に対応させたい場合は「非同期通信を行うオブジェクトの作成」の部分の通りに変更してみて下さい。

下記の関数はあくまで通信部分だけですので、テストする場合はリクエスト内容を作成するフォームと関数を呼び出すボタン、サーバー側ではリクエスト内容からレスポンスを出力するプログラムが必要となります。

  • function server_connect(){
    • var req = new XMLHttpRequest(), param=/* リクエスト内容(URLパラメータ) */;
    • add_listener(req,'readystatechange',function(){
      • if(req.readyState==4){
        • if(req.status==200){
          • /* レスポンスをページに加えるための処理 */
        • }
      • }
    • });
    • req.open('GET',/* リクエスト先URL */+ '?' + param);
    • req.send();
  • }

関連ページ: JavaScript でイベントリスナーを追加・削除する方法

この関数で行われる事は以下の通りです。

  1. 「レスポンスをページに加えるための処理」を含む無名関数を、作成したオブジェクトのイベントリスナーとして登録。
  2. リクエストを作成し、サーバーへ送信。
  3. サーバーからレスポンスを受信し、readyState が '4' でステータスが正常な場合に処理が行われる。

POSTメソッドでのリクエスト

GETリクエストではリクエスト内容をURLパラメータ化し、リクエスト先URLの後にクエリ文字('?')でつないで送信します。

対してPOSTリクエストの場合は、send メソッドの引数としてリクエスト内容をサーバーへ送信するのですが、その前に setRequestHeader メソッドで、'content-type'に'application/x-www-form-urlencoded'による符号化が必要です。

POSTリクエスト
  • req.open('POST','リクエスト先URL');
  • req.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
  • req.send('パラメータ');

IE6への対応

ページ内から非同期に通信を行うための、XMLHttpRequest オブジェクトを作成します。

var req = new XMLHttpRequest();

本来なら、上記のように変数に生成したインスタンスを格納するだけでよいのですが、XMLHttpRequest に対応していないIE6も対象にする場合は、ActiveXObject を格納するように判別してください。

  • function createXMLHttpRequest(){
    • if(window.XMLHttpRequest){
      • return new XMLHttpRequest();
    • }else if(ActiveXObject){
      • for(var i=0, a=["6","3"]; i<a.length; i++){
        • try{
          • return new ActiveXObject("Msxml2.XMLHTTP." + a[i] + ".0");
        • }catch(e){}
      • }
    • }else{
      • return false;
    • }
  • }
  • var req = createXMLHttpRequest();

この関数は Wikipedia : XMLHttpRequest のページに記載されているコードを参考に、IE5.5用バージョン('MSXML2.XMLHTTP')を省いたものです。

スポンサードリンク

inserted by FC2 system