Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした