jQueryでAjaxを実装してサイトの非同期通信処理を行う

Webページを作成する際、画面遷移したくないページもあるかと思います。そこで登場するのが「Ajax（エイジャックス）」。名前は聞いたことがあっても、どんな風に実装するのか疑問に思っている方もいるのではないでしょうか？今回は、jQueryでAjaxを実装する方法を解説します。

システム
エンジニア

すみません。そもそもAjaxとはいったい何のことでしょうか？

プロジェクト
リーダー

Ajaxは「Asynchronous JavaScript ＋ XML」の略ですよ。Asynchronousは“非同期”の意味。非同期通信を行うための実装方法ということですね。

非同期通信処理ができるAjaxとは？

Ajaxとは、JavaScriptを介して行われる非同期通信処理のことです。非同期通信と聞くとイメージしにくいですが、簡単にまとめると「画面遷移しない」という意味になります。

ここでは、通販サイトを例に挙げてみたいと思います。通販サイトには、「会員登録をするページ」「商品一覧を表示するページ」「買い物かごを表示するページ」などがあり、ボタンやリンクをクリックすることでページが変わっていきます。これはいわゆる「同期通信」で、画面が遷移している状態です。

ただし通販サイトの中には、購入完了したときに「商品の購入が完了しました」のようなポップアップが表示されるページもあります。このとき、画面自体は遷移していないですが、ポップアップが重ねて表示されています。これがいわゆる「非同期通信」で、画面が遷移していない状態です。

何となくお分かりいただけましたでしょうか。
次項では実際に非同期通信処理を行っていきたいと思います。

Ajaxで非同期通信処理を実装する

では、非同期通信処理を実装していきましょう。
今回は、ajax-sample1.htmlからajax-sample2.htmlを読み込んで結果を表示したいと思います。

ソースコードは下記のとおりです。

では、ブラウザで実行してみましょう。

ボタンを押してみます。

ajax-sample2.htmlの内容が読み込まれて、画面遷移せずに結果が表示されました。
これらを応用すると、よりユーザビリティの高いWebページを作成することができるのです。

システム
エンジニア

こういったページ、最近よく見ます。これがAjaxを使ったページなんですね。

プロジェクト
リーダー

使う側だと意識していないかと思いますが、裏では非同期通信が行われているんですよ。意識してWebページを見ていくと面白いですね。

非同期通信でユーザビリティの高いWebページを作ろう

この記事では、非同期通信処理であるAjaxの概要から使い方まで解説していきました。非同期通信は画面遷移しない（つまり画面の一部だけ更新することができる）ため、読み込み時にかかる時間を短縮することができるというメリットがあります。Ajaxを活用し、ぜひユーザーが使いやすいWebページを作ってみてください。