HTMLページでJavaScriptを用いたajax通信のサンプルを紹介します。
ajax通信GETサンプル
サンプルソース
まずはGETメソッドでのajax通信の実際のソースコードを見てみましょう。
ajax通信でリクエストし、レスポンスをログに書き出すだけの処理です。
function ajaxSample() {
var x=new XMLHttpRequest();
// 1.ajax通信のレスポンスが返ってきたときの処理を定義
x.onreadystatechange=function(){
if(x.readyState==4){
if(x.status == 200) {
var res = x.responseText;
console.log(res);
} else {
console.log('ajax Error');
}
}
}
// 2.ajax通信の設定
x.open('GET',[URL]);
// 3.ajax通信実行
x.send();
}
解説
1.ajax通信のレスポンスが返ってきたときの処理を定義
まず、ajax通信が完了した際に行う処理について定義します。
これは、XMLHttpRequestのonreadystatechangeに関数を定義することで実現できます。
onreadystatechangeはイベントハンドラで、XMLHttpRequestのreadyState属性が変化するたびに呼ばれます。
つまり、通信が完了し、レスポンスを受け取った時もこのイベントハンドラが呼び出されます。
なので、ここに通信完了時に実施したい処理を定義することで、通信完了後に自動的に処理を行ってくれるようになります。
if(x.readyState==4){
x.readyState==4 は通信が完了した時を意味します。
readyStateは以下のように定められています。
| 0：UNSENT | クライアントは作成済み。open() はまだ呼ばれていない。 |
|---|---|
| 1：OPENED | open() が呼び出し済み。 |
| 2：HEADERS_RECEIVED | send() が呼び出し済みで、ヘッダーとステータスが利用可能。 |
| 3：LOADING | ダウンロード中。responseText には部分データが入っている。 |
| 4：DONE | 操作が完了した。 |
if(x.status == 200) {
2.ajax通信の設定
x.open('GET',[URL]);
第一引数でHTTPメソッド、第二引数でリクエスト先のURLを指定しています。
URLはhttp、httpsどちらも指定可能です。
3.ajax通信実行
以下でajaxリクエストを開始できます。
x.send();
「from origin 'null' has been blocked by CORS policy～」エラーが発生する
ajax通信を実施した時に、以下のようなエラーが発生することがあります。
Access to XMLHttpRequest at '[URL]' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
これはリクエスト先のサーバにCORSの許可が設定されていないためです。
異なるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
これを回避するためには、以下の方法を取る必要があります。
・リクエスト先サーバにCORS許可を設定してもらう
・クライアントからではなく、サーバサイドから通信を行う
ajax通信POSTサンプル
POST通信をする場合は、ボディにデータを埋め込んで使用することがほとんどだと思います。
リクエストボディにデータを埋め込むサンプルも以下に紹介しておきます。
var x=new XMLHttpRequest();
x.onreadystatechange=function(){
if(x.readyState==4){
if(x.status == 200) {
var res = x.responseText;
console.log(res);
} else {
console.log('ajax Error');
}
}
}
x.open('POST', [URL]);
// ヘッダーに値を設定
x.setRequestHeader("HeaderVal1", 'val1');
x.setRequestHeader("HeaderVal2", 'val2');
// リクエストボディに値を設定
var data = {
data1: 'data1'
data2: 'data2'
data3: 'data3'
};
x.send(JSON.stringify(data));
同期通信のサンプル
XMLHttpRequestオブジェクトでは、同期通信も可能です。
同期通信とは、レスポンスが返ってくるまで処理を停止して待つことを指します。
openメソッドの第三引数(async)にfalseを設置することで、同期通信を実施することができます。
レスポンスが無いとその先の処理を進められない場合などは、こちらを使用するといいでしょう。
function sampleAjaxSync() {
var x=new XMLHttpRequest();
x.open('GET', [URL], false); // 第三引数(async)にfalseを設定する
x.send();
if(x.status === 200) {
var res = x.responseText;
var res = x.responseText;
console.log(res);
} else {
console.log('ajax(Sync) Error');
}
}
fetchAPIを使用して実装することも可能
ajaxをサポートするAPIとして新しくfetchというものもあるようです。
現状いくつかの問題点はあるようですが、今後はこれが標準になっていくかもしれません。
参考
その他、XMLHttpRequestについての詳細な仕様は、公式ドキュメントを参照ください。