[JavaScript]XMLHttpRequestを使って非同期通信

jQuery使えば済む話でもあるんですが、jQueryが使えないとか、わざわざjQuery使う必要は無いとか、jQuery使わない方が良いとか、そんな場合を想定して非同期通信のお勉強です。

自作する時はエラー処理とか気を付けたいですね。

XMLHttpRequest

JSで外部ファイルを読み込む時は、XMLHttpRequestを利用します。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function()
{
 if(xhr.readyState == 4)
 {
  if(xhr.status == 0)
  {
   console.log('通信エラー');
  }
  else if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)
  {
   console.log('通信成功');
  }
  else
  {
   console.log('意図せぬ応答 : ' + xhr.status);
  }
 }
};

xhr.open('GET','test.xml',true);
xhr.send(null);

やってて引っ掛かったポイント

いくつかてこずった個所がありました。覚えておけば問題ないはずです。

  • ローカルファイルとして実行するとテストできないので、ローカルサーバーを使ってテストする。
  • sendメソッドを実行しないと通信してくれない。(openのみ行なって「?」がしばらく続きました)

jQuery使うのと手前で作るのとどっちが良いんですかね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>