非同期通信（XMLHttpRequestの使い方）｜XML->DOM生成->HTML出力｜Ajax

TOP Ajax非同期通信（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

オブジェクト名 = new XMLHttpRequest();

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

readyStateプロパティは、openメソッドの第3引数にTRUEを指定し、非同期通信でサーバーにリクエストを送っている場合に、サーバーのリクエストの処理状態を取得するのに使用します。

戻り値として、0～4の数値が返ります。

readyStateプロパティの戻り値
戻り値	説明
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

XMLデータ = オブジェクト名.responseXML
テキストデータ = オブジェクト名.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

オブジェクト名.abort();

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

オブジェクト名.send （データ）

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ステータスコード = オブジェクト名.status
HTTPステータステキスト = オブジェクト名.statusText

statusプロパティは、HTTP通信エラーを検出します。戻り値として、以下のような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

レスポンスヘッダ = オブジェクト名.getResponseHeader(ヘッダ名);

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 ( ヘッダ名, 値 )

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

オブジェクト名.open( HTTPメソッド, リクエスト先URL[, 非同期の有無[, ユーザー名[, パスワード]]] )

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("Msxml2.XMLHTTP");
オブジェクト名 = 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();

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>

Ajax基本 動作環境チェック

XML->DOM生成->HTML出力 AjaxでXMLデータをHTML出力

PHP & JavaScript Room

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()
［メソッド］全のレスポンスヘッダ取得

関連コンテンツ

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
［イベント］イベントハンドラ実行（リクエスト処理状況変化時）

XMLHttpRequest
［コンストラクタ］ XXMLHTTPオブジェクト生成（IE7およびIE以外のブラウザ）

readyState
［プロパティ］リクエストの処理状態を取得

responseXML／responseText
［プロパティ］リクエストの返り値をテキスト形式・XML形式で取得

abort()
［メソッド］リクエストをキャンセルする

onload
［イベント］イベントハンドラ実行（レスポンスデータ読込完了時）

send()
［メソッド］リクエスト送信

status／statusText
［プロパティ］ HTTPステータスコード／テキスト

getResponseHeader()
［メソッド］特定のレスポンスヘッダを取得

setRequestHeader()
［メソッド］リクエストヘッダを設定

open()
［メソッド］リクエスト初期化・設定

XMLHTTP
［クラス］ XMLHTTPオブジェクト生成（IE4-IE6用）

getAllResponseHeaders()
［メソッド］全のレスポンスヘッダ取得