Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

XMLHttpRequestは、スクリプト言語からサーバとのHTTP通信を行うための組み込みオブジェクト（API）。既に読み込んだページ上からHTTPリクエストを発することができるため、ページ遷移なしでサーバとのデータ送受信が可能になる。Ajaxの基幹技術。

実装にあたって、おおかまかな手順は以下。
文字コードはUTF-8にしておこう。

1. XMLHttpRequestオブジェクトを作成
2. XMLHttpRequestオブジェクトからデータを取得
3. 取得したデータを編集、利用

ただしセキュリティ上の問題から、リクエストの送信は同一ドメイン内に制限されている。そのため、ドメインを越えてデータを交換するには以下のような方法をとる必要がある。

1. Perlなど、サーバーサイドでデータを取得
2. Flashのクロスドメイン通信の機能を経由させる
3. ScriptタグからJavascriptプログラムとして取得（JSONPなど）

memo: もとはマイクロソフトがIE-5においてActiveXオブジェクトとして実装したのが始まりらしい。

XMLHttpRequestオブジェクトを作成する

1. createHttpRequest = function(){
2. var req = window.XMLHttpRequest ? new XMLHttpRequest() :
3. (function(){
4. try { return new ActiveXObject("Msxml2.XMLHTTP"); }
5. catch(e) {
6. try { return new ActiveXObject("Microsoft.XMLHTTP"); }
7. catch(e) { return null; }
8. }
9. })();
10.  
11. return req;
12. }

XMLHttpRequestが使えない場合、ActiveXで代用することでIEに対応。

送信する

POSTメソッドを使って送信する場合、必ずContent-Typeヘッダを設定しなければならない。受信したヘッダは、受信完了後に getResponseHeader メソッドを使って取得できる

GETメソッドの場合は不要。Cookieヘッダを付加させてCookie送信をすることもできる。

1. req.setRequestHeader(
2. "Content-Type",
3. "application/x-www-form-urlencoded;charset=UTF-8"
4. );

さらにPOSTメソッドの場合には、送信するパラメータを作成する。

1. var parameter =
2. "value1=" + encodeURIComponent(document.getElementById('value1').value)
3. + "&" +
4. "value2=" + encodeURIComponent(document.getElementById('value2').value);

準備ができたので、送信する。

1. req.send(parameter);
2.  
3. req.open('GET', 'http://example.jp/calc.php?' + parameter, true);
4. req.send("");

1行目がPOSTの場合。2～3行目が、GETの場合。

注意点として、GETメソッドの場合には標準で「キャッシュが働く」。つまりsendメソッドを呼び出しても実際にはサーバへ要求が送られず、ブラウザ内のキャッシュデータが取得されてしまい、最新の情報が取得できない可能性がある。対策としては、以下のような方法が考えられる。

• キャッシュを無効にするヘッダを付ける
  → 「Pragma:no-cache」や「Cache-Control:no-cache」など
• URLが前回と同じにならないようにする
  → 「/?ver=20070411」など

受信する

1. req.onreadystatechange = function;
2.  
3. if (req.readyState == 4 && req.status == 200) {
4. req.responseText // テキスト形式で取得する
5. req.responseXML // XML DOM形式で取得する
6. }

1～3行目のプロパティに関しては、以下。

onreadystatechange	XMLHttpRequestオブジェクトの状態（readystate）が変化すると呼び出されるイベントハンドラ
readystate	通信の状態を返す。 0 : 開始前の初期状態 1 : 読み込み中 2 : 読み込み完了 3 : 制御可能 4 : 完了
status	HTTPステータスコードを取得する。つまり、ファイルを見つけると200を返す。サーバーを介した通信時のみ有効。

動作サンプル

RSSファイルから最新記事一覧を引っ張ってくるサンプル。

sample_1 | sample_2

（ソースを表示）

1. createHttpRequest = function(){
2. var req = window.XMLHttpRequest ? new XMLHttpRequest() :
3. (function(){
4. try { return new ActiveXObject("Msxml2.XMLHTTP"); }
5. catch(e) {
6. try { return new ActiveXObject("Microsoft.XMLHTTP"); }
7. catch(e) { return null; }
8. }
9. })();
10.  
11. return req;
12. }
13.  
14. getData = function(sourceURL){
15. var req = createHttpRequest();
16.  
17. req.onreadystatechange = function(){
18. if (req.readyState == 4) {
19. prepareData(req);
20. }
21. }
22. req.open('GET', sourceURL, true);
23. req.send(null);
24. }
25.  
26. prepareData = function(req){
27. var xmlobj = req.responseXML;
28. var obj = document.getElementById('test');
29.  
30. var title = xmlobj.getElementsByTagName('title');
31. var link = xmlobj.getElementsByTagName('link');
32. var list = '';
33.  
34. for(i=1;i<title.length;i++){
35. list += '<li><a href="' + link[i].firstChild.nodeValue + '">' + title[i].firstChild.nodeValue + '</a></li>';
36. }
37. var blogtitle = '<h3><a href="' + link[0] + '">' + title[0].firstChild.nodeValue + '</a></h3>';
38. list = '<ul>' + list + '</ul>'
39.  
40. obj.innerHTML = blogtitle + list;
41. }