Ajaxを使って非同期通信を行う


ccc

こんにちわ!東京都内でサラリーマンをしているAI・育児ブロガーのCCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


Ajaxの通信処理の使い方を教えてください。


ccc

JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、Ajaxの通信処理の使い方をサンプルを用いて解説します。

Ajaxとは

Ajaxとは”Asynchronous JavaScript XML”の略で、ブラウザとWebサーバとの間で非同期通信を行う方法です。非同期通信を行うことで、ページを切り替えることなくページの内容を書き換えることができます。
JavaScriptにはサーバーと非同期で通信するためにAPIが提供されています。

インスタンスを作成

Ajax通信を行うために、XMLHttpRequestオブジェクトのインスタンスを作成します。

let request=new XMLHttpRequest();

HTTPリクエストの初期化

open()はHTTPリクエストの初期化を行うメソッドです。

第1引数に”GET”または”POST”を指定します。”GET”はサーバーからデータを取得するときに使います。”POST”はデータを送信するときに使います。

第2引数にリクエストの送信先URLを指定します。

第3引数には非同期通信を意味する”true”を指定します。

第4引数と第5引数に認証が必要となるときのユーザー名とパスワードを指定します(省略可)。

let request=new XMLHttpRequest();
request.open("GET", "./test.json", true);

通信状況のステータスを取得

readyStateプロパティで通信状況のステータスを取得できます。

let request=new XMLHttpRequest();
console.log(request.readyState);

request.open("GET", "./test.json", true);
console.log(request.readyState);
//0
//1

通信状況のステータスの意味は次のとおりです。

  • 0:準備段階(openメソッド未実行)
  • 1:準備完了(openメソッド実行済、sendメソッド未実行)
  • 2:通信開始(sendメソッド済、レスポンス待ち)
  • 3:受信中(レスポンス受信中)
  • 4:通信完了(レスポンス受信完了)

ステータスが変更されたときコールバック関数を呼び出す

onreadystatechangeプロパティはイベントハンドラで、readyStateプロパティの値が変更されたときにコールバック関数が呼び出されます。

let request=new XMLHttpRequest();

request.onreadystatechange=()=>{
 console.log(request.readyState);
}

request.open("GET", "./test.json", true);
//1

通信を開始する

send()は通信を開始するメソッドです。通信を開始すると”レスポンス待ち”のステータスとなり、レスポンスを受信すると”通信完了”のステータスになります。

let request=new XMLHttpRequest();

request.onreadystatechange=()=>{
 console.log(request.readyState);
}

request.open("GET", "./test.json", true);
request.send();
//1
//2
//3
//4

通信エラーのステータスを確認

statusプロパティで通信エラーのステータスを確認できます。

let request=new XMLHttpRequest();

request.onreadystatechange=()=>{
 if(request.readyState==4){
  console.log(request.status);
 }
}

request.open("GET", "./test.json", true);
request.send();

通信エラーのステータスの意味は次のとおりです。

  • 200:問題なく通信が成功した状態
  • 401:認証が必要なため通信できない状態
  • 403:アクセスが禁止されて通信できない状態
  • 404:情報が存在しないため通信できない状態
  • 500:サーバーの障害で通信できない状態
  • 503:サーバーに負荷がかかって通信できない状態

受信したデータを取得

responseTextプロパティから受信したデータを文字列で取得します。JSON.parse()は文字列をJSON形式に変換するメソッドです。

let request=new XMLHttpRequest();
request.onreadystatechange=()=>{
 if(request.readyState==4 && request.status==200){
   console.log(JSON.parse(request.responseText));
 }
}
request.open("GET", "./test.json", true);
request.send();

POSTでデータ通信

“POST”を使ってデータ送信を行い、結果データを受信します。
POSTsetRequestHeader()はPOSTするデータの形式を設定できるメソッドです。サーバに正しく情報を伝えるために設定します。
sendメソッドの引数にPOSTしたいパラメータを”変数=パラメータ”の形式で指定します。

let request=new XMLHttpRequest();

request.onreadystatechange=()=>{
if(request.readyState==4 && request.status==200){
console.log(request.responseText);
}
}

request.open("POST", "./test.php", true);
request.setRequestHeader("content-type", "application/x-www-form-urlencoded");
request.send("name=test");

test.phpのサンプルは次のとおりです。

<?php
 echo "名前は".$_POST["name"]."です";
?>