Caution

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

JavaScript
実践編

トップページ
JavaScript実践編 - Ajax(XMLHttpRequest)について

Ajax(XMLHttpRequest)について

皆様どうもおはこんばんにちはです、いつも当サイトをご利用頂き誠にありがとうございます。

さて今回は『Ajax』の解説です。読み方は何種類かあるのですが多分「エイジャックス」と呼ばれる事が一般的なのではないかと思っております。多分みなさんも『Ajax』っていう言葉はどこかしらで聞いたことある予感でございます。

んで「こいつは一体何者なんだぜー」ってお話なんですが『Ajax』とは「Asynchronous Javascript + XML」の略語になり、著者の少ない語彙でむりやり訳すと「JavaScriptとXMLを使って非同期通信をしよう (・ω<)ﾃﾍﾍﾟﾛ」になります。

なんのこっちゃってお話ですね、なのでいつも通り細かくみていきましょう。

まず「？」ってなっちゃうのが『同期』と『非同期』って言葉だと思います。

この『同期』って言葉はIT業界やプログラミング業界だと「AとBが同じ状態になっている」という意味と「AとBの処理や通信のタイミングが合っている」という2つの意味で使われる事が多いです。

そして「具体的にどういう状況を指すの？」となるとこれは人によってだったり状況によってだったりプログラム言語だったりで少し意味合いが変わってくるんですね。

JavaScriptとかHTML周りとか『Ajax』あたりで『同期』って言われた場合は「閲覧者のブラウザで表示したりするデータを丸ごとサーバー側から貰ってそれをそのまま処理する」ってイメージで大体OKかなって思います。

んで逆に『非同期』になると「閲覧者のブラウザで表示したりするデータの一部をサーバー側からタイミングをズラしつつ貰って処理する」って感じになります。

これを具体的に見てみましょう。

まず『同期』の場合ですが、当サイトの『https://wp-p.info』に『index.html』が置いてあるとしましょう。その『index.html』には以下のソースコードが書いてあるとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすとー</title>
<body>

<p>てすとー</p>

</body>
</html>

超単純なHTMLですね。

それを閲覧者さんがブラウザで『https://wp-p.info』って打ち込むと以下のソースコードが返ってきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすとー</title>
<body>

<p>てすとー</p>

</body>
</html>

サーバーに置いてあるデータと全く同じものが受信されてますね。これが『同期』に該当します。皆様もご経験があるであろうシンプルなHTMLを置いてこにょこにょする処理は『同期』に該当する感じですね。

そんでもって『非同期』な『index.html』を『https://wp-p.info』のサーバーに置くとなるとこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすとー</title>
<body>

<p id="test"></p>

<script>
(function(){
	var ajax = new XMLHttpRequest();
	ajax.open("get", "./test.txt");
	ajax.send();
	ajax.addEventListener("load", function(){
		var html = document.getElementById("test");

		if(html) html.innerHTML = this.response;
	}, false);
})();
</script>

</body>
</html>

なにやらちょいとJavaScriptが書かれてますね。これを実行させたサンプルが以下です。

サンプルを見る

サーバー側に置かれた『index.html』とはちょっと違って『<p id="test"></p>』の中身に少し変化がありますね。

これは『Ajax』を使って同じ階層にある『test.txt』を読み取って『<p id="test"></p>』の中身に出力した感じになるのですが、これが「『非同期』な処理が組み込まれたHTMLページ」の一例になります。

上記のサンプルだと単純過ぎるのであんま『Ajax』を使うメリットが感じられないかもしれませんが、こういうパターン以外にも『Ajax』は様々な処理を構築する事ができるので使いこなせるようになるととっても強力です。

そして『Ajax』は「最新のJavaScriptのエンジンに搭載された新機能であるなんて事は1ミリもない」という事も軽く頭の片隅に置いておいて下さい。実は『Ajax』に使われている非同期処理と同じような機能は、IE6に組み込まれていた『ActiveX』という処理群の中ですでに実装されていたりします。

ただ昔はそこまで充実したネット環境が提供されていなかったり非同期処理の利便性が認知されていなかったりJavaScriptのセキュリティ状態が非常に甘くて「JavaScriptをオフにした状態でネットサーフィンをする」という方が大多数だったりで非同期処理を作ろうという人は非常に少なかったんですね。

その後ネット環境の充実やブラウザが進化したりして、さらに2005年頃にGoogleさんがGoogle Mapを提供したことで非同期処理の利便性がものすごく話題となり、既存の技術を組み合わせた非同期処理に『Ajax』という名前が付けられ今ではウェブサービスを作るにあたって必須項目と言われるほどの大出世となりました。

『Ajax』の概要は大体こんな感じになりますね。もし超高度な『Ajax』の利用例を見たい、ってなったらやっぱりGoogle Mapさんを見に行くが良いかもです。あれは地図データとかを『Ajax』を使ってシームレスに表示させてる感じになりますので非常に素晴らしいわけでございます。

続いての記事では『Ajax』を使うにあたってある程度の通信系の知識が必要になってくるのでそれを一緒に見ていくことにしましょう。

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

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