非同期通信Ajaxをできるだけ分かりやすく説明してみた

未分類

同期通信と非同期通信

同期通信と非同期通信の違いを考える前に、プログラムによる処理とは何かについて考えてみましょう。

同期処理とは?

処理が同期しているとはどういうことでしょうか?

処理A → 処理B → 処理C → 処理D

と順々に処理を行うということです。

処理Aが終わるまで、処理Bは始まりません。

では非同期処理とはどのようなものでしょうか?

非同期処理では処理Aの終了を待たずに処理Bが開始されます。

同期通信と非同期通信とは何でしょうか?

上で説明した、同期処理、非同期処理という言葉から「処理」を「通信」に置き換えればOKです。

Webアプリケーションの場合、ほとんどの場合位、何らかの「処理」は「通信」に対応します。

常にサーバーから様々に加工された情報を取得します。

具体的にJavascriptによる非同期通信について考えてみます

Javascriptの非同期通信は分かってしまえば別段難しいわけではありません。

Javascriptの仕様が変化しているので、その仕様ごとに書き方が異なります。

(ES5, ES6, ES7 で書き方が違うので、いらぬ混乱を招いています。)

  • ES5ではprototypeを使う
  • ES6ではPromiseを使う
  • ES7ではasync, awaitを使う

ES7 (ECMASCriptの7th Edition)の書き方の方が新しいので、簡潔に書くことができるようになっています。

であれば、ES7を使えば良いのですが、Javascriptはブラウザーで使われるので、ブラウザーがES7に対応していなければ、そのJSプログラムが動かなくなってしまいます。

 

 

もともとは、主にXMLを通じてAJAXを利用することを想定して作られたのですが、現在ではJSONを利用してAjax通信が行われています。

JavascriptとJSONを使って非同期通信しているのにXMLHttpとかでてきても、びっくりしないようにしてください。

 

Ajax通信を行う場合のライブラリや方法

  • Fetch API
  • Axios
  • Superagent
  • jQuery
  • Node HTTP

 

コメント