【jQuery / ajax】非同期通信について①

はじめに

こんにちは、技術部のTです。
今回は、「ajax」や「非同期通信」の言葉の意味や使用されている技術、仕組みについて書かせていただきます。
具体的な使い方に関しては、私が次回ブログを担当する際に書かせていただきます！

---

目次

1. はじめに
2. 非同期通信とは
3. ajaxとは
4. ajaxの仕組み
5. おわりに

参考

• https://developer.mozilla.org/ja/docs/Glossary/Asynchronous
• https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
• https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model
• https://ja.wikipedia.org/wiki/JavaScript_Object_Notation
• https://qiita.com/okamoto_ryo/items/d8d9476490a27ad17f71

---

1. 非同期通信とは

非同期通信とは、

2 人以上の通信者の間で、それぞれが都合の良いタイミングでメッセージを受信し処理する通信方式です。ソフトウェアが非同期に通信する場合、プログラムは別のソフトウェア（サーバーなど）から情報を要求し、応答を待っている間、他のことをし続けることができます。（mdn web docsより）

です。

同期通信とは違い、サーバーへのリクエスト中でもページ全体の処理が止まることが無いため待ち時間が発生しません。つまり、リクエストしてレスポンスが来るまでの間に、ユーザーは他の作業を継続して行うことができるのです。
身近なところでいうと、グーグルマップやSNSなどに非同期通信が活用されています。

---

2. ajaxとは

ajaxとは、「Asynchronous JavaScript XML」の略です。各単語の意味は以下の通りです。

• Asynchronous : 非同期で通信を行う方法
• JavaScript : 動的なWebページを作成する際に用いられるプログラミング言語
• XML : 文章の構造やタイトル、文字の修飾情報を記述するためのマークアップ言語

つまり、JavaScriptとXMLの技術を活用し、非同期通信を実行することです。使用されている技術をもう少し詳しく説明します。

XMLHttpRequest

XHRオブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。(mdn web docsより)

XHRオブジェクトとは、JavaScriptにあらかじめ定義されているオブジェクト（組み込みオブジェクト）のことです。つまり、JavaScriptを用い、ブラウザからサーバーへHTTPリクエストを送信したり、サーバーからのHTTPレスポンスを受信したりします。

DOM

DOMオブジェクトは、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。(mdn web docsより)

DOMオブジェクトも、JavaScriptの組み込みオブジェクトです。つまり、JavaScriptからHTML内のどこに何を追加・削除するかを指定できます。

Json

Jsonは、データ記述言語の1つである。軽量なテキストベースのデータ交換用フォーマットでありプログラミング言語を問わず利用できる。(Wikipediaより)

軽量なことに加え、人間にとってもマシンにとっても扱いやすい点が特徴です。Json形式でのデータ記述の簡単な例としては以下の通りです。