AJAXを同期(Sync)で通信する

概要

Ajax は、皆さんも知っている通り、基本的に非同期で通信します。

※ そもそも Ajax とは Asynchronous Javascript And XML の略です。

なので、データ通信や処理をしている間に、同時に他の動作や処理をすることができるため、

不要なローディングを少なくし、より自由にページを構成することができます。

でも場合によっては、Ajax を同期で通信しなければならない場合もあるので、

今回は、「AJAX の同期通信」について説明します！

非同期

まずは非同期通信のサンプルです。

sample.js

$.ajax({
  type: 'POST',
  url: 'test.php',
  data: "name=lee",
  success: function(data) {
      if(data != null) {
          // Do somothing.
      }
  }
});
doAnything();

※ここで doAnything()は、上の Ajax の結果と関係なく、必ず実行されます。

同期

sample.js

$.ajax({
  type: 'POST',
  url: 'test.php',
  data: "name=lee",
  async : false,   // ← asyncをfalseに設定する
  success: function(data) {
      if(data != null) {
          // Do somothing.
      }
  }
});
doAnything();

async は、デフォルトが true ですが、上のソースのように false に設定すれば、同期で通信します。

以上！