ajax事始め

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); 

結果の確認

• XMLHttprequestオブジェクトのstatusプロパティに、ステータスコードが格納されます。
• XMLHttprequestオブジェクトのresponseTextプロパティに、サーバのレスポンスが文字列形式で格納されます。

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);
    }
  }
}