ココを理解すれば近道な「Ajaxフレームワーク」Web 2.0で変わるWebプログラミングの常識(2/5 ページ)

» 2006年08月30日 11時00分 公開
[大澤文孝,ITmedia]

通信の成功・失敗処理

 Ajax.Requestオブジェクトは、XMLHttpRequestオブジェクトによるステータスが変化したり通信が完了したりすると、接続オプションで指定しておいた関数が適時呼び出されるというものだ。

 呼び出される関数は、次の3種類に分けることができる。

1. ステータスの変化の通知

 XMLHttpRequestオブジェクトのステータスが変化した場合には、幾つかの関数を呼び出すことができる。

 この際に呼び出される関数は、接続オプションの「onLoading」「onLoaded」「onInterractive」「onComplete」の4種類のプロパティで指定できる。しかし、どのWebブラウザでも使えて信頼できるものは、XMLHttpRequestオブジェクトによる通信が完了したことを告げる「onCompleteプロパティ」だけだ。

 リスト6では、このステータスの変化による通知を使っていないため、詳しい説明は省略する。

 ここでいう「ステータス」とは、XMLHttpRequestオブジェクトのreadyStateプロパティの変化を示す。onCompleteプロパティで指定した関数は、readyStateプロパティの値が「4」(受信完了)の時に呼び出されるものだ。

2. 成功や失敗の通知

 XMLHttpRequestオブジェクトの呼び出しが完了すると、その成否が調査され、成功した時にはonSuccessプロパティで指定した関数が、失敗した場合にはonFailureプロパティで指定した関数がそれぞれ呼び出される。

 呼び出される関数の書式は、


function 関数名(xmlhttp, json)
{
}

のように、2つの引数をともなったものになる。

 第1引数(xmlhttp)は、通信に使われているXmlHttpRequestオブジェクト、第2引数(json)はレスポンスに「X-JSON」というヘッダが含まれている場合に、それが展開された際のオブジェクトだ(第2引数の詳細については後述する)。

 リスト6では、成功した時に、次に示すAjaxSuccess関数を呼び出すようにしてある。


function AjaxSuccess(xmlhttp, json)
{
  // 呼び出しが成功した時の処理
  var xmlobj = xmlhttp.responseXML;
  // 和を取得
  var addobj = xmlobj.getElementsByTagName("add");
  var addvalue = addobj[0].firstChild.nodeValue;
  // 差を取得
  var diffobj = xmlobj.getElementsByTagName("diff");
  var diffvalue = diffobj[0].firstChild.nodeValue;
  // <span>に設定
  $('addvalue').innerText = addvalue;
  $('diffvalue').innerText = diffvalue;
}

 このコードは、第2回目に示したものとほぼ同じく、受け取ったXML形式のデータをパースして、それをspan要素へと挿入するためのものだ。

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ