FormDataって何？ゼロから解説

jQueryを使ったAjaxの実装をしていてよく分からなくなってしまったのでまとめます。

##FormDataって何？

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。
Mozillaのサイトより(FormData オブジェクトの利用)

これだけではよく分からないので、ひとつひとつ読んでいきます。

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。

　XMLHttpRequestとはブラウザ上からHttp通信を行うためのAPIです。 XMLとはマークアップ言語のひとつで、データの受け渡しを分かりやすくするために使われます。で、このXMLの形式を用いて「キーと値のペアのセット」とやらを収集する訳ですね。実際に書いてみるとこんな感じになります。それぞれのキー（左側）に対して値（右側）が存在していることが分かりますね。それぞれのキーの詳細についてはこのサイトが詳しいです(jQueryのAjaxに渡すkey valueについてのサイトですが、FormDataと同様のkey valueについて記述があり、参考になると思います)。

  $.ajax({
  type: 'GET',
  url: '/hoge/fuga',
  data: fd,
  processData: false,
  contentType: false,
  dataType: 'json'
})

　実際に書く時はこれの前にnew FormDataをしてあげましょう。

var fd = new FormData($('.hogefuga_form').get(0))

本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。

元々HTMLのformタグから取得したデータを送ることを目的に作られたようですね。ただformとは別にちゃんと指定してあげればもちろんform外のデータも送信できます。