From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/guide/ajax/index.html | 79 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/ja/web/guide/ajax/index.html (limited to 'files/ja/web/guide/ajax/index.html') diff --git a/files/ja/web/guide/ajax/index.html b/files/ja/web/guide/ajax/index.html new file mode 100644 index 0000000000..c28166501d --- /dev/null +++ b/files/ja/web/guide/ajax/index.html @@ -0,0 +1,79 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - DOM + - JavaScript + - References + - XML + - XMLHttpRequest +translation_of: Web/Guide/AJAX +--- +
はじめに
+AJAX 入門
+ +
+

Asynchronous JavaScript and XML (AJAX) はそれ自体がある種の技術というわけではありませんが、 Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。組み合わされる技術は、HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, そして最も重要なものは {{domxref("XMLHttpRequest")}} オブジェクトです。
+ これらの技術が AJAX のモデルで組み合わされると、ウェブアプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。

+ +

Ajax の X は XML を表していますが、 {{glossary("JSON")}} の方がより軽く JavaScript の一部であることなど数多くの利点があるため、今日では XML よりもよく使われています。 JSON と XML はどちらも Ajax モデルの情報をパッケージ化するために使用されます。

+
+ +
+
+

ドキュメント

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

すべてを見る...

+
+ +
+

ツール

+ +
+
axios
+
{{jsxref("Promise")}} ベースの {{glossary("HTTP")}} クライアントで、内部的に XMLHttpRequest を使用しています。
+
+ +

関連情報

+ +
+
Ajax: ウェブアプリケーションへの新しいアプローチ
+
Adaptive Path の Jesse James Garrett は 2005年 2月にこの記事を書いて、 Ajax とその関連概念を紹介しました。
+
XMLHttpRequest の仕様書
+
WHATWG ライブ標準
+
+
+
-- cgit v1.2.3-54-g00ecf