学習記録
メモ投稿機能（フロント側）
メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能
【目的】
・非同期通信についてAjaxを理解する
・必要なコード・用語を覚える
【学習概要（実装について大まかに何をしたか）】
①送信ボタンをクリックした際のイベントハンドラーを定義
②クリックした際のリクエスを送信
【実装の手順】
前回の続きから
２．リクエストを送信する
２−１．XMLHttpRequestのオブジェクトを生成
＜用語・コード＞
XMLHttpRequest ... Ajaxを可能にするためのオブジェクトでサーバーにHTTPリクエス
トを非同期で行うことができる。さまざまなメソッドが用意されて
おりサーバーへリクエストを送る。
クリックしたメモがどのメモなのか判断するための情状をリクエス
トに含める必要があり、メモのidをビューファイルに埋め込んで
JavaScriptで取得できるようにする。ビューファイルにidを埋め込む
ためにカスタムデータ属性を用いる
カスタムデータ ... HTMLに対して任意の属性を持たせられる機能。
例<div class="sample" data-id="1">
Ajax(エイジャック) ... JavaScriptを使用して非同期通信を行う処理のプログラム手法
JavaScript ... クライアントサイドで便利なプログラミング言語（ブラウザ上でのアプリ
ケージョンの使いやすさ・リクエストの送り方の工夫など）。使い勝手の
良いアプリケージョンの作成ができ、Ruby on RailsのWebアプリケーショ
ンにJavascriptを適用することができる
HTTPリクエスト ... クライアント側からURLを入力した際にWebサーバー側に送られる
リクエスト
オブジェクト ... 関連のあるプロパティ（データと機能）の集合体
機能はメソッド（変数と関数で構成されている）のこと
プロパティ ... ハッシュ形式（キーとバリューの組み合わせ）
２−２．XMLHttpRequestを初期化する
openメソッドを使用する
＜用語・コード＞
open ... XMLHttpRequestで定義されているメソッドで、リクエストを初期化できる
初期化＝どのようなリクエストをするのか引数によって指定する。
第一引数はHTTPメソッドの指定
第二引数はパスの指定
第三引数は非同期通信であるかどうかの指定
２−３．レスポンス形式を定義
レスポンスをJSONで定義
＜用語・コード＞
JSON ... データ形式の一種。CSV・XMLなどがある。表記形式がRubyのハッシュに似て
いる特徴がある。またJavaScriptにおけるオブジェクトの表記になる。JSONで
HTMLにレスポンスを返却する場合形式が異なるためrenderメソッドを使用す
る。
XML ... データ上の表記形式がHTMLに似ている特徴がある
おわり
