Javascript

Ajaxとは？はじめてのAjax通信をしてみよう！初心者のJavascriptの勉強

  /
Javascript

Ajaxについて一度使ったことはあるもののまったく理解できていなかったのできちんと理解したいと思い書いていきます。

Contents
  1. Ajaxとは
  2. Ajaxでできること
  3. Ajax通信してみよう！
  4. おわり

Ajaxとは

Ajax（エイジャックス）とは、Asynchronous JavaScript + XMLの略でJavaScriptを用いて行う非同期処理のことを言います。
簡単に言うとページを更新せずにプログラミングを実行できます。

非同期通信と同期通信

同期通信

同期通信はデータ通信のリクエストを投げてからサーバーからのレスポンス（応答）があるまでブラウザ側が他の処理をしない通信のことを言います。

非同期通信

非同期通信はデータ通信のリクエストとレスポンシブのタイミングを合わせずに通信を行います。
そのため非同期通信ではレスポンスを待っている間にもほかの処理が行えます。

Ajaxでできること

非同期通信と言われても、Ajax通信を使うとどんな事ができるのかイメージができないのではないでしょうか。
有名なAjaxにGoogleMapがあります。
ページを更新しなくても、地図を大きくしたり小さくしたりできるのはAjax通信のおかげです。
他にもGmailやTwitterでも使用されていて画像を更新せずにドラッグアンドドロップでアップロードするのにAjaxが使われていたりします。

その他にもいいね！などのレートをすぐに反映し更新しても維持されているのもAjaxの力です。
またDBのデータを直ちに呼び出したり、チャットルームで画面を更新せずに意見交換ができたり（SNSのコメントなんかもそうですね）、ポップアップフォーム（モーダル）で画面遷移させずにアンケートなどを実施したりできます（画面遷移することでページから離れてしまうことを回避）。

Ajax通信してみよう！

Ajaxのテスト用コードを見ながら理解を深めていきたいと思います。
Ajax通信で文字をテキストファイルから呼び出している処理です。

Ajax通信をする前に

Ajax通信をするにはHTMLサーバーを準備する必要があります。動きを確認したいだけなので今回はWeb server for chromeというアプリを使って簡単にローカルサーバーを立ち上げています。（直感的に使えて、わからない部分もググればすぐ使えます。）

用意したもの

以下２つのファイルを同じフォルダにしまってWeb server for chromeでフォルダを選択しサーバーを起動するとテストが行えます。

index.html

テキストエディタで以下の内容を貼り付けindex.htmlで保存。

jQueryではなくJavascriptで書かれています。参考元のコードをほぼ丸写しさせていただいています。
参考元：https://www.w3schools.com/js/js_ajax_intro.asp

<!DOCTYPE html>
<html>
<body>
<div id=”demo”>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(“demo”).innerHTML =
      this.responseText;
    }
  };
  xhttp.open(“GET”, “ajax_info.txt”, true);
  xhttp.send();
}
</script>
</body>
</html>

ajax_info.txt

テキストエディタで表示させる文字を適当に書いて、ajax_info.txtで保存します。

Ajax通信に出てくる用語を解説

一番簡単な例でまずはAjax通信ででてくる用語を学びます。簡単なはずなのにわからないことだらけだったので長くなります。

XMLHttpRequest

サーバとのHTTP通信を行うための、組み込みオブジェクト（API）です。
WEBサーバから一度すべてのデータを読み込んだ後でもデータの送受信を行うことができるため、
リロードすることなくページの内容を書き換えることが可能となります。XMLHttpRequest=Ajaxと思っていいかもしれない。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange プロパティは、 readystatechange イベントが発生するたびに（ readyState が変化すると発生）呼び出されるイベントハンドラーを保持します。

XMLHttpRequest.readyState

XMLHttpRequest.readyStateはXMLHttpRequest クライアントの状態を返します。
状態は以下のように変わります。

値状態説明
0UNSENTクライアントは作成済みだがopen()は呼ばれていない
1OPENEDopen() が呼び出し済み
2HEADERS_RECEIVEDsend() が呼び出し済みで、ヘッダーとステータスが利用可能
3LOADINGダウンロード中でresponseText には部分データが入っている
4DONE完了

readyState == 4 はXMLHttpRequestの準備が完了である状態のこととなります。

this.status == 200

this.status == 200はHTTPレスポンスステータスコード(HTTP response status codes)の状態を示しています。
レスポンスのステータスは番号によって細かく情報が細分化されますが5つのクラスにグループ化されています。

  • レスポンス情報 (100–199)
  • 成功 (200–299)
  • リダイレクト (300–399)
  • クライアントエラー (400–499)
  • サーバーエラー(500–599)

200はリクエストが成功した時のステータスです。

ステータスはデベロッパーツールから確認することができます。以下記事を参考にして実際に確認してみると理解が深まると思います。

html css
HTTPリクエストとは？HTTPリクエストを目で確認したい HTTPリクエストとは HTTPリクエストとはWebブラウザとサーバーがやりとりする際に、Webブラウザ側がサーバーに送る要求(...

innerHTML

innerHTMLは文字を表示することができます。以下記事でまとめています。ここでは文字が表示できるんだくらいで飛ばしてしまってもOK。

Javascript
Javascriptを使ってサイト(html)に文字を表示する！Javascript超初心者の勉強 備忘録です。 確認はJSBin（ https://jsbin.com/ ）とabout:blank画面で行いました。 do...

responseText

XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。innerHTMLを使って受け取ったテキストを表示させています。

XMLHttpRequest.open()

XMLHttpRequest の open() メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。
ここでは表示するための文字が書かれているテキストファイルをAjax通信でリクエストを呼び出しています。

■ 構文

XMLHttpRequest.open(HTTPメソッド ,URL [,非同期モードを使用するか [,ユーザー名 [,パスワード]]])

第3引数以降は任意は任意です。
URLは同一ドメインが基本。

XMLHttpRequest.send()

リクエストをサーバーに送信します。リクエストが非同期の場合、リクエストが送信されると直ちに、結果がイベントを用いて反映されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで結果は反映されません。

openメソッドはリクエストの準備を行うだけで実際の情報はsendメソッドを呼び出すまで送信されません。

■ 構文

XMLHttpRequest.send(body)

open()でGETしている時は引数は必要ない。PUTリクエストなど特定の時にのみ引数を記入。

おわり

簡単な例だからなのか、open(“GET”, “ajax_info.txt”, true);のtrueをfalse（同期）に変えてみても特に変化がみられませんでした。別のソースを呼び出しているからなのかな。
簡単なレベルのAjaxをなんとか理解できたのでこれからより複雑なことを実験してレベルアップしていきたいと思います。先が長そう。

参考

ajax
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です