Open Source Web Development Tutorials - Dev Shed

これで安心！Ajaxのエラーへの対処方法
（2009/03/12公開）

Ajaxのエラー処理方法

　Ajaxリクエストは、JavaScriptのスレッドと同じように動作します。リクエストの実行中、コードのフローに含まれるJavaScriptコードの実行は継続されます。競合の可能性と、その結果として発生するエラーを解決するにはどうすればよいのでしょうか？WebページにAjax機能を持たせ、期待するようにテキストがダウンロードされない場合、ブラウザのリロード（更新）ボタンをクリックして問題を解決できるでしょうか？そうだとしたら、どんな条件で動作するのでしょうか？また、そうでないとしたら、動作しない理由は何でしょうか？

　サーバーに問題があれば、エラーメッセージが送信されるでしょうか？そうだとしたら、そのエラーメッセージは、予期しているテキストの代わりになるのか、あるいは何かのAjaxオブジェクトメソッドで扱われるのでしょうか？そうでないとしたら、送信されない理由は何でしょうか？サーバーが停止している場合、TCP/IPプロトコルによってエラーメッセージが送信されるでしょうか？そうだとしたら、どのように処理するのでしょうか？そうでないとしたら、理由は何でしょうか？

　この記事では、こうした疑問に回答します。

エラーチェックのないAjax関数

　ここで示すのは、エラーチェック用のコードを持たないAjaxリクエストの手順です。

//variable to finally hold the Ajax downloaded text.
pageDoc = "";

var xmlHttp;

try
{
  // Firefox, Opera 8.0+, Safari
  xmlHttp = new XMLHttpRequest();
}
  catch (e)
{
  // Internet Explorer
try
{
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
  catch (e)
{
  try
{
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
  catch (e)
  {
  alert("Your browser does not support Ajax!");
  }
}
}

  xmlHttp.onreadystatechange=function()
{
  if (xmlHttp.readyState == 4)
{
  pageDoc = xmlHttp.responseText;
}
}

  xmlHttp.open("GET","http://localhost/cgi-bin/sendPge2Str.pl",true);
  xmlHttp.send(null);

　最初のステートメントは、ダウンロードされたテキストを保持する変数を宣言します。JavaScriptは、Ajaxリクエストを作成するためにAjaxオブジェクトを必要とします。次のステートメントは、「統合された」try-catchブロックです。このステートメントが長いのは、Ajaxオブジェクトのインスタンスを作成する方法が、ブラウザの種類やInternet Explorerのバージョンによって違うためです。ここでは、Ajaxオブジェクトの名前をxmlHttpとしています。

　その次のステートメントは、Ajaxオブジェクトのメソッドを定義します。このメソッドは、Ajaxオブジェクトの状態が変化するたびに呼び出されます。状態が最後に変化するのは、readyStateが4のときです。readyStateが4のとき、定義されたAjaxオブジェクトのメソッドが実行されます。この時点で、テキストは完全にダウンロードされており、ブラウザで使用できます。

　次のステートメント（xmlHttp.open()）は、リクエストを行うための接続を開きます。その次のステートメントはリクエストを発行します。すべてのテキストがダウンロードされたとき、readyStateプロパティが4になり、定義されたオブジェクトが実行されます。

リロードボタンのクリック

　これは、上のようなAjax機能の場合も含めて、すべてのWebページの規則です。Webページが表示されるときや、表示された後、すべてのHTML要素（リソース）がダウンロードされていないことがわかれば、ブラウザのリロードボタンを押します。この操作により、すべてのHTML要素（リソース）がサーバーから再度ダウンロードされます。サーバーまたは伝送ラインに障害（一時的なエラー）があった場合、この方法で問題を解決できます。

注：この方法は、正しくダウンロードされなかったAjaxコンテンツがブラウザにキャッシュされてしまうと、うまくいきません。多くのブラウザは、Ajaxでダウンロードされたテキスト（コンテンツ）をデフォルトでキャッシュします。このため、リロードボタンをクリックすると、ダウンロードされたAjaxテキストがブラウザのキャッシュから取り出されます。ダウンロードされたAjaxコンテンツがキャッシュされないようにすることは可能です。これには、サーバーのスクリプトを使います。これは、Ajaxテキスト（コンテンツ）を送信するサーバー側のスクリプトです。この操作を行うために適しているのは、コンピュータースクリプト言語のPHPです。ただし、ここではその方法の詳細には触れません。

　上に述べたように、ブラウザのリロードボタンをクリックして、Ajaxのダウンロードエラーを解決する方法は、問題がサーバーまたは伝送ラインに関する一時的な障害である場合にのみ有効です。

1 2 3 4 次のページ