Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
実践編

トップページ
JavaScript実践編 - XMLHttpRequestの使い方(1)

XMLHttpRequestの使い方(1)

みなさまどうも。

これまでの記事で『HTTP通信』や『JSON』の解説が大体終わったので続きまして『Ajax』の要である『XMLHttpRequest』についてやっていきましょう。

今回はJavaScriptが多めになりますのでまずお手元に適当なフォルダ(ディレクトリ)を用意し、その中に『index.html』を用意しておいて下さい。

それと同時に『test.txt』ってファイルを作って『index.html』と同じ階層にぽんっと置いておいて下さい。

そしたら『index.html』に以下のソースコードをバシッとコピペし

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxてすと</title>
</head>
<body>
<script>
	// 今回はここにJS書きます。
</script>
</body>
</html>

『test.txt』にも以下の記述をバシッとコピペしてしまってください。

初音ミク

準備はOKでしょうか。

あと今回は『Ajax』で通信処理を書いていく感じになるのでローカルでウェブサーバーを動かす必要がどうしても出てきます。なのでちょいとお手数なのですがこちらの記事を参考しつつ『MAMP』を入れて頂きたいと思います。ドキュメンルートには先程作ったディレクトリを指定して下さい。

まあ『MAMP』じゃなくてもローカルでウェブサーバーが動いていたらなんでもOKなのでこの辺はお好みでどうぞ。

そしたら『index.html』の中のscript要素の中にJavaScriptをバシッと書いていきますね。

『Ajax』をするには最初に『XMLHttpRequest』を元とするオブジェクトを新たに作る必要がありますので『new』を使ってオブジェクトを生成します。以下のような感じですね。

var ajax = new XMLHttpRequest();

これで上記の『ajax』に必要な処理の詰め込みが完了します。そしたらその中に『.open()』ってメソッドが居るのでその子を使って以下のように記述します。

var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");

『.open()』の『()』の中に注目です。

第1引数には「リクエスト(通信)する際のメソッド」を指定します。こちらの記事にやった『GET』とか『POST』とかってやつですね。今回はただテキストデータを読み取るだけなので『GET』になります。

そして第2引数には通信先のパスを記述します。

これはいつも通りのパスの記法が使えますので、例えば当サイトのサーバーに置いてある『https://wp-p.info/reps/js-practice/samples/11_01/test.txt』のテキストデータが取りたいとなると以下のような感じになります。

var ajax = new XMLHttpRequest();

ajax.open("get", "https://wp-p.info/reps/js-practice/samples/11_01/test.txt");

ここまでは大丈夫でしょうか。

ここでちょっと間違いやすいポイントがあるのですが今『.open()』を使って通信時のメソッドとファイルの場所を指定しましたよね。

多分ほとんどの人が「この時点で通信処理が実行されてるのでは」と思いがちな気がするんですがこの時点だとまだ通信処理は走っていません。なんだか『open』って名前なので「ファイルを開いてるんだな！(*'▽'*)」って気がしてしまいますが全くもってそんな事はないのでご注意です。

じゃあ通信処理を走らせるにはどうするのというと以下のように『.send()』を記述します。

var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");
ajax.send(); // 通信させます。

これで通信が飛んだわけなんですがここでちょっと注意点があります。

実は『Ajax』はセキュリティの為、『クロスドメイン』した場合に制限がかかっています。『クロスドメイン』っていうのは例えば「『wp-p.info』なサイトの中で『google.com』にアクセスする場合」って感じですね。

なのでローカルウェブサーバーを仲介せずブラウザに『index.html』をそのまま表示させて『Ajax』しようとすると以下のようなエラーが出ます。

Failed to load file:///Users/xxx/Desktop/test/test.txt: Cross origin requests
... 以下省略

これはサーバー側の設定で回避できるのですがサーバー側の設定を入れるって事は何かしらのローカルウェブサーバーを動かさないといけないわけでつまり『Ajax』の実験とかをするには『MAMP』とかの環境が必須になっちゃうんですね。というわけで少々お手間になりますがお手元で実験される場合はローカルウェブサーバーを立ち上げてしまって下さい。

んで『クロスドメイン』じゃない状態で実行させた場合は『ajax.send();』って記述した瞬間に通信処理が走っています。しかし通信しただけだとあんま意味がありません。その通信結果を受け取らないといけませんね。

通信結果を受け取るにはどうするかというと『.addEventListener()』くんを使います。以下のような感じですね。

var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");
ajax.send(); // 通信させます。
ajax.addEventListener("load", function(){ // loadイベントを登録します。
	// ここに処理書きます。
}, false);

上記の場合ですと『new XMLHttpRequest()』な『ajax』に『.addEventListener()』くんをくっつければOKです。そして第1引数には『laod』を指定します。これで通信が完了したときに定義した関数を実行してくれる感じです。

そんでもって肝心の通信結果はどうやって受け取るんだぜーっていうと『.addEventListener()』の第2引数の関数内部で『this』を使えばOKです。以下のような感じですね。

var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");
ajax.send(); // 通信させます。
ajax.addEventListener("load", function(){ // loadイベントを登録します。
	console.log(this); // 通信結果を出力します。
}, false);

なーぜ『this』が通信結果になるのかというとそういう風に出来ているからでございますね。

そんでもって受け取った通信結果な『this』には色々と詰まっているわけなんですがその中で『this.response』っていう子に注目です。これを出力させるとこうなります。

var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");
ajax.send(); // 通信させます。
ajax.addEventListener("load", function(){ // loadイベントを登録します。
	console.log(this.response); // 通信結果を出力します。
}, false);

初音ミク

先程『test.txt』に記述した『初音ミク』が出力されていますね。HTMLを含めた全体図はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxてすと</title>
</head>
<body>
<script>
var ajax = new XMLHttpRequest();

ajax.open("get", "./test.txt");
ajax.send(); // 通信させます。
ajax.addEventListener("load", function(){ // loadイベントを登録します。
	console.log(this.response); // 通信結果を出力します。
}, false);
</script>
</body>
</html>

完成サンプルを見る

これでシンプルな『Ajax』はOKでございます。そこまでむつかしくなかったのではないでしょうか。

あと「こういうのは『Ajax』って呼ばないぜー」って方もいらっしゃると思いますがそこは人によってちょいちょい変わる部分なのでご愛嬌ってやつでございます。

さて、今回は『GET』でシンプルな処理を行った感じでしたね。続いての記事では『Ajax』で『POST』と通信エラーが出た場合の対応とかを色々やってみたいと思います。

ではではこの辺で失礼致します。

この記事は桜舞が執筆致しました。