Ajaxを活用した非同期通信について

ajaxを使った非同期通信

10月19日現在、ajaxによる非同期通信を学習しているところですが、なかなか理解が追いつかないので自分なりにJavaScriptの復習をかねて中身を確認していきたいと思います。かなり自分向けに書いていますので、語弊がある部分もあるかもしれません。

今回は、ブログに対して投稿されるコメントが非同期通信にて行われるようにしていきます。

イベントの発火

まずは動作のきっかけ部分を記述します。きっかけはコメントを入力し、投稿ボタンをクリックした時です。

comment.js

$(function(){
  $('#newcomment').on('submit', function(e){
    e.preventDefault();
    var formdata = new FormData(this);
  })
})

• $(function(){
  jQuery(JavaScript)のコードが読み込まれる際に、まだHTMLが読み込まれていないとエラーが発生します。1行目、$(function(){から書き始めることで、HTMLのページ情報が読み込み完了してからコードが実行されます。
  ちなみにこのfunctionメソッド（書き方あっているのかな・・・）では引数は不要ですが、引数がない場合でも（）括弧を書く必要があります。

• $('#newcomment')
  jQueryでどのボタンがトリガーになるかは、HTMLタブ内のclassもしくはidから探します。
  2行目の$('#newcomment').はHTML内のid（newcomment）を探します。#はidを探す書き方です。
  $('.〜')といったように、.を使うとclass要素から探されます。

• .on('submit', function(e){
  イベントsubmitが起こった際に以下の関数を実施する、という部分。
  ちなみにfunction(e)のeはイベントの頭文字。
  次の行のe.preventDefaultは実行されるべきイベントをキャンセルさせます。

• var 〜〜 = 〇〇
  変数〜〜に〇〇を代入します。
  Rubyだと頭のvarなんて要りませんでしたが、他のプログラム言語では必要な場合も多いようです。

• new FormData(this)
  フォームの情報を取得します。引数がthisの場合、イベントが発生した部分、今回はコメント投稿の部分からの取得になります。

コメントの保存

非同期通信の中で、入力したコメントがcreateメソッドで保存されるようにします。

comment.js

$(function(){
  $('#newcomment').on('submit', function(e){
    e.preventDefault();
    var formdata = new FormData(this);
    $.ajax({
      url: $(this).attr('action'),
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
  })
})

• $.ajax({
  ajaxで非同期通信をする際のオプションを記述します。
  1.type HTTP通信の種類を記述。GETもしくはPOST。
  2.url リクエスト送信先のURLを記述。
  3.data 送信する値を記述。
  4.dataType データの種類を記述。今は基本的にjson
  5.processData dataに指定したオブジェクトをクエリ文字列に変換するかどうか。他の形式でデータを送るために自動変換を行いたくない場合はfalseを指定
  6.contentType データのファイル形式を指定。基本false

• attr
  要素が持つ属性から、指定した属性の値を返します。
  今回では投稿ボタンを含むformタグの中からaction要素を探し、その値となるURLを取得するようにします。

以上の記述で、ajaxで扱われるデータは
「json形式でテキストボックス内の文字をPOSTでコメント投稿のアドレスへ送信」
となります。すなわちコメントが投稿される形となります。

返ってくる結果を受け取る

.doneメソッドで非同期通信の結果を受け取ります。

comment.js

    .done(function(data){
      $('.comments').append(〜〜)
      $('.textbox').val('')
    })
    .fail(function(){
      alert('error')
    })

.doneメソッドで、受け取った結果を元に処理を行います。
commentsクラスの後ろに（）内の記述を追加します。詳細は省略。
textboxクラスの値を空にします。今回はフォームボックスの中をクリアします。
.failメソッドは、エラーが発生した時に表示させる処理です。
alertメソッドはポップアップを表示させます。

こんな感じなんでしょうか。
まだなんとなく程度の理解ですので、もっと精進していきます。