見出し画像
Photo by nyakopan

Ajax通信とは？

なつちゃ

今回はAjax通信についてまとめていこうと思う。



⭐そもそもAjax通信とは？

そもそもAjax通信といわれても、初学者の私にはピンとこない。

Ajax通信とは、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法のこと。
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

https://ja.wikipedia.org/wiki/Ajax

Wikipediaには上記のように記載がある。
これだけでも十分わかりやすいが、もっと簡単にまとめると、
「HTMLの一部を追加で読み込む通信方法」だ。

⭐同期通信と何が違うの？

非同期通信について少しわかったところで、では、同期通信とは何が違うの？ということが気になる。
これに関しては、Youtubeの検索結果とGoogleの検索結果を比較するのが一番イメージしやすいのではないだろうか。

①Youtubeの検索結果(Ajax通信)
下にスクロールすれば検索用語に該当する動画が次々と読み込まれていく。
②Googleの検索結果(同期通信)
1ページ目が表示され、次の検索結果を見たい場合は画面最下部の２という数字を押下し、新たに２ページ目を読み込み表示する。

①は非同期通信（今回まとめるAjax通信）で、②は同期通信となる。
この２つの通信の大きな違いは、次のページ結果を読み込むときに「ページの一部分を更新する」か「ページ全体を更新する」かということだ。


⭐Ajax通信のメリット・デメリット

前述の①と②をユーザー視点で比較したとき、いちいちページを読み込むのを待つよりも次々と表示された方が早くていいのでは？と思う。
そこで、Ajax通信のメリット・デメリットを調べてみた。

メリット

・操作の即時反映
　→ユーザーの操作に対してリアルタイムで結果を表示できる。
・通信量の削減
　→画面の全内容を読み込む必要がないので通信量が減る。
・ユーザエクスペリエンスの向上
　→リロードする部分が少ないためサクサク動く。
・開発効率の向上
　→フロントとバックを分けて開発できるため、並行開発が可能。

デメリット

・ブラウザの互換性
　→JavaScriptを使うためブラウザなどによって表示が異なる恐れがある。
・エラー処理が複雑
　→通信に関するエラーが発生するため、アプリケーションが複雑化する。
・SEO対策が難しい
・アクセシビリティの低下

上記が簡単なメリット・デメリットだ。
参照サイトに詳しく載っているため、詳細は割愛する。
Ajax通信は一見ただただ便利に思えるが、やはり用途によっては不便になる可能性もあるということだ。


⭐実装コードの例

ここまでAjax通信とは？というところについて記載したが、ここからは実際にJavaScriptで実装するときの例を記載しようと思う。
実装するときの参考にしていただければ幸いです。

$.ajax({
    type: "POST or GET",
    data: { 'date': date },  // サーバー側に送信するデータ
    dataType: "json",        // 送信するデータ形式
    url: "アクセスするURL", 
    success: function () {   
        console.log("Hello,World!");        // 成功した場合の処理
    }
　　error:function(){　
        console.log("エラーが発生しました");  // 失敗した場合の処理
    }
});

上記がJQuery2での表記方法となります。
JQuery3ではdone＆fail＆alwaysを用いて表記しますが、今回業務では使用しなかったため割愛します。
（また使うタイミングがあれば更新します・・）


⭐まとめ

Ajax通信はユーザーが利用しやすいサイトを作るためには必須のコードであると思います。
コード自体は形式が決まっているため比較的容易に理解できますが、エラーが発生したときに、それがフロント側のエラーであるのかバックエンド側のエラーであるのかを判断し修正するのが難しいと感じました。
業務で軽く触った程度の知識のため、また自身の知識が更新されたら随時修正・更新したいと思います。


⭐参照サイト

以下参照させていただいたサイトです。


この記事が気に入ったらサポートをしてみませんか？