フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)HTTPXMLRequest についての覚書

Javascriptで非同期通信を行う場合の処理は、XMLHttpRequestオブジェクトを生成して、 open()メソッドで送信方法(POSTかGET)とURLを設定して、send()メソッドで送信します。

非同期処理の実装は、通信先からコールバックが来た時にonreadystatechangeが呼ばれるので、 そこに関数を登録します。

以下に、基本的な機能を記述します。

// XHRオブジェクトを生成
var request = new XMLHttpRequest();

// レスポンスが来た時の処理をイベントハンドラに登録
 request.onreadystatechange = function()
{
    // 4になったら通信完了
    if(request.readyState == 4)
    {
        // 正常にレスポンスを受け取ったら200
        if(request.status == 200)
        {
            // レスポンスヘッダーを取得
            var head = request.getAllResponseHeaders();
            
            // レスポンスヘッダーは平テキストなので、Content-Typeの部分を取得
            var contentType = head.match(/Content-Type:([^\n]*)/)[1].trim();
            var text;
            
            // Content-typeで判定
            switch(contentType){
                // XMLの場合
                case 'text/xml':
                    text = request.responseXML;
                    break;
                // JSONの場合
                case 'text/json':
                    var text = JSON.parse(request.responseText);
                    // 注意!以下の場合はオブジェクトを参照するのでエラーになる
                    // var text = request.responseText;
                    // var jsonText = JSON.parse(text);
                    break;
                // それ以外はテキストとして処理
                default:
                    text = request.responseText;
            }
            
            alert(text);
        }
        
        // ファイルがない場合は404
        else if(request.status == 404)
        {
            alert('404 file not found');
        }
        
        // 0の場合は通信エラー
        else if(request.status == 0)
        {
            alert('ローカルファイルまたは別ドメインにアクセスしている可能性があります。');
        }
    }
}

// 実行は以下の2行
 request.open('GET','http://localhost/test.json');
 request.send();

上記はGET送信で行っていますが、POST送信の場合は、send()メソッドの引数にデータをもたせます。