LoginSignup
17

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-10

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の略
軽量なデータ記述言語の1つである。
公文は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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17