Ajaxを使ったJSONの受け渡し【JavaScript】【Node.js】

#Ajaxとは？
Asynchronous + JavaScript + XMLの略
XMLHttpRequest(HTTP通信を行うためのJS組み込みコンストラクタ)による非同期通信を利用し、
通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
#XMLHttpRequest(XHR)とは？
非同期なデータの通信を実現するためのAPIです。
IE5でActiveX オブジェクトとして実装されましたが、他のブラウザでも互換性のある同等の機能がXHRとして利用できるようになりました。
#XMLHttpRequestオブジェクトについて

プロパティ	型	説明
readyState	Number	XHR通信の状態を取得する。
status	Number	HTTPステータスを取得する。
responseText	String	レスポンスボディの内容を取得する。
responseType	String	レスポンスボディのデータ型を指定する。
response	*	レスポンスボディの内容を任意のデータ型で取得する。

メソッド	説明
open()	サーバに対するHTTPリクエストを作成します。
send()	実際にサーバへ送信する。

イベントハンドラ	型	説明
onreadystatechange	Event	XHR 通信の状態が変化するたびに実行される。

#XMLHttpRequestオブジェクトの使用例

main.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            }
        } else {
            console.log("status = " + xhr.status);
        }
    }
xhr.open("GET", url);
xhr.send();

#JSONとは？
JavaScript Object Notationの略
軽量なデータ記述言語の１つである。
公文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるように設計されている。
#Node.js(express)サーバがJSONを返す

app.js

var express = require("express"),
    router = express.Router();

router.get("/", function(req, res) {
    res.contentType("application/json");
    res.end(JSON.stringify({"test": "hoge"}));
}

#クライアント(JS)からJSONの呼び出し

getJson

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.response);
        } else {
            console.log("status = " + xhr.status);
        }
    }
};

xhr.open("GET", url);
xhr.responseType = "json";
xhr.send();

#参考したサイト
XMLHttpRequest - Web API インターフェイス
JavaScriptプログラミング講座【XMLHttpRequest について】
jQueryを使わない書き方 ajax