はじめに
JavaScript入門講座の第十六弾として、Ajax 入門、Ajaxとは？、非同期通信、仕組、使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
- Ajaxとは？
- 同期通信と非同期通信とは？
- Ajax プログラミングで頻繁に利用されるXMLHttpRequest オブジェクトとは？
- XMLHttpRequestオブジェクトのプロパティ
- XMLHttpRequestオブジェクトのメソッド
- XMLHttpRequestオブジェクトを使った簡単な例
JavaScript入門講座（15）では、JavaScriptでJSONを使う方法について解説してきました。
ここでは、Ajax 入門、Ajaxとは？、非同期通信、仕組、使い方について深堀していきます。
Ajaxとは？
Ajax(エイジャックス、アジャックスと読む）とは、Asynchronous JavaScript + XMLの略で、XMLデータを非同期通信でサーバーとやり取りする（通信）することを言います。
Ajaxを利用している有名なものに、Gogle Mapの地図内のズームアップや移動など、Google Suggestによるキーワード候補の提示などで見ることができます。
Ajaxは、Jesse James Garrett氏により2005年2月に発表した論文中ではじめてつかわれた用語で、Google Map、Google サジェストで利用されていることを解説し、それが広まってAjaxが良く利用されるようになったようです。
当初は、データのやり取りはXMLが多かったようですが、現在はJSON形式でのやり取りが多いようです。
それでは、通常の通信である同期通信とAjaxが用いてる非同期通信について深堀してみましょう。
同期通信と非同期通信
今まで話したことでおぼろげに同期通信と非同期通信がお分かりになったと思いますが、違いについて表にまとめて見ました。
| 項 目 | 非同期通信 | 同期通信 |
| リクエストに対する応答がなくとも処理が可能 | ○ | × |
| やり取り通信量 | 少ない | 多い |
| ユーザーへの利便性 | ○ | × |
| プログラムの複雑さ | 複雑 | 比較的簡単 |
| ブラウザーによる違い | ある | 比較的ない |
Ajax プログラミングで頻繁に利用されるXMLHttpRequest オブジェクト
XMLHttpRequest (XHR) オブジェクトは、JavaScript言語で非同期通信を行うための組み込みオブジェクトであり、ページ全体を更新する必要なしに、データを受け取ることができるために、作業を中断させることなく、ウェブページの一部を更新することが可能となります。
XMLHttpRequest オブジェクトのプロパティとメソッドを次に載せておきます。
なお、XMLHttpRequest (XHR) オブジェクトのプロパティやメソッドなどはMDN Web Docsから引用しました。
XMLHttpRequestオブジェクトのプロパティ
XMLHttpRequestオブジェクトのプロパティには次のようなものがあります。
| プロパティ名 | 意 味 | |
| XMLHttpRequest.onreadystatechange | event handler で、これは readyState 属性が変化する度に呼び出されます。 |
|
| XMLHttpRequest.readyState | 読取専用、リクエストの状態を unsigned short で返します。 |
|
XMLHttpRequest.response |
読取専用、リクエストのエンティティ本文を含む ArrayBuffer, Blob, Document, JavaScript オブジェクト, DOMString の何れかを、 XMLHttpRequest.responseType の値に応じて返します。 |
|
| XMLHttpRequest.responseText | 読取専用、リクエストに対するレスポンスがテキスト形式で入った DOMString を返すか、リクエストが失敗した場合や、まだ送信されていない場合は null を返します。 |
|
XMLHttpRequest.responseType |
レスポンス型を定義する、列挙型の値です。 | |
| XMLHttpRequest.responseURL | 読取専用、レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。 | |
| XMLHttpRequest.responseXML | 読取専用、リクエストに対するレスポンスが入った Document を返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は null を返します。 |
|
| XMLHttpRequest.status | 読取専用、リクエストに対するレスポンスのステータスを unsigned short で返します。 |
|
| XMLHttpRequest.statusText (en-US) | 読取専用、HTTP サーバーから返ってきたレスポンス文字列が入った DOMString を返します。 XMLHTTPRequest.status とは異なり、("200 OK" のように) レスポンスメッセージの完全な文が含まれています。 |
|
XMLHttpRequest.timeout |
リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、 unsigned long 型の値です。 |
|
| XMLHttpRequestEventTarget.ontimeout | リクエストがタイムアウトする都度呼び出される event handler。 | |
| XMLHttpRequest.upload | 読取専用、アップロードプロセスを表す XMLHttpRequestUpload です。 | |
| XMLHttpRequest.withCredentials (en-US) | Boolean で、サイト間の Access-Control リクエストでクッキーや認証ヘッダーなどの資格情報を使用するかどうかを示します。 | |
XMLHttpRequestオブジェクトのメソッド
XMLHttpRequestオブジェクトのメソッドには次のようなものがあります。
| メソッド名 | 意 味 | |
| XMLHttpRequest.abort() | リクエストがすでに送信されている場合、リクエストを中止します。 | |
| XMLHttpRequest.getAllResponseHeaders() | CRLF で区切られた文字列として、すべてのレスポンスヘッダを返します。レスポンスを何も受け取らなかった場合は null を返します。 | |
| XMLHttpRequest.getResponseHeader() | 指定したヘッダ文を含む文字列を返します。レスポンスを受信していない、またはレスポンス中に指定したヘッダが存在しない場合は null を返します。 | |
| XMLHttpRequest.open() | リクエストを初期化します。このメソッドは JavaScript から使用するようにしてください。ネイティブコードからの初期化には、代わりに openRequest() を使用するようにしてください。 | |
| XMLHttpRequest.overrideMimeType() (en-US) | サーバーから返ってくる MIME タイプを上書きします。 | |
| XMLHttpRequest.send() | リクエストを送信します。 | |
| XMLHttpRequest.setRequestHeader() | HTTP リクエストヘッダーの値を設定します。 setRequestHeader() は open() の後、および send() の前に呼び出さなくてはいけません。 | |
XMLHttpRequestオブジェクトを使った簡単な例
ここでは、簡単な例を紹介します。
JavaScriptをVSコード内で書いているホルダーに「test.txt」と言うファイルを作り、それにXMLHttpRequestを使ってアクセスし、「テキストの取得」ボタンクリックすることにより、テキストデータを取得して、コンソールに表示させてみます。
先ず、test.txtの内容は、次のように入れました。
こんにちは！
わたしはエイじーです。
これからも宜しく。
そして、書いたプログラムコードを次に示します。
<button>テキストの取得</button>
<script>
// ボタン（テキストの取得）がクリックされたら、test.txtのテキストを取得
document.querySelector('button').onclick=function(){
obReq.open('GET','test.txt');
obReq.send();
}
//変数obReqにXMLHttpRequestを宣言したものを代入
const obReq=new XMLHttpRequest();
// readyStatで通信が終了(4)の場合に、オブジェクトobReq内のテキストをコンソールに出力
obReq.onreadystatechange=function(){
if(obReq.readyState===4){
console.log(obReq.responseText);
}
}
</script>
実際に上述のコードを書き、「テキストを取得」ボタンをクリックすると、コンソールにtest.txtの内容が表示されることを確認してください。
わりに
何だったでしょうか？
Ajaxとは？、同期通信と非同期通信とは？、Ajax プログラミングで頻繁に利用されるXMLHttpRequest オブジェクトとは？、XMLHttpRequestオブジェクトのプロパティ、XMLHttpRequestオブジェクトのメソッド、XMLHttpRequestオブジェクトを使った簡単な例などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント