XML->DOM生成->HTML出力非同期通信(XMLHttpRequestの使い方)
- onreadystatechange〔[イベント] イベントハンドラ実行(リクエスト処理状況変化時)〕
- XMLHttpRequest〔[コンストラクタ] XXMLHTTPオブジェクト生成(IE7およびIE以外のブラウザ)〕
- readyState〔[プロパティ] リクエストの処理状態を取得〕
- responseXML/responseText〔[プロパティ] リクエストの返り値をテキスト形式・XML形式で取得〕
- abort()〔[メソッド] リクエストをキャンセルする〕
- onload〔[イベント] イベントハンドラ実行(レスポンスデータ読込完了時)〕
- send()〔[メソッド] リクエスト送信〕
- status/statusText〔[プロパティ] HTTPステータスコード/テキスト〕
- getResponseHeader()〔[メソッド]特定のレスポンスヘッダを取得〕
- setRequestHeader()〔[メソッド] リクエストヘッダを設定〕
- open()〔[メソッド] リクエスト初期化・設定〕
- XMLHTTP〔[クラス] XMLHTTPオブジェクト生成(IE4-IE6用)〕
- getAllResponseHeaders()〔[メソッド] 全のレスポンスヘッダ取得〕
onreadystatechange
[イベント] イベントハンドラ実行(リクエスト処理状況変化時)
unknown
オブジェクト名.onreadystatechange = 関数名
function 関数名(オブジェクト名) { 処理 }
オブジェクト名.onreadystatechange = function() { 関数名(オブジェクト名); }
function 関数名(obj) { 処理 }
onreadystatechangeイベントは、readyStateプロパティ(リクエストの処理状態)が変化した時に発生し、イベントハンドラを実行します。 IE、Firefox、Safari、Operaなど多くのブラウザに対応しています。
openメソッドの第3引数にTRUEを指定し、非同期通信でサーバーにリクエストを送っている場合は、 sendメソッドでリクエストを送信したサーバーからのレスポンスを待って完全にデータの受信が完了してからresponseXML/responseTetxプロパティをコールする必要があります。 サーバーからのレスポンスを待たずにsendメソッドをコールしてしまうと正しくレスポンスデータが受け取れません!
そこで、このonreadystatechangeイベントをイベントハンドラとして使用し、 readyStateプロパティの戻り値が4(データ受信完了)かつstatusプロパティの戻り値が200(リクエスト成功)になってから、sendメソッドをコールするようにします。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ /* ▼いずれかを使用 */ /**************************** 例1:匿名関数 */ // xmlhttp.onreadystatechange=function(){ // if(xmlhttp.readyState==4 && xmlhttp.status==200){ // /* XMLデータ取得 */ // document.getElementById("resXmlHttpRequestObj").innerHTML=xmlhttp.responseXML; // } // } /**************************** 例2:関数を代入 */ xmlhttp.onreadystatechange=func; function func(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* XMLデータ取得 */ document.getElementById("resXmlHttpRequestObj").innerHTML=xmlhttp.responseXML; } } /* ▲いずれかを使用 */ /* HTTPリクエスト初期化+HTTPメソッドおよびリクエスト先URLの設定 */ xmlhttp.open("GET",xmlURL,true); /* リクエスト送信 */ xmlhttp.send(null); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="resXmlHttpRequestObj"></div>
XMLHttpRequest
[コンストラクタ] XXMLHTTPオブジェクト生成(IE7およびIE以外のブラウザ)
unknown
XMLHttpRequestオブジェクトを生成します。 IE7およびIE以外のブラウザで動作します(IE4~IE6の場合はXMLHTTPを使用)。
xmlhttp=new XMLHttpRequest();
のように、new演算子でXMLHttpRequestオブジェクトを生成し、変数(例ではxmlhttp)に代入しておくと、
変数をXMLHttpRequestオブジェクトとして扱えます。
<script type="text/javascript"> var xmlhttp=null; document.write("typeof ActiveXObject="+(typeof ActiveXObject)+"<br>typeof XMLHttpRequest="+(typeof XMLHttpRequest)+"<br>"); if(typeof ActiveXObject=="undefined" && typeof XMLHttpRequest!="undefined"){ document.write("new XMLHttpRequest()<br>"); xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ }else{ document.write("未サポート<br>"); } </script>
readyState
[プロパティ] リクエストの処理状態を取得
unknown
readyStateプロパティは、openメソッドの第3引数にTRUEを指定し、非同期通信でサーバーにリクエストを送っている場合に、 サーバーのリクエストの処理状態を取得するのに使用します。
戻り値として、0~4の数値が返ります。
戻り値 | 説明 |
---|---|
0 | オブジェクト生成・未初期化状態(まだopenメソッドが呼ばれていません) |
1 | リクエスト準備中(まだsendメソッドは呼ばれていません) |
2 | リクエスト送信中(まだstatusとレスポンスヘッダがありません) |
3 | データ受信中(レスポンスヘッダ取得) |
4 | データ受信完了 |
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ document.write("XMLHttpRequest非対応ブラウザ"); }else{ /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ var s=""; /* ★サーバーのリクエストの処理状態を取得 */ switch(xmlhttp.readyState){ case 0: /* UNINITIALIZED */ s+="openメソッドが呼ばれていません"; break; case 1: /* LOADING */ s+="sendメソッドが呼ばれていません"; break; case 2: /* LOADED */ s+="statusとヘッダがまだありません"; break; case 3: /* INTERACTIVE */ s+="データ受信中"; break; case 4: /* COMPLETED */ if(xmlhttp.status==200){ s+="データ受信完了"; document.getElementById("resXmlHttpRequestObj").innerHTML="<textarea style='width:450px; height:200px;'>"+xmlhttp.responseText+"</textarea>"; } break; default: break; } document.getElementById("res").innerHTML=s; } /* HTTPリクエスト実行 */ xmlhttp.open("POST",xmlURL,true); xmlhttp.send(null); } } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div> <div id="resXmlHttpRequestObj"></div>
responseXML/responseText
[プロパティ] リクエストの返り値をテキスト形式・XML形式で取得
unknown
テキストデータ = オブジェクト名.responseText
sendメソッドでサーバーにリクエストしたファイルのダウンロードが完了すると、リクエストの返り値(レスポンスデータ)を取得することができます。 レスポンスデータをXML形式で取得する場合はresponseXMLプロパティ、テキスト形式で取得する場合はresponseTextプロパティを使用します。
<script type="text/javascript"> function testXmlHttpRequestObjXML(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ document.write("XMLHttpRequest非対応ブラウザ"); }else{ /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* ★レスポンスの返り値をXML形式(オブジェクト)で取得 */ document["resXML"]=new Object(); document.resXML=xmlhttp.responseXML; var s=""; for(var i=0; document.resXML.childNodes[i]!=null; i++){ if(document.resXML.childNodes[i].nodeName=="ranking"){ var rankingNode=document.resXML.childNodes[i]; for(var j=0; rankingNode.childNodes[j]!=null; j++){ if(rankingNode.childNodes[j].nodeName=="item"){ var itemNode=rankingNode.childNodes[j]; for(var x=0; itemNode.childNodes[x]!=null; x++){ var node=itemNode.childNodes[x]; if(node.nodeName=="no" || node.nodeName=="title" || node.nodeName=="view" || node.nodeName=="url"){ s+=node.firstChild.nodeValue+"<br>"; } } } } } } document.getElementById("resXmlHttpRequestObjXML").innerHTML="【XML形式】(XMLデータをオブジェクトに格納後、分解してHTML出力)<br>"+s; /* ★レスポンスの返り値をテキスト形式(文字列)で取得 */ var resText=xmlhttp.responseText; document.getElementById("resXmlHttpRequestObjText").innerHTML="<p>【テキスト形式】<br><textarea style='width:450px; height:200px;'>"+resText+"</textarea></p>"; } } /* HTTPリクエスト実行 */ xmlhttp.open("POST",xmlURL,true); xmlhttp.send(null); } } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObjXML("./xml/ranking.xml"); } </script> <div id="resXmlHttpRequestObjXML"></div> <div id="resXmlHttpRequestObjText"></div>
abort()
[メソッド] リクエストをキャンセルする
unknown
openメソッドで設定したリクエストをキャンセルします。 戻り値はありません。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* キャンセル用FLG */ var errFLG=true; /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("res").innerHTML="データ受信完了"; document.getElementById("resXmlHttpRequestObj").innerHTML="<textarea style='width:450px; height:200px;'>"+xmlhttp.responseText+"</textarea>"; } } /* HTTPリクエスト実行 */ xmlhttp.open("GET",xmlURL,true); if(xmlhttp.readyState==1 && errFLG==true){ /* ★リクエストをキャンセル(readyState=0の処理状態に戻す)*/ xmlhttp.abort(); document.getElementById("res").innerHTML="リクエストをキャンセルしました"; }else{ /* sendメソッド実行 */ xmlhttp.send(null); } } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div> <div id="resXmlHttpRequestObj"></div>
onload
[イベント] イベントハンドラ実行(レスポンスデータ読込完了時)
unknown
オブジェクト名.onload = 関数名
function 関数名(オブジェクト名) { 処理 }
オブジェクト名.onload = function() { 関数名(オブジェクト名); }
function 関数名(obj) { 処理 }
onloadイベントは、レスポンスデータのロードが完了した時に発生し、イベントハンドラを実行します。 IEではサポートされていないので、IEでレスポンスデータのロード完了を取得するにはonreadystatechangeイベントを使用します。
以下の例では、IEとそれ以外のブラウザでロード完了時の処理を分岐しています。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } try{ /* レスポンスデータ処理 for IE以外のブラウザ */ /* ★レスポンスデータロード完了 */ xmlhttp.onload=function(){ fGetResponseText(xmlhttp); } }catch(e){ /* レスポンスデータ処理 for IE */ if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ fGetResponseText(xmlhttp); } } } } /* HTTPリクエスト初期化+HTTPメソッドおよびリクエスト先URLの設定 */ xmlhttp.open("GET",xmlURL,true); /* リクエスト送信 */ xmlhttp.send(""); } /* レスポンスの返り値をテキスト形式で取得 */ function fGetResponseText(obj){ document.getElementById("res").innerHTML="<textarea style='width:450px; height:200px;'>"+obj.responseText+"</textarea>"; } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div>
send()
[メソッド] リクエスト送信
unknown
openメソッドでリクエストの初期化・設定をしたら、sendメソッドでサーバーにリクエストを送信します。 戻り値はありません。
第1引数データには、POSTの文字列、DOM、InputStreamを指定できます。 POST送信の場合に、PHPなどサーバーサイドスクリプトで受け取ったデータを処理させるのに使用します。 GET送信の場合はURLにパラメータを指定するので、第1引数データには、空文字列("")またはNULLを指定しておきましょう。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* XMLデータ取得 */ document.getElementById("resXmlHttpRequestObj").innerHTML=xmlhttp.responseXML; } } /* HTTPリクエスト初期化+HTTPメソッドおよびリクエスト先URLの設定 */ xmlhttp.open("GET",xmlURL,true); /* ★サーバーにリクエスト送信 */ xmlhttp.send(""); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="resXmlHttpRequestObj"></div>
status/statusText
[プロパティ] HTTPステータスコード/テキスト
unknown
HTTPステータステキスト = オブジェクト名.statusText
statusプロパティは、HTTP通信エラーを検出します。 戻り値として、以下のようなHTTPプロトコルのレスポンスコードが返ります。
戻り値 | 説明 |
---|---|
200 | リクエスト成功 |
401 | 不許可 |
403 | アクセス拒否 |
404 | ファイルが見つからない |
500 | サーバー内部エラー |
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ document.write("XMLHttpRequest非対応ブラウザ"); }else{ /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ var s=""; if(xmlhttp.readyState==4){ /* ★HTTP通信エラー検出 */ switch(xmlhttp.status || xmlhttp.statusText){ case 200: case "OK": s+="リクエスト成功"; document.getElementById("resXmlHttpRequestObj").innerHTML="<textarea style='width:450px; height:200px;'>"+xmlhttp.responseText+"</textarea>"; break; case 401: case "Unauthorized": s+="不許可"; break; case 403: case "Forbidden": s+="アクセス拒否"; break; case 404: case "Not Found": s+="ファイルなし"; break; case 500: case "Internal Server Error": s+="サーバー内部エラー"; break; default: break; } } document.getElementById("res").innerHTML=s; } /* HTTPリクエスト実行 */ xmlhttp.open("POST",xmlURL,true); xmlhttp.send(null); } } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div> <div id="resXmlHttpRequestObj"></div>
getResponseHeader()
[メソッド]特定のレスポンスヘッダを取得
unknown
getAllResponseHeadersメソッドは、引数に指定したヘッダ名のレスポンスヘッダを取得します。 ヘッダが届いていない場合はNULLを返します。
すべてのレスポンスヘッダを取得 ⇒ getAllResponseHeaders()
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* ★レスポンスヘッダ取得 */ var s=""; s+="Server: "+xmlhttp.getResponseHeader('Server')+"<br>"; s+="Last-Modified: "+xmlhttp.getResponseHeader('Last-Modified')+"<br>"; s+="Content-Type: "+xmlhttp.getResponseHeader('Content-Type')+"<br>"; document.getElementById("res").innerHTML=s; } } /* HTTPリクエスト実行 */ xmlhttp.open("GET",xmlURL,true); xmlhttp.send(null); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div>
setRequestHeader()
[メソッド] リクエストヘッダを設定
unknown
setRequestHeaderメソッドは、リクエストヘッダを設定します。 第1引数にヘッダ名、第2引数に値を指定します。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* 指定したリクエストヘッダを取得 */ document.getElementById("res").innerHTML+=xmlhttp.getResponseHeader('User-Agent'); } } /* HTTPリクエスト初期化+HTTPメソッドおよびリクエスト先URLの設定 */ xmlhttp.open("GET",xmlURL,true); /* ★特定のリクエストヘッダ設定 */ xmlhttp.setRequestHeader("User-Agent","hoge 1.5.1"); /* リクエスト送信 */ xmlhttp.send(""); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div>
open()
[メソッド] リクエスト初期化・設定
unknown
XMLHTTPオブジェクトまたはXMLHttpRequestオブジェクトを作成したら、openメソッドでリクエストを初期化します。 「HTTPメソッド」や「リクエスト先URL」などリクエストの設定を行います。 戻り値はありません。
第1引数HTTPメソッドには、「GET」、「POST」、「PUT」(WinIEのみ)、「PROPFIND」(WinIEのみ)を指定します。 一般的に、リクエストの目的がデータ取得ならGET、データ送信ならPOSTを指定します。
第2引数リクエスト先URLには、リクエスト先のURLを指定します。
オプションの第3引数非同期の有無には、非同期(完全にデータの送受信が終了するまで処理しない)ならtrue、同期(データを取得した時点で処理)ならfalseを指定します。 省略した場合はデフォルトのtrue(非同期)が適用されます。
オプションの第4引数ユーザー名を指定すると、認証ページで認証ダイアログが表示されます。 パスワードは、オプションの第5引数パスワードに指定します。
openメソッドは、リクエストの初期化・設定を行うだけで、サーバーに対するリクエストは行いません。 そのためサーバーにリクエストを送信するために、openメソッド実行後、sendメソッドを使用します。
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* XMLデータ取得 */ document.getElementById("resXmlHttpRequestObj").innerHTML=xmlhttp.responseXML; } } /* ★HTTPリクエスト初期化+HTTPメソッドおよびリクエスト先URLの設定 */ xmlhttp.open("GET",xmlURL,true); /* リクエスト送信 */ xmlhttp.send(null); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="resXmlHttpRequestObj"></div>
XMLHTTP
[クラス] XMLHTTPオブジェクト生成(IE4-IE6用)
unknown
オブジェクト名 = new ActiveXObject("Microsoft.XMLHTTP");
XMLHTTPオブジェクトを生成します。 WindowsのIE4~IE6で動作します(IE7およびIE以外のブラウザはXMLHttpRequestを使用)。
Msxml2.XMLHTTPは、Windows XP以上のPC向けです。 try catch を使って、Msxml2.XMLHTTPでエラーが発生した場合に、Microsoft.XMLHTTPを適用するようにしておきます。
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
のように、new演算子でXMLHTTPオブジェクトを生成し、変数(例ではxmlhttp)に代入しておくと、
変数をXMLHTTPオブジェクトとして扱えます。
<script type="text/javascript"> var xmlhttp=null; document.write("typeof ActiveXObject="+(typeof ActiveXObject)+"<br>"); if(typeof ActiveXObject!="undefined"){ /* IE4, IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3(Windows XP以上) */ document.write("new ActiveXObject(\"Msxml2.XMLHTTP\")<br>"); } catch(e1){ try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ document.write("new ActiveXObject(\"Microsoft.XMLHTTP\")<br>"); }catch(e2){ document.write("未サポート"); } } } </script>
getAllResponseHeaders()
[メソッド] 全のレスポンスヘッダ取得
unknown
getAllResponseHeadersメソッドは、すべてのレスポンスヘッダを取得します。 ヘッダが届いていない場合はNULLを返します。
特定のレスポンスヘッダを取得 ⇒ getResponseHeader()
<script type="text/javascript"> function testXmlHttpRequestObj(xmlURL){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp=false; if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */ try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */ } catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */ } } if(!xmlhttp && typeof XMLHttpRequest!="undefined"){ xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */ } if(!xmlhttp){ alert("XMLHttpRequest非対応ブラウザ"); return false; } /* レスポンスデータ処理 */ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ /* ★全レスポンスヘッダ取得 */ var rheader=xmlhttp.getAllResponseHeaders(); if(rheader==null){ document.getElementById("res").innerHTML="レスポンスヘッダが届いていません"; }else{ document.getElementById("res").innerHTML=rheader; } } } /* HTTPリクエスト実行 */ xmlhttp.open("GET",xmlURL,true); xmlhttp.send(null); } window.onload=function(){ /* ページ読み込み完了時に実行 */ testXmlHttpRequestObj("./xml/ranking.xml"); } </script> <div id="res"></div>