Ajaxとは？jQueryでAjax通信をコードで書く方法まで解説

あるWebページで、画面をリロードせずに更新が行われたり、リンクを押すとWebページ内の一部しか変化しないという機能を見たことがあると思います。SNSやコーポレートサイトでよく見ると思いますが、こういった実装にはJavaScriptのAjaxという機能を用いて書かれています。

本記事ではAjaxについての解説とjQueryでの書き方を解説します。Web制作ではよく使われる機能なのでぜひ読んでください。

Contents

Ajaxとは
Ajaxでできること
jQueryでAjaxを使うには
- 基本構文
- サンプルコード
まとめ

Ajaxとは

AjaxとはJavaScriptでWebサーバーにデータをリクエストし、返ってきたJSONデータを受け取る仕組みです。簡単にいうとHTMLの一部分をJavaScriptを用いて追加で読み込む処理の事です。日本語では非同期処理と呼ばれます。

HTMLを一部受け取ることで、ページを追加することができます。Twitterなどで下にスクロールするとツイートが追加されるのはAjaxなどの非同期通信処理を利用しています。また、Ajaxではページが書き換わらないので、取得したデータをもとにページ一部分を更新することができます。

SNSや動画サイト、ブログではAjaxなどを用いた非同期通信プログラムが利用されています。

Ajaxでできること

無限スクロール

下にスクロールするといつまでも続いていくようなUIはAjaxが利用されています。TwitterやInstagramなどの投稿がどんどん下に続いていくような処理です。

1ページに20個の投稿が表示されています。20個目の投稿までスクロールされると、Ajaxで追加の20個の投稿を取得し、ページに追加することで無限にスクロールができる様になります。

スマホの普及によって、どんどん増えてきた機能です。

ページの一部を更新

ページの一部を更新するのはブログやコーポレートサイトでよく見られます。ヘッダーとフッター、サイドバー、メイン画面で構成されるWebページがあるとします。メイン画面だけ変わるようなページはAjaxで非同期通信処理が行われています。

ページを全て読み込むに比べて、一部だけを書き換えるため、サーバーへの負担も少なくなり、処理が早くなります。

データを送信後、コメントを表示させる

データを入力後、入力画面の上に「入力されました」と表示されることがあると思います。データを受け取ることで、レスポンスとして、Ajaxを用いて、HTMLを追加しています。このような処理をすることで、サーバーへの負荷も減ります。

jQueryでAjaxを使うには

基本構文

AjaxはJavaScriptの機能ですが、jQueryを使えばシンプルにコードを記述することができます。基本構文は以下になります。

$.ajax(url:’URLアドレス’,パラメーター)

パラメーターはtypeやdatatypeを指定することができます。下のWebサイトにパラメーターについて詳しくまとめた表がありますので、ご参照ください。

https://www.buildinsider.net/web/jqueryref/059

サンプルコード

aタグの文字を押すとリストが追加されるコードを下に書きます。ぜひ参考にしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>サンプル</li>
        <li>サンプル</li>
        <li>サンプル</li>
    </ul>
    <a>and more...</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $("a").on("click", function () {
            $.ajax({
                url: "読み込むファイル"'})
      .done(function () {
                    $("li").append(data);
                }).fail(function () {
                    console.log("失敗！");
                })
            });
    </script>
</body>

</html>

ここでajaxで読み込むファイルがローカルファイルの場合、読み込むことができません。そのため、テストサーバーを用意しなければならないのでご注意下さい。

テスト用のサーバーは下のサイトがおすすめです。

Servered