□技術メモ - XMLHttpRequestについて

※管理人の個人的な技術メモです。このページの内容を実行した結果について
管理人はいかなる責任も負いかねますのでご自身の責任でお試しください。

-----------------------------------------------------------

○XmlHttpRequestについて

・Webページにおいて、ユーザの操作中などにサーバとの非同期通信を行うのが
  Ajax(Asynchronous JavaScript + XML の略)。
  この時の通信に使用するのがXMLHttpRequestオブジェクト。
  注意点として、ブラウザによってXMLHttpRequestの宣言方法など、
  細部の動作の違いがあるのでこれらを確認する必要がある。

-----------------------------------------------------------

○XmlHttpRequestオブジェクトの宣言（2015/11/08記）

・XmlHttpRequestはブラウザによって宣言方法に違いがある。

・Chrome,FireFox,Opera等の場合
var xhr = new XMLHttpRequest();

・IEの場合
  IEの場合はActiveXObjectを宣言する。オブジェクトには複数のバージョンがあり、その中には使用すべきでないものもあるらしい。

//使用すべきオブジェクト
var xhr = new ActiveXObject( 'Msxml2.XMLHTTP.3.0' );    //広く使用されている
var xhr = new ActiveXObject( 'Msxml2.XMLHTTP.6.0' );    //最新版

//使用すべきではないオブジェクト
//Microsoft接頭辞は古い記述なので使用すべきではない。Msxml2接頭辞を使用すべき。
//また 3.0, 6.0 以外のバージョンはbugfixされていない可能性がある
//new ActiveXObject( 'Microsoft.XMLHTTP' );
//new ActiveXObject( 'Msxml.XMLHTTP' );
//new ActiveXObject( 'Msxml2.XMLHTTP' );    //バージョンを省略すると3.0として扱われる。

以下はオブジェクト生成のサンプル
--------
function createXmlHttpRequest() {
 if(window.ActiveXObject){
  try{return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
  try{return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}
  try{return new ActiveXObject("Microsoft.XMLHTTP")  }catch(e){}
 }
 else if(window.XMLHttpRequest){
  try{return new XMLHttpRequest() }catch(e){}
 }
 return false;    //生成に失敗
}
--------

-----------------------------------------------------------

○キャッシュについて

・キャッシュには、サーバ側のキャッシュと、クライアント側のキャッシュがある。

・サーバ側のキャッシュは、Smarty, function_cache 等がある。

・クライアント側のキャッシュには、ブラウザキャッシュ, Proxyサーバ 等がある。

・クライアントからのリクエストに対してキャッシュを回避する方法は以下の通り。
  setRequestHeaderはopen以降に設定する。
  IEの場合は If-Modified-Since を指定する必要がある。コンテンツが指定の日時より新しければ最新データが返信される。

キャッシュ回避のサンプル
--------
var xhr=new createXmlHttpRequest();
if (!xhr) {alert("XmlHttpRequestの生成に失敗しました。"); return;}
xhr.onreadystatechange = （readyStateプロパティの変化イベント時に呼ばれる関数を指定する）
xhr.open('POST', url, true);    //true:非同期実行
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');    //記述が必要な場合がある
xhr.send(リクエストパラメータ);    //送信を実行
--------

-----------------------------------------------------------

○XMLHttpRequestのメソッド

・以下のメソッドがある。
  abort, getAllResponseHeaders, getResponseHeader, open, send, setRequestHeader

・重要なのは、open, send。書式は以下の通り。

  open(method, URL, asyncFlag, userName, password);    //asyncFlagは非同期実行フラグ。省略するとtrue。第３引数以降は省略可能。
  send(para);    //paraはパラメータ。GETの場合はnullを設定する。

・GETメソッドでパラメータに日本語を使用する場合はencodeURIComponentによる変換が必要。

   var name1=encodeURIComponent("列車1");
   var name2=encodeURIComponent("列車2");
   var val1=encodeURIComponent("高崎線");
   var val2=encodeURIComponent("宇都宮線");
   var sPara = "?" + name1 + "=" + val1 + "&" + name2 + "=" + val2;

-----------------------------------------------------------

○XMLHttpRequestのプロパティ

・以下のプロパティがある。
  onreadystatechange  :readyStateが変化したときに呼ぶ関数を指定する
  readyState          :レスポンスが帰ってきているのかどうかの状態
  status              :サーバからの応答コード
  statusText          :statusに添付されているメッセージ
  responseText        :返信内容（text）
  responseXML         :返信内容（DOMをXML形式で返す）

-----------------------------------------------------------

○XMLHttpRequestのreadyState

0 = uninitialized  :初期化されていない
1 = loading        :sendメソッドでデータが送られていない
2 = loaded         :sendメソッドを実行したが応答がまだ
3 = interactive    :応答受信中
4 = complete       :全てのデータを受信済み

-----------------------------------------------------------

○XMLHttpRequestのstatus

200 = OK
401 = Unauthorized
403 = Forbidden
404 = Not Found
500 = Internal Server Error

・受信完了の確認は、XMLHttpRequest.readyState=4の時に、XMLHttpRequest.status=200ならよい。
  このとき、responseTextもしくはresponseXMLを参照することができる。

-----------------------------------------------------------

○onreadystatechangeの指定について

・以下のいずれかの形式で定義する
--------
xhr.onreadystatechange = fnction{
    //処理
};
--------
function fncCheckState(){
    //処理
}
xhr.onreadystatechange = fncCheckState;
--------