読者です 読者をやめる 読者になる 読者になる

おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

ajax事始め

javascript

jQuery等のライブラリを使わずにajaxをするための方法についてメモ。

方法

  1. XMLHttpRequestオブジェクトを使う
  2. scriptタグを作る
  3. サーバサイドと連携する

1は、同一出身ポリシーがあるので他ドメインのデータを取得したい場合は2か3の手段をとる必要があります。JavaScriptだけでajaxをする場合は、scriptタグを使うのが一般的っぽいです(jQueryもそうしてた)が、今回は1のXMLHttpRequestオブジェクトを使ったajaxについてまとめています。

XMLHttpRequest

XMLHttpRequestオブジェクトを作る
new XMLHttpRequest()

IE6にはXMLHTTPRequestがないので、ActiveXObjectを使います。引数は、インストールされたライブラリによって変わるようです。

new ActiveXObject("Msxml2.XMLHTTP")
new ActiveXObject("Microsoft.XMLHTTP")
送信前の準備

openメソッドを呼び出す。

request.open(method, url, synchronized?, user, pass)
method
"GET", "POST"などを指定
url
送信先のURLを指定
synchronized?
同期的に処理したいならfalse、非同期ならtrue。省略可能だけどブラウザによってデフォルト値が違うことがあるらしいので省略しない方がよさげ http://shigekun.blog.so-net.ne.jp/2008-02-23
user
認証時のユーザ名。省略可能。
pass
認証時のパスワード。省略可能。
リクエストヘッダを設定する

openした後に、下記のような感じでリクエストヘッダを設定します。

request.setRequestHeader("User-Agent", "XMLHttpRequest");
request.setRequestHeader("Accept-Language", "en");
request.setRequestHeader("If-Modified-Since", lastRequestTime.toString());
送信

send()関数で送信。引数は、GETの時はnullを指定します。。POSTの時はフォームデータを渡してあげます。

request.send(null); 
結果の確認
if(request.status == 200) alert(request.responseText);
非同期時の状態チェック

非同期時はreadyStateプロパティの値を見てデータを取得したかどうかをチェックします。

readyStateの値 意味
0 open()呼び出し前
1 open()呼び出し後、send()呼び出し前
2 send()呼び出し後、サーバレスポンス前
3 サーバからデータ受信中
4 サーバからデータ受信完了

3の扱いがブラウザの種類ごとで違うらしいです。基本的に4だけ使うのが基本なよう。

readyStateプロパティの値が変化すると、onreadystatechangeメソッドが呼び出されます。なのでこんな感じで書くといいみたい。

request.onreadystatechange = function() {
  if (request.readyState == 4) {
    if (request.status == 200)
      alert(request.responseText);
    }
  }
}