2017/07/14

[jQuery] ajaxの非同期処理と同期処理

ajaxでjavascript関数から引数の戻り値を取得する方法の備忘録です。

ajaxのデフォルト設定は非同期となっており、引数の戻り値を受け取る前に処理がすすんでしまうため、処理された結果を関数より取得することができませんでした。

同じ間違いをしないようにajaxの非同期処理と同期処理についてまとめておきます。

同期と非同期の違い

内容
非同期処理 async: true
処理の完了を確認せずに次の処理を行う。
同期処理 async: false
処理が完了したら次の処理を行う。

ajaxのコード

コードの違いはajaxの「async」が 同期(false)か非同期(true)の違いだけ。デフォルトは非同期設定のため、コードは記述されていません。

非同期処理

呼び出した関数内の処理はリアルタイムに行われますが呼び出し元に処理結果を返す前に、次の処理にすすんでいるため処理結果を取得することができません。

つまり、URL設定で呼び出したPHPの戻り値を受け取らずに次の処理を行っています。

同期処理

処理が完了するまで次の処理が行われないため、引数などから処理結果を受け取れます。しかし、不具合が発生した場合には処理がすすまず終了してしまいます。

非同期コードに「async: false」コードが追記して同期処理になっています。

まとめ

WEB上で動作するjavascriptの処理は非同期処理が通常だと思いますが、PHPのような同期処理をjavascriptで実装する方法を紹介させて頂きました。

関連:javascript関数におけるアドレス渡し
参考:はじめてajaxを使うときに知りたかったこと
参考:jQueryのajax()を利用すると返り値をとりたいときのやり方

(Visited 2,315 times, 4 visits today)