Ajax
- なぜ生まれた?
- クリックのたびにサーバーがページ全体を作り直して返し、利用者はそのたびに待たされた。
- 何を解決した?
- 画面は残したまま、JavaScript が裏でデータだけを取りに行き、必要な部分を書き換えた。
- 何を残した?
- 画面の状態を JavaScript が抱え、戻るボタン・ブラウザの違い・大きなコードの保守が課題になった。
- 登場
- 状態
- 現役
Ajax という考え方が無かったころ
Section titled “Ajax という考え方が無かったころ”なぜクリックのたびにページ全体を読み直すのが当たり前だったのか
Section titled “なぜクリックのたびにページ全体を読み直すのが当たり前だったのか”Web はもともと、文書を開き、リンクをたどって次の文書を開く仕組みです。アプリケーションもその形で作られました。 ボタンを押すとブラウザがサーバーに要求を送り、サーバーは処理をして、次の画面になる HTML のページを丸ごと返します。 CGI のプログラムも PHP のページも、要求のたびにページ全体を作り直して返すのが基本でした。
サーバーが処理しているあいだ、利用者は待つしかありません。 1995年からはブラウザの中で JavaScript が動きましたが、サーバーと話す手段は、フォームの送信やリンクで次のページを読み込むことでした。 2004年11月の時点で Apple の開発者向けサイトにあった解説は、この「要求し、返事を受け、読み直す」モデルは、Web サイトがアプリケーションに近づくほど扱いにくくなると書いています。
Outlook Web Access のチームで
Section titled “Outlook Web Access のチームで”当時 Microsoft にいた Alex Hopmann は、2006年の時点で自分のサイトに公開していた回想で、XMLHttpRequest の元になった部品ができた場面を書いています。日付の記録は無く、本人の推定では1998年の終わりごろです。
Hopmann は、メールサーバー Exchange 2000 のチームにいました。ブラウザでメールを読む Outlook Web Access(OWA)の前の版は、サーバーの規模の拡大と性能に大きな問題を抱えていました。 新しい OWA の候補の1つは DHTML で凝った画面を作るもので、Hopmann はその試作に圧倒されます。 ただしその試作は “basically doing hacky form-posts back to the server”(基本的には、その場しのぎのフォーム送信でサーバーに返していた)もので、前の版と同じ問題を抱えていました。
“That weekend I startup up Visual Studio and whipped up the first version of what would become XMLHTTP.” (その週末、Visual Studio を立ち上げて、のちに XMLHTTP になるものの最初の版をさっと作った)
最初の版は非同期の仕組みもなく粗いものでしたが、DHTML 版から Exchange 2000 の WebDAV・XML の機能と話せるようになり、開発が一気に進んだと振り返っています。
Ajax という考え方
Section titled “Ajax という考え方”名前が付いた日
Section titled “名前が付いた日”2005年2月18日、デザイン会社 Adaptive Path の Jesse James Garrett は「Ajax: A New Approach to Web Applications」を公開しました。 読者に Google Suggest と Google Maps を触らせ、“no waiting for pages to reload”(ページの読み直しを待たない)ことを示してから、こう問います。
“Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server?” (画面がいったん読み込まれたなら、アプリケーションがサーバーから何かを必要とするたびに、利用者の操作が止まらなければならない理由があるだろうか)
Garrett の説明では、利用者とサーバーのあいだに JavaScript で書いた “Ajax engine” を置きます。操作はエンジンの呼び出しになり、サーバーに用があるときだけエンジンが裏で(非同期に)要求を送るので、そのあいだも利用者は操作を続けられます。
| 役割 | Garrett が挙げた技術 |
|---|---|
| 見た目 | XHTML と CSS |
| 表示の書き換えと操作 | DOM |
| データのやり取りと加工 | XML と XSLT |
| 非同期のデータ取得 | XMLHttpRequest |
| 全体をつなぐもの | JavaScript |
Ajax は1つの技術ではなく、すでにある技術を組み合わせる作り方の名前です。 3月13日に足した Q&A で、Garrett は名付けた理由を、顧客と話すのに「Asynchronous JavaScript+CSS+DOM+XMLHttpRequest」より短いものが要ったからだと答え、“Neither Adaptive Path nor Google invented Ajax.”(Adaptive Path も Google も Ajax を発明していない)とも書いています。 Hopmann も2007年1月の追記で、Ajax は DHTML、XMLHTTP、それらを結びつける作り方の寄せ集めで、自分は XMLHTTP の部分を埋めたと書きました。
この記事は、名前が付いた2005年2月18日を登場としています。 XMLHTTP は1999年に Internet Explorer 5 で出荷され、隠したフレームでサーバーと通信する手法も名前より前からありました。
なぜ「Ajax」の名前は2005年なのに、XMLHttpRequest は1999年からあったのか
Section titled “なぜ「Ajax」の名前は2005年なのに、XMLHttpRequest は1999年からあったのか”Garrett は、非同期の通信の手法は何年も前からあるのに何が新しいのか、という問いに、Web の操作のモデルを変えるために実際のアプリケーションで目立って使われていることだ、と答えています。技術と、その使い方の理解が育つのに時間がかかった、という見方です。
部品を作った側の Hopmann は、同じ追記で “At Microsoft we totally blew the opportunity to evangelize and get out in front of this approach back in 1999.”(Microsoft は1999年に、この作り方を広めて先頭に立つ機会をすっかり逃した)と書きました。どちらも当事者の後からの評価です。
なぜ Gmail や Google Maps のころに急に注目されたのか
Section titled “なぜ Gmail や Google Maps のころに急に注目されたのか”2004年4月1日、Google は Gmail の試験公開を発表しました。 12月10日には、入力しているあいだに検索語の候補を出す Google Suggest が公開されます。2005年2月8日の Google Maps の紹介は、地図をドラッグすれば隣の範囲が表示され、“there’s no wait for a new image to download”(新しい画像のダウンロードを待たない)と書きました。
Garrett は、Google がこの1年に出した主な製品をすべて Ajax のアプリケーションとして挙げ、実験室だけの技術ではない証拠だと書いています。 Hopmann は2006年の時点で、人々が XMLHTTP に気づいたのは Google Suggest のソースを見て仕組みを調べたときで、先に使っていた Gmail は JavaScript が複雑ですぐには気づかれなかった、と見ています。Gmail の作りは2000年に出荷した OWA の大まかな設計を “appears to follow”(なぞっているように見える)とも書きました。
研究室の試作ではなく実際の製品で、ページを読み直さない操作に触れられたことが、名前が受け入れられる下地になったと、2人の書いたものからは読み取れます。
Ajax を実装した技術
Section titled “Ajax を実装した技術”XMLHTTP が Internet Explorer に入るまで
Section titled “XMLHTTP が Internet Explorer に入るまで”OWA の前提は、ブラウザのあるどのコンピュータからでもメールにたどり着けることでした。部品を ActiveX のコントロールとして配ると、利用者にダウンロードさせることになります。
“If we needed to download ActiveX controls, it was going to ruin the basic premise of the product” (ActiveX のコントロールをダウンロードさせる必要があるなら、製品の前提が崩れてしまう)
そこで、ブラウザそのものに入れることにします。 コードは OWA チームの Shawn Bracewell が書き直し、非同期の処理やエラー処理を足しました。 Internet Explorer はそのとき、リリース前の最後のベータである beta 2 の数週間前でした。Hopmann は Internet Explorer と一緒に出荷される XML のライブラリ MSXML に入れる話を XML チームの Jean Paoli とまとめ、ベータの1週間前にコードを入れました。
1999年3月18日、Microsoft は Internet Explorer 5 の “immediate worldwide availability”(世界での即日提供)を発表します。IE チームのブログも、XMLHTTP は Internet Explorer 5.0 で ActiveX のコントロールとして初めて世に出たと書いています。
Ajax は本当に XML を使っていたのか
Section titled “Ajax は本当に XML を使っていたのか”名前の XML は、中身から来たものではありません。Hopmann は、XMLHTTP は “mostly about HTTP”(ほとんど HTTP のためのもの)で XML とは特に関係がなく、MSXML に入れて出荷するのがいちばん簡単な口実だったので、名前に XML を “cram”(詰め込む)必要があったと書いています。
Ajax の名前も “Asynchronous JavaScript + XML” の略で、Garrett はエンジンが “usually using XML”(たいていは XML を使って)要求すると書きました。 ただ Q&A では、例に挙げた Google の製品には XML を使わないものもあるという指摘に、JavaScript Object Notation(JSON)などでもよいと答えています。 2005年の時点でも、データの形は XML に限られていませんでした。 2026年10月の WHATWG の仕様は、“The name XMLHttpRequest is historical and has no bearing on its functionality.”(XMLHttpRequest という名前は歴史的なもので、機能とは関係がない)と書いています。
ブラウザごとの入り口
Section titled “ブラウザごとの入り口”ほかのブラウザは、同じ働きの XMLHttpRequest を自前で実装しました。2002年5月15日の Netscape 6.2.3 の修正の一覧には XMLHttpRequest のセキュリティ問題があり、2002年には Mozilla 系のブラウザにもあったことがわかります。
2004年2月には Apple の Maciej Stachowiak が、KHTML の開発者のメーリングリストで、Safari 1.2 の実装を試したサイトに Orkut を挙げています。
| ブラウザ | 使う入り口 |
|---|---|
| Internet Explorer 5・6 | new ActiveXObject("Microsoft.XMLHTTP") |
| Mozilla 系・Safari 1.2・Opera 8(MDN の互換表) | new XMLHttpRequest() |
| Internet Explorer 7 | new XMLHttpRequest() も使える(ActiveX の版も残る) |
コードで見る違い
Section titled “コードで見る違い”新着メールの件数をサーバーに尋ね、ページを読み直さずに表示する処理で比べます。どれもこの記事のための作例です。 XMLHttpRequest が行き渡る前は、見えない iframe にサーバーの返事を読み込ませる方法がありました(先の Apple の解説もこの方法です)。
<span id="count">?</span> 件<a href="count.cgi" target="hidden">新着を確かめる</a><!-- display:none だと Netscape 6 が無視するので、大きさを 0 にする --><iframe name="hidden" src="blank.html" style="width:0px; height:0px; border:0px"></iframe><script type="text/javascript">function showCount(n) { document.getElementById('count').innerHTML = n;}</script><!-- count.cgi は次のページを返す:<script>window.parent.showCount(3);</script> -->XMLHttpRequest の側は、2006年の W3C の草案が当時の実装に共通するものとしてまとめた範囲で書いています(Internet Explorer 5 の当時の書き方を示す資料は見つけられませんでした)。
function createRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); // Mozilla・Safari・IE7 } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); // IE5・IE6 } return null;}function checkCount() { var req = createRequest(); req.onreadystatechange = function () { if (req.readyState == 4 && req.status == 200) { document.getElementById('count').innerHTML = req.responseText; } }; req.open("GET", "count.cgi", true); // true で非同期 req.send(null);}iframe の方法では、サーバーは呼び出し元の関数を呼ぶページを返し、読み込みが履歴にも残ります(Apple の解説は、戻るボタンや再読み込みが効かなくなることがあると書いています)。
XMLHttpRequest なら、サーバーは件数の 3 だけを返せばよく、受け取ったあとの処理も同じスクリプトに書けます。
残した課題と、次に来たもの
Section titled “残した課題と、次に来たもの”大きくなるほど難しくなる
Section titled “大きくなるほど難しくなる”Garrett は Q&A で、Ajax のアプリケーションが作りやすいとは限らないと答えています。クライアントで複雑な JavaScript を動かすので、よい開発の道具とフレームワークが要るという見立てです。 戻るボタンやアクセシビリティ、JavaScript を切った利用者への対応にも、まとめて “maybe”(かもしれない)と答え、取り組みはこれからだとしました。 OWA を作った Hopmann も2006年の時点で、DHTML の作り方はプログラミングのモデルと保守が “really difficult as the app got bigger”(アプリケーションが大きくなるにつれ本当に難しかった)と書いています。
ブラウザの違いと、標準の仕様
Section titled “ブラウザの違いと、標準の仕様”2006年4月5日の W3C の最初の Working Draft は、XMLHttpRequest の実装は “not completely interoperable”(完全には互換でない)とし、既存の実装から互換のある最小限の機能をまとめ、ブラウザごとのコードなしで使えるようにすることを目標にしました。 ブラウザの違いを吸収するライブラリの jQuery と、画面の切り替えまで JavaScript が受け持ち、URL や履歴の扱いが課題になる SPA という作り方は、それぞれ別の記事で扱います。
XMLHttpRequest の使いにくさと fetch
Section titled “XMLHttpRequest の使いにくさと fetch”2015年3月10日、Mozilla Hacks は、10年以上使われてきた XMLHttpRequest を “not a very nice API”(あまりよい API ではない)と書きました。 入力・出力・状態を1つのオブジェクトで扱ってイベントで追う作りが、JavaScript が力を入れはじめた Promise の書き方と合わない、という理由です。 記事は、これらの問題のほとんどを直すものとして Fetch API を、Firefox 39 の Nightly と Chrome 42 の開発版で使えると紹介しました。
2026年10月時点の立ち位置
Section titled “2026年10月時点の立ち位置”XMLHttpRequest は WHATWG の Living Standard で保守されています(2026年10月29日に確かめた最終更新は10月28日)。 仕様の来歴によれば、もとは何年も前の Microsoft の実装で、2006年に W3C へ移りました。W3C の版は2016年10月6日に作業を終え、Living Standard を参照するよう案内しています。
後を継いだ fetch も WHATWG の Living Standard です(最終更新は2026年10月19日)。結果をイベントと readyState で追う XMLHttpRequest に対し、fetch() は Promise を返します。
caniuse は fetch を “A modern replacement for XMLHttpRequest”(XMLHttpRequest に代わる現代のもの)と紹介し、Chrome 42、Firefox 39、Safari 10.1、Edge 14 以降で使えると載せています。
画面を残したまま裏でデータを取りに行く作り方は、部品を XMLHttpRequest から fetch に替えながら、2026年10月の時点でも主要なブラウザが標準で支えています。 「Ajax」という言葉がいまどれだけ使われているかを示す数字は、見つけられませんでした。
- Web のアプリケーションは、操作のたびにサーバーがページ全体を作り直して返す形で作られ、利用者はそのたびに待たされていました。
- 1998年ごろ、Exchange 2000 のチームの Hopmann がページを読み直さずにサーバーと話す部品を作り、1999年の Internet Explorer 5 に MSXML の一部として入れました。名前の XML はそのための口実でした。
- 2005年2月18日、Garrett が Google の製品に見られるこの作り方を Ajax と名付けました。名付けたのであって発明したのではない、と本人が書いています。
- 画面の状態を JavaScript が抱えることで、大きなコードの保守、ブラウザの違い、戻るボタンの扱いが課題になり、標準の仕様、ライブラリ、SPA、fetch が続きました。
- 2026年10月時点で、XMLHttpRequest と fetch はどちらも WHATWG の Living Standard で保守され、caniuse は fetch を XMLHttpRequest に代わるものとして紹介しています。
年表
Microsoft が Internet Explorer 5 を公開する。XMLHTTP は MSXML の ActiveX コントロールとして入っていた news.microsoft.com
Mozilla 0.9.4 ベースの Netscape 6.2.3 が出る。修正の一覧に XMLHttpRequest のセキュリティ問題がある www-archive.mozilla.org
Google が Gmail の試験公開を発表する google.com
入力中に検索語の候補を出す Google Suggest が Google Labs で公開される googleblog.blogspot.com
地図をドラッグして隣の範囲を見られる Google Maps が紹介される googleblog.blogspot.com
Jesse James Garrett が「Ajax: A New Approach to Web Applications」で、この作り方を Ajax と呼ぶ web.archive.org
W3C が XMLHttpRequest の最初の Working Draft を出す(編集は Anne van Kesteren・Dean Jackson) w3.org
Mozilla Hacks が、XMLHttpRequest の問題を直すものとして Fetch API を紹介する hacks.mozilla.org
W3C 版の XMLHttpRequest が Working Group Note で作業を終え、WHATWG の Living Standard を参照するよう案内する w3.org
系譜
この技術が出てくる物語
同時代の出来事
- jQuery
- Amazon Web Services が Amazon S3 を公開 press.aboutamazon.com
出典
- 一次Ajax: A New Approach to Web Applications(Jesse James Garrett, Adaptive Path, 2005-02-18) adaptivepath.com 保存版
- 一次The story of XMLHTTP(Alex Hopmann。2006年6月時点の版) alexhopmann.com 保存版
- 一次The Story of XMLHTTP(Alex Hopmann。追記を含む現在の版) alexhopmann.com 保存版
- 一次Microsoft Delivers World’s Fastest Modern Browser Available Today(Microsoft, 1999-03-18) news.microsoft.com
- 一次Native XMLHTTPRequest object(IEBlog, Sunava Dutta) learn.microsoft.com
- 一次Mozilla の年表(2003-01-01 時点) www-archive.mozilla.org
- 一次khtml-devel: patch: stub implementation of XMLHttpRequest(Maciej Stachowiak, 2004-02-23) mail.kde.org
- 一次Remote Scripting with IFRAME(Apple Developer Connection。2004年11月時点) developer.apple.com 保存版
- 一次Google Gets the Message, Launches Gmail(2004-04-01) google.com 保存版
- 一次I've got a suggestion(Official Google Blog, 2004-12-10) googleblog.blogspot.com
- 一次Mapping your way(Official Google Blog, 2005-02-08) googleblog.blogspot.com
- 一次The XMLHttpRequest Object(W3C Working Draft, 2006-04-05) w3.org
- 一次XMLHttpRequest Level 1(W3C Working Group Note, 2016-10-06) w3.org
- 一次XMLHttpRequest Living Standard(WHATWG) xhr.spec.whatwg.org
- 一次This API is so Fetching!(Mozilla Hacks, 2015-03-10) hacks.mozilla.org
- 一次Fetch Living Standard(WHATWG) fetch.spec.whatwg.org
- 二次MDN browser-compat-data(api/XMLHttpRequest) raw.githubusercontent.com
- 二次Can I use:Fetch caniuse.com