JavaScript Object Notation AjaxにおけるJSONの利用

ウィキペディア

JavaScript Object Notation

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/07/04 06:23 UTC 版)

AjaxにおけるJSONの利用

AjaxにおいてXMLHttpRequestで非同期にJSONでのデータを受け取る例を示す：

古典的な例

var the_object;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
    if ( http_request.readyState == 4 ) {
        if ( http_request.status == 200 ) {
            the_object = eval( "(" + http_request.responseText + ")" );
        } else {
            alert( "There was a problem with the URL." );
        }
        http_request = null;
    }
};
http_request.send(null);

新しい記法を利用した例

var the_object;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.responseType = "json";
http_request.addEventListener ( "load", function ( ev ) {
    if ( ev.target.status == 200 ) {
        the_object = http_request.response;
    } else {
        alert( "There was a problem with the URL." );
    }
    delete http_request;
});
http_request.send(null);

ここでいずれも、http_request はXMLHttpRequestオブジェクトであり、それを url にアクセスして返ってきたJSONで記述されたデータを the_object に格納される。いま、XMLHttpRequestを用いて実装をしたが、iframeなどの他の実装方法もある。また、JavaScriptライブラリのprototype.jsではHTTPの X-JSON ヘッダを利用して簡単にJSONデータの受渡しができる。