Ajax（非同期通信）

Ajax （非同期通信）とは？

同期通信　（HTTP通信）

webブラウザからサーバーにリクエストをして、レスポンスが帰って来るという流れの中で、 ページ全ての情報を通信している。トランシーバーのように片方が話している間は、もう1人はしゃべることができないというイメージ。リクエストしたサーバーからレスポンスが返ってくるまでは他の作業はできない。

非同期通信（Ajax通信）

webプラウザからページ全ての情報をリクエストするのではなく、追加で読み込みたいHTMLなどの一部の情報をリクエストする。電話のように、相手が喋っていても話すことができる。 リクエストしたサーバーからレスポンスが返ってこなくても他の作業ができる。

サンプルコード

$(function() {
  $(".search__products").on("keyup", function() {
    var input = $(".search__products").val();

    $.ajax({
      type: 'GET',
      url: '/products/search',
      data: { keyword: input },
      dataType: 'json'
    })
  });
});

参考記事

初心者目線でAjaxの説明

Ajax通信を行う際のparamsのキーの設定について