AjaxにおけるprocessDataとcontentTypeについて - りょうたくの技術ブログ

f:id:ryoutaku_jo:20190116224925p:plain

【結論】
・processDataで、dataをクエリ文字列に変換せずに送信するか設定出来る
・contentTypeで、content-typeヘッダを変換せず送信するか設定出来る
・データが変換されてしまうと、正常に通信が完了しない為、
　上記二つをfalseに指定して、変換を止める

【目次】

きっかけ
そもそもAjaxとは
XMLHttpRequest とは
jQueryとは
Ajax()関数
リファレンス
《今日の学習進捗》

【本題】

きっかけ

まず、下記のコードをご覧ください

$('#new_message').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action')
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false
})
.done(function(data){
var html = buildHTML(data);
$('.messages').append(html);
$('.form__message').val('');
$(".form__submit").removeAttr("disabled");
$('.messages').animate({scrollTop: $('.messages')[0].scrollHeight
})
})
.fail(function(){
alert('同期に失敗しました');
$(".form__submit").removeAttr("disabled");
})
})

これはスクールの課題だったアプリケーションを作成する際に、
実装したAjaxによる非同期通信のコードの一部です。

このコードにより、指定したフォームのsubmitボタンが押されると、
フォームの情報がデータベースに送信され、
ビューにも反映されるという処理が非同期通信で可能となります。

インターネット上の情報をツギハギして、
なんとか実装できました。

しかし・・・
「processData: false」
「contentType: false」
これが何をしているか、未だに理解出来ていません。

なので、調べてみることにしました。

そもそもAjaxとは

「Asynchronous JavaScript + XML」の略で、
JavaScript の組み込みクラスである XMLHttpRequest を利用して、
ページを遷移せずに非同期でロードして、ページを書き換える技術です。

XMLHttpRequest とは

HTTP通信を行うための、組み込みオブジェクト。
すでに読み込んだページから、さらにHTTPリクエストを発することができ、
ページ遷移することなしにデータを送受信できます。

今回のコードでは、FormDataが XMLHttpRequestの機能を果たしており、
jQueryのAjax()関数の第二引数に、送信するデータをFormDataと
指定することで、フォームの情報をデータベースに送信する事が可能となっています。

jQueryとは

JavaScriptのライブラリ、非同期通信などを簡単（笑）に実装できる。

Ajax()関数

jQueryでAjax処理を行う場合に用いる。
第一引数に読み込むURLを指定し、
第二引数に通信時に使用するHTTPメソッドや
パラメータやコールバック関数などを指定出来ます。

そして、その第二引数に指定されているのが、
今回のテーマの下記二つです。

processData: false,
contentType: false

リファレンス

それぞれ、リファレンスでは下記の様に説明されています

processData / boolean
dataに指定したオブジェクトをクエリ文字列に変換するかどうかを設定します。
<b>初期値はtrueで、自動的に "application/x-www-form-urlencoded" 形式に
変換します。</b>DOMDocumentそのものなど、他の形式でデータを送るために
自動変換を行いたくない場合はfalseを指定します

contentType / string
サーバにデータを送信する際に用いるcontent-typeヘッダの値です。
<b>初期値は"application/x-www-form-urlencoded"</b>で、
殆どの場合はこの設定のままで問題ないはずです。

semooh.jp

この様に、Ajax処理を行う過程でデータが変換されてしまうのですが、
それが原因で正常に通信が完了しなくなってしまいます。
（実際に、この二つのどちらかを外すとエラーになる）

なので、データが自動で変換されない様に、
この二つのパラメータ指定をfalseにして、
データ変換を止めている様です。