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>