Help us understand the problem. What is going on with this article?

ajaxの非同期通信処理について

マジでjavaScritpムズいくて泣きそうな筆者です(T ^ T)
今回はjavascriotのライブラリーである、
jQueryのajaxについて学んだので、書いていきます。

ajaxとは

ajaxとはざっくり説明すると、非同期処理ができる機能だと思ってください。
正式な名称は、Asynchronous JavaScript + XMLとなっています。
(Asynchronousは「非同期」)
この機能を使うと非同期で処理が行えるので、ページを再読み込みしなくても、
処理を反映させる事ができます。
イメージとしてこんな感じです。

同期処理

スクリーンショット 2020-09-17 3.06.20.png
図だけだと解りにくいですが、
イメージとしては、
1・ PCのブラウザで2チャンネルなどの掲示板を表示させている。
2・ 掲示板のスレッドに書き込みをする。
(この際、同期処理の場合は、書き込んだ文字などが、サーバに送信(リクエスト)されて、
何らかの処理を行って、書き込んだ文字などが反映されたHTMLファイルを返す(レスポンス)
このように、画面から文字などを送信し、リクエストする度にレスポンスが行われ、
再度画面リロードされる。
これが、同期処理になります。
これに対して、非同期処理は、下記のような形になります。

非同期処理

スクリーンショット 2020-09-17 3.18.41.png
1・ PCのブラウザで2チャンネルなどの掲示板を表示させている。
2・ 掲示板のスレッドに書き込みをする。
3・ サーバ側には、書き込んだ文字がajax通信で送られ、
サーバ側で処理が行われ、書き込んだ文字のオブジェクトだけが、
レスポンスされ、HTMLに書き込んだ文字だけが反映されます。
(この際、非同期処理の場合は、書き込んだ文字オブジェクトだけが、レスポンスされるので、HTMLファイルのリロードは起きません。
レスポンスされた文字だけをjavaScriptの処理などで、HTMファイルに
追加だけします。)

違い

同期処理は、サーバから新たなHTMLファイルがレスポンスされ、
画面が再描画されるの対して、
非同期処理は、サーバから文字などのオブジェクトだけを、返却して
現在クライアン側のPCで表示されているHTMLファイルに、
文字オブジェクトをjavaScriptなどの処理で、追加して表示させています。
ようは、新しいHTMLファイルを表示させているか、
すでに表示させているHTMLファイルに、非同期通信で、返却された
文字オブジェクトなどだけを追加して表示させているかの違いになります。
・補足
ajax通信でデータを送る場合は、データの形をJSONで送る事が多い。

sampleコード

sample.html.erb

<div class="contents">
  <% @posts.each do |post| %>
    <div class="content">
      <%= post.text %>
    </div>
  <% end %>
</div>

<%= form_for @post do |f| %>
  <%= f.text_area :text %>
  <%= f.submit class: "btn"%>
<% end %>
sample.js
$(function () {
  function buildPOst(post) {
    //テンプレートリテラルで、htmlを再構築
    let html = `<div class="content">
                  ${post.text}
                </div >`
    return html;
  }


  $('.new_post').on('submit', function (e) {
    //htmlのデフォルトの処理をキャンセルし、jQuery側の処理を行う。
    e.preventDefault();
    let formData = new FormData(this);
    let url = $(this).attr('action');

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      dataType: 'JSON',
      processData: false,
      contentType: false
    })
      .done(function (post) {
        let html = buildPOst(post);
        $('.contents').append(html);
       })
      .fail(function () {
        alert('e');
      })
  })
});

処理コードをだいぶはしょって書いたので、相当分かりにくい感じですいません。

処理内容

まず、画面側で文字が入力送信ボタンを押すとサーバにリクエストをしますが、
この時にjavaScriptのイベントが発動します。
$('.new_post').on('submit', function (e)この部分。
非同期通信のajax処理が発動し、
form欄に入力されたデータなどをjson形式で、サーバに送ります。
サーバでは、入力された文字などのデータを処理し、
クライアント(PC画面)側にjson形式で返します。
そして、返却されたデータを再構築する処理を行いHTMLに、
入力した文字などが表示されます。

感想
今回の学習難易度は、自分にとってはかなり高かったです(T ^ T)
送ったデータを処理し、再度構築する?感じが全然イメージが
つかなかったのですが、何度も処理を書いているうちに、
処理順番とデータの再構築方法などが掴めてきました!

kh250
元お肉屋さんの プログラマー駆け出しの30才です。 javaとRailsを勉強していますが、わからん事だらけで、 備忘録のために投稿してます。 間違いが多々あると思いますが、間違いがありましたら、 ご教授頂ければ幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした