JavaScript

AJAXについて

下記著書より引用、抜粋します。

ブラウザのJavaScript環境にはXMLHttpRequestオブジェクトやFetch APIといった、サーバーと通信をするためのオブジェクトが存在します。

AJAXはこれらの通信オブジェクトを活用したユーザーのシステム操作を快適にするための手法です。

AJAXでは普段行っている通信とページ全体の再読み込みをせずに、サーバーとの通信や表示の更新をJavaScriptで独自に行います。

その結果、ユーザーが待たずに操作できる「非同期の動作」を実現できるのです。

中略

AJAX通信を終えた後、JavaScriptによりDOM操作を行うことで、レスポンスとして返ってきたデータを使用してページを更新することができるのです。

レスポンスについてはHTMLをはじめとした様々なデータを受け取ることができますが、多くの場合JSONやXMLという構造化されたテキストデータです。

これにより画面表示内容のHTMLをそのまま返す場合より、情報量が少なく通信が早くなります。

JSONについて

JSONはJavaScript Object Notationの略称で、名前の通りJavaScriptのObjectの表現によく似た構文です。

例えば、個人のプロフィール情報をJSONで表現すると以下のような文字列になります。

{
"name": "東芝　太郎",
"age" : 50,
"interest": ["プログラミング","スポーツ","料理"]
}

JSONのような値（バリュー）とそれを識別する情報（キー）がセットになっている構造のデーターをキー・バリュー型の情報といいます。「name」がキー、「東芝太郎」がバリューにあたります。JSON内の文字列は、必ずダブルクォーテーションで囲む必要があります。

AJAXを体験してみましょう

JSONを取得してみよう。

まずはコマンドでフォルダを作成、移動します。

mkdir AJAX // フォルダを作成
cd AJAX // AJAXフォルダへ移動

次にJSONファイルを作成してみましょう。今回は下記のように作ってみました。JSONファイルの拡張子は「.json」です。作成したら先ほどのAJAXフォルダに格納しておきます。

hello.json {
"message": "Hello again AJAX"
}

以前に勉強し導入したhttp-serverコマンドを実行していきます。

そして http://192.168.100.102:8080/hello.jsonもしくは http://127.0.0.1:8080/hello.jsonをブラウザのアドレスバーに入力します。

するとブラウザにJSONファイル内容が取得できて表示されます。

ここでは用意したJSONがURLから取得できることが確認できました。

AJAXを実行してみましょう。

JavaScriptからhello.jsonを取得してDOMを更新して表示させてみましょう。

HTML <body>
<p id="message"></p>

<script src="main.js"></script>
</body>
</html>

main.js async function display(){
const response = await fetch('hello.json');
const data = await response.json();
const messageElm = document.getElementById('message');
messageElm.innerHTML = data.message;
}
display();

hello.json {
"message": "Hello again AJAX"
}

同じくターミナルから先ほどのhttp://127.0.0.1:8080/index.htmlとブラウザのアドレスバーに入力してみます。

しっかりとJavaScriptからJSONファイルの内容を読み取り、そしてDOMに反映させることができていますね。

解説

async function display(){	displayというメソッドをまず定義しています。asyncは後に出てくるawaitにおいて、それを呼び出している関数に付けます。
const response = await fetch('hello.json');	サーバーへの通信を行うfetchというメソッドを実行し、その結果を変数responseに代入しています。awaitをつけるのは、通信のような「待ち」が発生する処理につけます。
const data = await response.json();	fetchでのレスポンスとして受け取った情報をjsonメソッドでJSONをObjectに変換し、変数dataに代入しています。
const messageElm = document.getElementById('message');	iD="message"を取得し、それを変数messageElmに代入しています
messageElm.innerHTML = data.message;	最後にdataからJSONデーターのmessageを取り出し、ブラウザに表示しています。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。先に進みたい人はこちらからどうぞ。

一つ前に戻り復習したい人はこちらからどうぞ。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー