XMLHttpRequestについて

Ajaxとは

• ページ遷移せずに、コンテンツを非同期にロードし、ページを書き換える技術。
• Asynchronous JavaScript + XMLの略。

XMLHttpRequestとは

• Ajax通信に利用される組み込みオブジェクト。
• XMLHttpRequestのLevel1ではクロスオリジン通信ができないが、 Level2だとクロスオリジン通信が可能になる機能が追加されている。
• クロスオリジンを行うには、サーバー側の設定で"Access-Control-Allow-Orign"のHTTPヘッダをレスポンスに含める。

基本的な処理の流れ

var xhr = new XMLHttpRequest();

// イベントハンドラ
xhr.onreadystatechange = function() {
    switch ( xhr.readyState ) {
        case 0:
            // open()が呼び出される前
            console.log( 'uninitialized!' );
            break;
        case 1: // send()が呼び出される前
            console.log( 'loading...' );
            break;
        case 2: // サーバーからのレスポンス待ち
            console.log( 'loaded.' );
            break;
        case 3: // サーバーからのレスポンス受信中
            console.log( 'interactive... '+xhr.responseText.length+' bytes.' );
            break;
        case 4: // サーバーからのレスポンス受信完了
            if( xhr.status == 200 || xhr.status == 304 ) {
                var data = xhr.responseText; // XMLによるresponseだとresponseXML
                console.log( 'COMPLETE! :'+data );
            } else {
                console.log( 'Failed. HttpStatus: '+xhr.statusText );
            }
            break;
    }
};

XMLHttpRequestのレスポンス

• JSONで受け取る馬青は、responseTextプロパティの内容をJSONに変換する必要がある。

var xhr = XMLHttpRequest();

var json = JSON.parse(xhr.responseText);

alert(json.value);

参考