Timemo

とある高専生のメモ置き場

【ajaxとは】HTMLのコンポーネント化として使い始めたが、よく分からんから詳しく調べてみた

どうも。へんじにゃ@hengin_blogです。

最近部活内でブログみたいなものを作ろうとしているのですが、その時にheader部分やfooter部分などを毎回記述するのはだるいんですわ。。

「React」や「Vue」などのJSのフレームワークや、「Django」などのPythonフレームワークを使えばいいじゃないか!!と思っている方々もいらっしゃると思いますが、あいにく勉強中なので、うまく操れない。。

そこで、ajaxを使うとHTMLをコンポーネント化できる!!というものを見つけたので、今はそれを使っているのですが、そもそも「ajaxって何?美味しいの?」状態だったので、以下の2つを少し調べてみました。

  1. ajaxとは何か?
  2. ajaxを用いたHTMLのコンポーネント

ajaxとは」の前に同期通信・非同期通信とは?

どうやらajaxを理解するには同期通信及び非同期通信の知識が必要だそうです。

例えば、ユーザーがブラウザを通して「Webサイトを閲覧しよう」とした場合、まずサーバに対して「HTTPリクエスト」をします。これに対してサーバ側は、受けたリクエストに対してレスポンスを返し、ユーザーのブラウザにWebページが表示される仕組みです。

同期通信は、端的に言えば「この一連のタスクを順序通りに行う方法」となります。リクエストに対し、レスポンスの処理が完了するまで、「ユーザーは新たな操作を行うことができません」。処理の完了を待つ必要がある分、「通信に時間がかかりやすい」という特徴があります。より簡単に言えば、キャッチボールのように通信が行われるのが同期通信なのです。

一方の非同期通信は、同期通信とは反対に「タスクの順序を無視する方法」となります。サーバ側がレスポンスの処理を行っている最中でもユーザーは新たな操作ができるので、スムーズな形でインターネット通信を行うことができます。わかりやすく言えば「さまざまな処理を並列に行える通信方法」という認識でも良いでしょう。

Ajaxとはどういうもの?基本情報から仕組みまで詳しく解説|発注成功のための知識が身に付く【発注ラウンジ】 (hnavi.co.jp)より

なるほど。簡単にまとめると同期通信ではタスクを順序通りに実行するため、「ウェブページの読み込みのくるくるが終わるまで何にもできない」ということですね。

一方、非同期通信ではタスクの順序を無視するため、自由度が上がるため、より快適にインターネットを使うことができるということですね。

それで、ajaxとは?

同期通信・非同期通信は概ね理解できたのですが、それじゃあ「ajax」とは一体何なのか?簡単にまとめると「非同期通信をJSによって実現する技術のこと」です。

非同期通信をJSで行えるということは、「ウェブページの一部分のみを変更することが出来る」ということです。

つまり、私が、HTMLをコンポーネント化できた!と思っていたものの正体は「JSによって一部分のHTMLを変更しないようにした」と考えることが出来ますね。

ajaxを用いたHTMLのコンポーネント化の方法

urlの欄を任意のhtmlに指定すればオッケーです(`・ω・´)b

ほんで、header関数としているので、header.htmlの内容を組み込みたい箇所に以下のような記述をすればよいです。

<script>header();</script>

他にもコンポーネント化したいhtmlがある場合は、関数名とurlの値を変更すればオッケーです。(footer.htmlの場合は関数名をfooter、urlをfooter.htmlとして、任意の場所にfooter関数を記述すればよし)

最後に作成したJSファイルをhtmlに読み込むのを忘れないでください。

読者登録よろしくお願いします(*- -)(*_ _)ペコリ