はじめに
AJAX の入門的チュートリアル

Asynchronous JavaScript + XML (AJAX) はそれ自身がある種の技術というわけではありませんが、Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。組み合わされる技術は、HTMLXHTMLCascading Style SheetsJavaScriptThe Document Object ModelXMLXSLT、そして、XMLHttpRequest object です。これらの技術が AJAX のモデルで組み合わされると、Web アプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。

Ajax の X は XML を表していますが、JSON は今日より軽量化や JavaScript のような多くの利点があるため、XML よりも多く使われています。JSON と XML の両方は、Ajax モデルの情報をパッケージ化するために使用されます。

ドキュメント

はじめに
この記事では Ajax の基本について説明し、始めるために2つの簡単な実例を紹介します。
XMLHttpRequest API の使用
XMLHttpRequest API は、Ajax のコアです。この記事では、次のような Ajax 技術の使用方法について説明します。
Fetch API
Fetch API はリソースをフェッチするためのインターフェイスを提供します。XMLHTTPRequest を使用した人なら誰にでも馴染みのあるように見えますが、この API はより強力で柔軟な機能セットを提供します。
Server-sent events
伝統的に、Webページは新しいデータを受信するためにサーバにリクエストを送信しなければなりません。つまり、ページはサーバにデータを要求します。サーバが送信したイベントでは、サーバがメッセージを Web ページにプッシュすることで、いつでも Web ページに新しいデータを送信することができます。これらの着信メッセージは、Web ページ内のイベント+データとして扱うことができます。参照:サーバー送信イベントの使用
純粋な Ajax ナビゲーションサンプル
この記事では、純粋な Ajax Web サイトの3つのページから構成された実用的な (最小限の) 例を提供します。
バイナリデータの送信と受信
XMLHttpRequest オブジェクトの responseType プロパティを設定して、予想されるレスポンスタイプをサーバから変更することができます。可能な値は空の文字列 (デフォルト)、 "arraybuffer""blob""document""json""text" です。response のプロパティには、responseType に従って、ArrayBufferBlobDocumentJSON、または string のようなエンティティボディが含まれます。この記事では、Ajax の I/O 技術をいくつか紹介します。
XML
Extensible Markup Language (XML) は、特定の目的のマークアップ言語を作成する W3C 推奨の汎用マークアップ言語です。これは SGML の単純化されたサブセットであり、多くの異なる種類のデータを記述することができます。その主な目的は、異なるシステム、特にインターネットを介して接続されたシステム間でのデータの共有を容易にすることです。
JXON
JXON はロスのない Javascript XML Object Notation の略で、XML を使用して Javascript オブジェクトツリー (JSON) の表現を定義する総称です。
Parsing and serializing XML
文字列、ファイル、または JavaScript を使用して XML 文書を解析する方法、XML 文書を文字列、Javascript Object Tree (JXON) またはファイルにシリアル化する方法
XPath
XPath は XML Path Language (XML パス言語) の略で、XML 文書のさまざまな部分をアドレス指定する (指す) 柔軟な方法を提供する非 XML 構文を使用します。これと同様に、ドキュメント内のアドレス指定されたノードをテストしてパターンに一致するかどうかを判断することもできます。
FileReader API
FileReader API を使用すると、Web アプリケーションは、File オブジェクトまたは Blob オブジェクトを使用して、読み取るファイルまたはデータを指定して、ユーザーのコンピュータに格納されているファイル (または生データバッファ) の内容を非同期で読み取ることができます。File オブジェクトは <input> 要素、ドラッグアンドドロップ操作の DataTransfer オブジェクト、または HTMLCanvasElementmozGetAsFile() API を使用してファイルを選択した結果として返される FileList オブジェクトから取得できます。
XMLHttpRequest における HTML
W3C の XMLHttpRequest 仕様では、もともと XML 解析のみをサポートしていたXMLHttpRequest に HTML 解析サポートが追加されています。この機能を使用すると、Web アプリケーションは XMLHttpRequest を使用して解析された DOM として HTML リソースを取得できます。
その他の資料
その他の参考になる Ajax リソースです。

すべてを見る...

あわせて参照

代替 Ajax テクニック
Ajax のほとんどの記事は、XMLHttp をそのような通信を実現する手段として使用することに重点を置いていますが、Ajax のテクニックは XMLHttp に限定されていません。他にもいくつかの方法があります。
Ajax: Web アプリケーションへの新しいアプローチ
adaptive path の Jesse James Garrett は 2005年 2月にこの記事を書いて、Ajax とその関連概念を紹介しました。
A Simpler Ajax Path
「XMLHttpRequest オブジェクトを利用して、Web アプリケーションをデスクトップアプリケーションのように動作させ、ユーザー入力を収集するための Web フォームなどの従来のツールを使用するのは非常に簡単です」
Ajax についての間違い
Alex Bosworth はこの記事を書いて、Ajax アプリケーション開発者の間違いのいくつかを概説しています。
サンプル付きの チュートリアル
 
XMLHttpRequest の仕様
W3C ワーキングドラフト

コミュニティ

ツール

全てを見る...

使用例

ドキュメントのタグと貢献者

最終更新者: silverskyvicto,