KATUBLO
2019年03月27日

【web】ajaxってなに?初心者が解説してみた

こんにちは。KATUOです。

現在絶賛体調悪化中です。笑

喉の痛みと咳が朝からひどくなってきている… 明日の朝病院に行こうと思います。風邪ひいた時って、病院いってお薬もらって最速で直すのがもっともコスパと思っています。ですが、サボらずブログは更新していきます。今回はajaxについて書いていきます。

 

ajaxってなに?

ajaxの訳は?

asynchronous JavaScript xmlの略です。asynchronousっていうのは非同期という意味です。

 

非同期通信とは?

当たり前ですが非同期というのは同期の反対語ですね。webでいう同期通信というのは、一度画面をリフレッシュして、データの更新を図ることを指します。ということで非同期通信いうのは画面をリフレッシュしないということになります。有名な例を出してajaxの技術の活用法を説明するならば、グーグルマップのような地図をWEBサイトで見るときにこのajaxが大いに活躍しています。ajaxが登場するまでは、WEBで地図をみる際、他の場所に移動するとき画面を全て更新して移動する必要がありました。てすが、ajaxの技術を使用すると必要な部分、地図でいう表示出来ていない部分のみを取得するということが可能になり、全てをリロードすることなくスムーズな地図の閲覧が可能になりました。

 

どのように非同期通信を行うの?

以下の技術を用いて、非同期通信を行います。

 

DOM

XML

XMLHTTPrequest

JavaScript

 

DOM

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

参照:「JavaScript初心者でもすぐわかる!DOMとは何か?」

 

簡単にまとめると、HTMLをDOMという仕組みを使って管理することで、javascriptsを使ってHTMLを操作することを可能としてくれる技術です。

 

 

XML

XMLは、文章の見た目や構造を記述するためのマークアップ言語の一種です。
主にデータのやりとりや管理を簡単にする目的で使われ、記述形式がわかりやすいという特徴があります。

参照:「XMLとは?IT初心者にもわかりやすい基礎知識とHTMLとの違い」

 

まとめるとデータのやりとりで使用されるマークアップ言語ですね。

 

XMLHTTPrequest

XMLHttpRequest (XHR) オブジェクトを使用すると、サーバーと対話することができます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。 XMLHttpRequest は AJAX プログラミングで頻繁に使用されます。

参照:「XMLHttpRequest」

 

この技術によって、画面を更新する際、ページ全体を更新せずにデータの受け渡しが可能となります。

 

 

非同期通信のフロー

 

図を使ってajaxの非同期処理を理解する

クライアント側で任意のイベントが発生する(送信フォームで送信したり)

 

javascriptsとXMLHttpRequestの技術を用いて、サーバーにリクエストを送信。

 

送られてきた情報をwebサーバー内で、実行処理。

 

処理した結果、出てきた出力をブラウザに送信

 

送られてきたデータをDOMを使って画面更新

 

というフローになっています。クライアント側(ブラウザ側)で更新が行われる部分のみ、書き換えられる為、イベント発生後も画面の更新なしに継続して、画面をみれます。

 

まとめ

技術の大枠は理解できましたね。実際に実装してさらに理解を深めていこうと思います。

 

 

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです。

関連記事

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

過去の投稿