initial commit

5 files changed, 572 insertions, 0 deletions

diff --git a/files/ja/web/guide/ajax/community/index.html b/files/ja/web/guide/ajax/community/index.html
new file mode 100644
index 0000000000..a6d6e744c3
--- /dev/null
+++ b/files/ja/web/guide/ajax/community/index.html
@@ -0,0 +1,30 @@
+---
+title: コミュニティ
+slug: Web/Guide/AJAX/Community
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Community
+---
+<p>AJAX に関する有用なメーリングリスト、ニュースグループ、フォーラム、その他のコミュニティを知っている場合は、リンクを追加してください。</p>
+
+<h3 id=".E8.8B.B1.E8.AA.9E.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.8B.B1.E8.AA.9E.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.83.BC"><font><font>英語コミュニティ</font></font></h3>
+
+<p><a class="external" href="http://www.ajaxlines.com" rel="freelink"><font><font>http://www.ajaxlines.com</font></font></a><font><font> - a huge collection of AJAX resources and tutorials, toolkits, websites </font></font><a class="external" href="http://www.ajaxmatters.com" rel="freelink"><font><font>http://www.ajaxmatters.com</font></font></a><font><font> - information portal about AJAX and related web technologies</font></font></p>
+
+<h2 id="Ajax_Workshops_&amp;_Courses" name="Ajax_Workshops_&amp;_Courses"><font><font>Ajax ワークショップ &amp; コース</font></font></h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://skillsmatter.com/go/ajax-ria"><font><font>skillsmatter.com</font></font></a><font><font> : courses and events on JavaScript, Ajax, and Reverse Ajax technology</font></font></li>
+ <li><a href="https://www.telerik.com/forums/aspnet-ajax" rel="noopener"><font><font>telerik.com</font></font></a><font><font> : Active community forum for Ajax</font></font></li>
+ <li><a href="https://community.tableau.com/search.jspa?q=ajax" rel="noopener"><font><font>community.tableau.com</font></font></a><font><font> : Community support forums and courses for Ajax</font></font></li>
+ <li><a href="https://www.codementor.io/community/search?q=ajax" rel="noopener"><font><font>codementor.io</font></font></a><font><font> : Social platform by Ajax forum and tutorial</font></font></li>
+ <li><a href="https://www.lynda.com/search?q=ajax" rel="noopener"><font><font>lynda.com</font></font></a><font><font> : A tutorial on learning the basics of Ajax</font></font></li>
+ <li><a href="https://www.onlineinterviewquestions.com/ajax-interview-questions/" rel="bookmark"><font><font>Ajax Interview Questions and answer </font></font></a><a href="https://www.onlineinterviewquestions.com/ajax-interview-questions/"><font><font> and answer</font></font></a></li>
+ <li><a href="https://www.bestinterviewquestion.com/ajax-interview-questions" rel="bookmark"><font><font>Ajax Interview Questions and Answer</font></font></a></li>
+</ul>
+
+<h3 id=".E6.97.A5.E6.9C.AC.E8.AA.9E.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.83.BC" name=".E6.97.A5.E6.9C.AC.E8.AA.9E.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.83.BC"><font><font><font>日本語コミュニティ</font></font></font></h3>
+
+<ul>
+ <li><font><a class="external" href="http://www.atmarkit.co.jp/fwcr/"><font><font>@ IT Forum Rich Client &amp; Report</font></font></a></font></li>
+</ul>
diff --git a/files/ja/web/guide/ajax/getting_started/index.html b/files/ja/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..755dff5424
--- /dev/null
+++ b/files/ja/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,275 @@
+---
+title: 始めましょう
+slug: Web/Guide/AJAX/Getting_Started
+tags:
+  - AJAX
+  - API
+  - Advanced
+  - JavaScript
+  - WebMechanics
+  - XMLHttpRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p class="summary">この記事は AJAX の基礎の概観と、入門のための二つの実践的なサンプルを示します。</p>
+
+<h3 id="Whats_AJAX" name="What's_AJAX">AJAX とは?</h3>
+
+<p>AJAX は <strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML の頭文字を取ったものです。これは一言で言えば、 <code><a href="/ja/docs/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトを使ってサーバーと通信することです。 AJAX は JSON, XML, HTML, テキストファイルなど、様々な形式の情報で送受信することができます。 AJAX の最も魅力的な特徴は「非同期」であること、つまり、サーバーとの通信、データの交換、ページの更新を、ページの再読み込みなしに行うことができる点です。</p>
+
+<p>AJAX でできることには、二つの重要な特徴があります。</p>
+
+<ul>
+ <li>ページを再読み込みすることなくサーバーに要求を送る</li>
+ <li>サーバーからデータを受け取って処理する</li>
+</ul>
+
+<h3 id="Step_1_–_How_to_make_an_HTTP_request" name="Step_1_–_How_to_make_an_HTTP_request">Step 1 –  HTTP リクエストの送り方</h3>
+
+<p>JavaScript からサーバーに <a href="/ja/HTTP">HTTP</a> リクエストを送るためには、この機能を提供するオブジェクトのインスタンスが必要になります。これが <code>XMLHttpRequest</code> の登場する場所です。このクラスは、もともとは Internet Explorer で <code>XMLHTTP</code> と呼ばれる ActiveX オブジェクトとして導入されたものです。その後、 Mozilla や Safari やその他のブラウザがこれに追随し、 Microsoft 独自の ActiveX オブジェクトのメソッドやプロパティに対応する <code>XMLHttpRequest</code> オブジェクトを実装しました。いっぽう、 Microsoft も同様に XMLHttpRequest を実装しました。</p>
+
+<pre class="brush:js notranslate">// 古い互換コードで、もう必要ありません。
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 以前
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note"><strong>メモ:</strong> 説明のために、このコードは実際に XMLHttp インスタンスを作成するのに使用するコードよりも多少簡単にしています。より実際に近いサンプルは、この記事の step 3 を見てください。</div>
+
+<p>リクエストを送ったら、応答を受け取った後に何をするかを決めなければなりません。この段階で行う必要があるのは、どの JavaScript 関数に応答を処理させるかを XMLHttp リクエストオブジェクトに教えることだけです。これは、オブジェクトの <code>onreadystatechange</code> プロパティに、使おうとしている JavaScript 関数の名前をこのように設定することで行えます。</p>
+
+<pre class="brush: js notranslate"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>このとき、関数名の後に括弧や引数がないことに注意してください。それは、実際にそれを呼ぶのではなく単純に関数の参照を渡しているからです。また、関数名を設定するのではなく、以下のように関数や応答を処理する動作をその場で定義するという JavaScript の機能 (「無名関数」と呼ばれる) を利用することもできます。</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = function(){
+    // ここでサーバーからの応答を処理します。
+};
+</pre>
+
+<p>次に、応答を受け取った後に何をするかを宣言したら、以下のように HTTP 要求オブジェクトの <code>open()</code> と <code>send()</code> 呼び出して、要求を作成する必要があります。</p>
+
+<pre class="brush: js notranslate">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+</pre>
+
+<ul>
+ <li><code>open()</code> の最初の引数は、サーバーが対応している HTTP リクエストメソッド、つまり、GET、POST、HEAD やその他のメソッドになります。 HTTP 標準に準拠するためにメソッド名はすべて大文字にしてください。そうでなければ、いくつかのブラウザ (Firefox など) ではリクエストを送信しません。利用可能な HTTP リクエストメソッドに関しての詳細情報については <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C の仕様書</a>を参照してください。</li>
+ <li>第二引数は、リクエストを送信するページの URL です。セキュリティ上の問題から、他のドメインのページを読むことはできません。つまり、すべてのページに対して同一のドメイン名を利用しないと、 <code>open()</code> を呼び出したときに「権限エラー」を受け取ることになるということです。よくある落とし穴は、サイトに <code>domain.tld</code> でアクセスしながら、<code>www.domain.tld</code> でページを読み込もうとすることです。本当に他のドメインにリクエストを送信する必要がある場合は、 <a href="/ja/docs/Web/HTTP/HTTP_access_control">HTTP アクセス制御</a>を参照してください。</li>
+ <li>第三引数は、リクエストを非同期に送るかどうかを示します。 <code>true</code> (既定値) であれば、 JavaScript の実行が継続され、サーバーの応答が届くまでの間もユーザーがページを操作することができます。これが、 AJAX の最初の A です。</li>
+</ul>
+
+<p><code>send()</code> メソッドの引数は、要求を <code>POST</code> するときにサーバーに送信したい任意のデータです。フォームデータはサーバーが解釈できる形式、例えばクエリ文字列のような形式、</p>
+
+<pre class="notranslate"><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>又は、 <code>multipart/form-data</code>, JSON, XML など形式にしてください。</p>
+
+<p>なお、データを <code>POST</code> する場合、要求の MIME タイプを設定する必要がある場合があります。例えば、フォームデータをクエリ文字列として <code>send()</code> を呼び出して送る前に、次の文を使用してください。</p>
+
+<pre class="brush: js notranslate">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h3 id="Step_2_–_Handling_the_server_response" name="Step_2_–_Handling_the_server_response">Step 2 – サーバー応答の扱い</h3>
+
+<p>要求を送った時に、応答を扱う JavaScript 関数の名前を設定しました。</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>この関数では何を行うべきでしょうか。最初に、この関数ではリクエストの状態を調べる必要があります。ステータス値が <code>XMLHttpRequest.DONE</code> (4 に対応) であるなら、サーバーからの応答が完了しており、処理を進められることを意味します。</p>
+
+<pre class="brush: js notranslate">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // 全てが問題ない状態で、応答も返ってきています
+} else {
+    // まだ準備ができていません
+}
+</pre>
+
+<p><code>readyState</code> の値のリストは <a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a> で文書化されていて、以下のようになっています。</p>
+
+<ul>
+ <li>0 (初期化前) 又は (<strong>要求が初期化されていません</strong>)</li>
+ <li>1 (読み込み中) 又は (<strong>サーバーへの接続が確立されました</strong>)</li>
+ <li>2 (読み込み完了) 又は (<strong>要求を受信しました</strong>)</li>
+ <li>3 (対話中) 又は (<strong>要求を処理中です</strong>)</li>
+ <li>4 (完了) 又は (<strong>要求が完了して応答の準備ができました</strong>)</li>
+</ul>
+
+<p>次に、 HTTP 応答の <a href="/ja/docs/Web/HTTP/#HTTP_Response_Codes">応答コード</a>を調べます。返ってくる可能性があるコードは <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> でリスト化されています。以下の例では、 AJAX 呼び出しが成功したか失敗したかを {{HTTPStatus("200", "200 OK")}} 応答コードをチェックすることで判別します。</p>
+
+<pre class="brush: js notranslate">if (httpRequest.status === 200) {
+    // 完璧です！
+} else {
+    // 何らかの問題が発生しています。
+    // たとえば、応答に 404 (Not Found) や
+    // 500 (Internal Server Error) 応答コードが返っているなど。
+}
+</pre>
+
+<p>要求の状態と応答の HTTP 状態コードをチェックした後、サーバーが送信したデータを使って好きなことが何でもできます。データにアクセスするには二つの選択肢があります。</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – サーバーの応答をテキスト文字列として返します</li>
+ <li><code>httpRequest.responseXML</code> – サーバーの応答を JavaScript DOM 関数で扱える <code>XMLDocument</code> オブジェクトとして返します</li>
+</ul>
+
+<p>なお、上記の段階は非同期要求を使用した場合 (<code>open()</code> の第三引数が未指定か <code>true</code> に設定されていた場合) のみ有効です。<strong>同期</strong>要求を使用した場合は関数を指定する必要はありませんが、これはユーザーの使い勝手をひどく損なうので、避けるべきです。</p>
+
+<h3 id="Step_3_–_A_Simple_Example" name="Step_3_–_A_Simple_Example">Step 3 –  簡単な例</h3>
+
+<p>さて、ここまでに紹介した方法を使って簡単な HTTP リクエストを実行してみましょう。われわれの JavaScript では <code>test.html</code> という名前の、 "これはテストです" と書かれた HTML 文書を要求し、その内容を <code>alert()</code> で表示します。注意として、この例では vanilla JavaScript を使っています — jQuery は入っていません。また HTML, XML, PHP ファイルは同一ディレクトリに置かれています。</p>
+
+<pre class="brush: html notranslate">&lt;button id="ajaxButton" type="button"&gt;要求を実行&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p>このサンプルでは以下のことを行います。</p>
+
+<ul>
+ <li>ユーザーがブラウザーで「要求を実行」をクリックする。</li>
+ <li>イベントハンドラーから <code>makeRequest()</code> 関数が呼び出される。</li>
+ <li>要求が作成され、(<code>onreadystatechange</code>) により <code>alertContents()</code> への処理引継ぎが設定される。</li>
+ <li><code>alertContents()</code> では、応答が返ってきていて問題無いかを確認した後、<code>test.html</code> ファイルの中身を <code>alert()</code> で表示する。</li>
+</ul>
+
+<div class="note"><strong>メモ</strong>: 要求を送信する先が静的な HTML ファイルではなく、 XML を返すコードである場合、 Internet Explorer に応答ヘッダーを設定しなければなりません。<code>Content-Type: application/xml</code> というヘッダーを設定しなければ、XML 要素にアクセスしようとしている行で IE が "Object Expected" という Javascript エラーを投げるでしょう。</div>
+
+<div class="note"><strong>メモ 2</strong>: <code>Cache-Control: no-cache</code> というヘッダーを設定しなければ、ブラウザーが応答をキャッシュして要求を再送信しなくなるため、デバッグが難しくなるでしょう。 GET 引数に、タイムスタンプやランダムな数字のような、常に異なるものを追加する方法もあります (<a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">キャッシュをバイパスする</a>をご覧ください)</div>
+
+<div class="note"><strong>メモ 3</strong>: <code>httpRequest</code> 変数をグローバルに使用すると、関数の呼び出しが競合して <code>makeRequest()</code> が互いに上書きし合うため、競合状態が発生します。 <code>httpRequest</code> 変数を、 AJAX 関数を含んでいる<a href="/ja/docs/Web/JavaScript/Closures">クロージャ</a>のローカルで宣言することでこれを防ぐことができます。</div>
+
+<p>通信エラーのイベント (サーバーがダウンしたなど) では、応答状態にアクセスする時に <code>onreadystatechange</code> メソッドの中で例外が発生します。この問題を防ぐため、 <code>if...then</code> 文は必ず <code>try...catch</code> で囲むようにしてください。</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+  catch( e ) {
+    alert('例外を捕捉: ' + e.description);
+  }
+}
+</pre>
+
+<h3 id="Step_4_–_Working_with_the_XML_response" name="Step_4_–_Working_with_the_XML_response">Step 4 – 「X-ファイル」 もしくは XML レスポンスの扱い方</h3>
+
+<p>前の例では、 HTTP リクエストへの応答を受け取った後、要求オブジェクトの <code>responseText</code> プロパティを用いて、それに含まれている test.html の中身を取得しました。では、次に <code>responseXML</code> プロパティのほうを試してみましょう。</p>
+
+<p>はじめに、あとでサーバーに要求する妥当な XML 文書を作成します。 test.xml ファイルの中身は以下のようなものです。</p>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>スクリプトでは、リクエスト送出を以下のように変更します。</p>
+
+<pre class="brush: html notranslate">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>そして、 <code>alertContents()</code> では、 <code>alert(httpRequest.responseText);</code> としている行を以下のように変更します。</p>
+
+<pre class="brush: js notranslate">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>このコードでは、 <code>responseXML</code> から <code>XMLDocument</code> オブジェクトを取得し、 DOM メソッドを利用して XML 文書に含まれるデータにアクセスしています。 この<code>test.xml</code> ファイルは<a href="http://www.w3clubs.com/mozdev/test.xml">ここ</a>で、変更されたスクリプトは<a href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">ここ</a>で見ることができます。</p>
+
+<h3 id="Step_5_–_Working_with_data" name="Step_5_–_Working_with_data">Step 5 – データを処理する</h3>
+
+<p>最後に、データをサーバーに送って応答を受けましょう。 JavaScript はここで動的なページ <code>test.php</code> に要求し、このページは送ったデータを受けて「計算した」文字 - "Hello, [user data]!" - を返し、これを <code>alert()</code> します。</p>
+
+<p>まずは HTML にテキストボックスを追加してユーザーが名前を入れられるようにします:</p>
+
+<pre class="brush: html notranslate">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;</pre>
+
+<p>イベントハンドラーに、テキストボックスからユーザーデータを取得してサーバーサイドスクリプトの URL と一緒に <code>makeRequest()</code> に送るような行も追加します。</p>
+
+<pre class="brush: js notranslate">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p><code>makeRequest()</code> を編集してユーザーデータを受け取ってサーバーに渡すようにします。リクエストメソッドは <code>GET</code> から <code>POST</code> に変更し、データを <code>httpRequest.send()</code> 呼び出しのパラメーターとして入れます:</p>
+
+<pre class="brush: js notranslate">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p><code>alertContents()</code> 関数はステップ 3 と同じように書かれて、サーバーが計算された文字列を返していたら、 alert するようにします。しかし、サーバーが計算された文字列とオリジナルのユーザーデータの両方を返していたらどうでしょう？ユーザーがテキストボックスに "Jane" とタイプしていたら、サーバーの応答はこのようになります:</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p>このデータを <code>alertContents()</code>,内で使うには、単に <code>responseText</code> をalert することはできず、これを parse して、求めるプロパティの <code>computedString</code> をalertします:</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}</pre>
+
+<p><code>test.php</code> には以下のようなものが入ります。</p>
+
+<pre class="brush: php notranslate"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p>DOM メソッドについてより詳しくは、<a href="/ja/docs/dom/">Mozilla での DOM の実装</a>の文書を参照してください。</p>
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
+---
+<div class="callout-box"><strong><a href="/ja/docs/Web/Guide/AJAX/Getting_Started">はじめに</a></strong><br>
+AJAX 入門</div>
+
+<div>
+<p><span class="seoSummary"><strong><u>A</u>synchronous <u>J</u>avaScript <u>a</u>nd <u>X</u>ML (AJAX)</strong> はそれ自体がある種の技術というわけではありませんが、 Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。</span>組み合わされる技術は、<a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Glossary/XHTML">XHTML</a>, <a href="/ja/docs/Web/CSS">CSS</a>, <a href="/ja/docs/Web/JavaScript">JavaScript</a>, <a href="/ja/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ja/docs/Web/XML">XML</a>, <a href="/ja/docs/Web/XSLT">XSLT</a>, そして最も重要なものは {{domxref("XMLHttpRequest")}} オブジェクトです。<br>
+ これらの技術が AJAX のモデルで組み合わされると、ウェブアプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。</p>
+
+<p>Ajax の X は XML を表していますが、 {{glossary("JSON")}} の方がより軽く JavaScript の一部であることなど数多くの利点があるため、今日では XML よりもよく使われています。 JSON と XML はどちらも Ajax モデルの情報をパッケージ化するために使用されます。</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">ドキュメント</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Guide/AJAX/Getting_Started">はじめに</a></dt>
+ <dd>この記事では AJAX の基本について説明し、始めるために2つの簡単な実例を紹介します。</dd>
+ <dt><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest"><code>XMLHttpRequest</code> API の使用</a></dt>
+ <dd>{{domxref("XMLHttpRequest")}} API は、Ajax のコアです。この記事では、次のような Ajax 技術の使用方法について説明します。
+ <ul>
+  <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">サーバーのレスポンスの分析と操作</a></li>
+  <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">リクエストの進捗のモニタリング</a></li>
+  <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">フォームの送信とバイナリファイルのアップロード</a> – <em>純粋な</em> Ajax、もしくは {{domxref("FormData")}} オブジェクトを使用します</li>
+  <li><a href="/ja/docs/Web/API/Worker">ウェブワーカー</a>内部における Ajax の使用</li>
+ </ul>
+ </dd>
+ <dt><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></dt>
+ <dd>Fetch API はリソースをフェッチするためのインターフェイスを提供します。 {{domxref("XMLHTTPRequest")}} を使用した人なら誰にでも馴染みのあるように見えますが、この API はより強力で柔軟な機能セットを提供します。</dd>
+ <dt><a href="/ja/docs/Web/API/Server-sent_events">Server-sent イベント</a></dt>
+ <dd>伝統的に、ウェブページは新しいデータを受信するためにサーバにリクエストを送信しなければなりません。つまり、ページはサーバにデータを要求します。サーバが送信したイベントでは、サーバがメッセージをウェブページにプッシュすることで、いつでもウェブページに新しいデータを送信することができます。これらの着信メッセージは、ウェブページ内の<em><a href="/ja/docs/Web/API/Event">イベント</a>+データ</em>として扱うことができます。<a href="/ja/docs/Web/API/Server-sent_events/Using_server-sent_events">サーバー送信イベントの使用</a>を参照してください。</dd>
+ <dt><a href="/ja/docs/Web/API/History_API/Example"><em>純粋な Ajax</em> ナビゲーションサンプル</a></dt>
+ <dd>この記事では、純粋な Ajax ウェブサイトの3つのページから構成された実用的な (最小限の) 例を提供します。</dd>
+ <dt><a href="/ja/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">バイナリデータの送信と受信</a></dt>
+ <dd><code>XMLHttpRequest</code> オブジェクトの <code>responseType</code> プロパティを設定して、予想されるレスポンスタイプをサーバから変更することができます。可能な値は空文字列 (デフォルト), <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, <code>text</code> です。<code>response</code> のプロパティには、 <code>responseType</code> に従って <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>、または string のようなエンティティ本文が含まれます。この記事では、Ajax の I/O 技術をいくつか紹介します。</dd>
+ <dt><a href="/ja/docs/Web/XML">XML</a></dt>
+ <dd><strong>Extensible Markup Language (XML)</strong> は、特定の目的のマークアップ言語を作成する W3C 推奨の汎用マークアップ言語です。これは SGML の単純化されたサブセットであり、多くの異なる種類のデータを記述することができます。その主な目的は、異なるシステム、特にインターネットを介して接続されたシステム間でのデータの共有を容易にすることです。</dd>
+ <dt><a href="/ja/docs/Web/Guide/Parsing_and_serializing_XML">XML の解釈とシリアライズ</a></dt>
+ <dd>文字列、ファイル、または JavaScript を使用して XML 文書を解釈する方法、XML 文書を文字列、Javascript Object Tree (JXON) またはファイルにシリアル化する方法</dd>
+ <dt><a href="/ja/docs/Web/XPath">XPath</a></dt>
+ <dd>XPath は <strong>X</strong>ML <strong>Path</strong> Language (XML パス言語) の略で、<a href="/ja/docs/XML">XML</a> 文書のさまざまな部分をアドレス指定する (指す) 柔軟な方法を提供する非 XML 構文を使用します。これと同様に、ドキュメント内のアドレス指定されたノードをテストしてパターンに一致するかどうかを判断することもできます。</dd>
+ <dt>{{domxref("FileReader")}} API</dt>
+ <dd><code>FileReader</code> API を使用すると、ウェブアプリケーションがユーザーのコンピューターに格納されているファイル (または生データバッファ) の内容を非同期に読み取ることができ、読み取るファイルまたはデータを {{domxref("File")}} または {{domxref("Blob")}} オブジェクトで特定します。 File オブジェクトはユーザーが {{HTMLElement("input")}} 要素を使用して選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、 {{domxref("HTMLCanvasElement")}} の <code>mozGetAsFile()</code> API から取得することができます。</dd>
+ <dt><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest における HTML</a></dt>
+ <dd>W3C の <a class="external" href="https://xhr.spec.whatwg.org/">XMLHttpRequest</a> 仕様書では、もともと XML の解析のみに対応していた {{domxref("XMLHttpRequest")}} に HTML 解析の対応が追加されています。この機能を使用すると、ウェブアプリケーションは <code>XMLHttpRequest</code> を使用して解析された DOM として HTML リソースを取得できます。</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ja/docs/tag/AJAX">すべてを見る...</a></span></p>
+</div>
+
+<div class="section">
+<h2 id="Tools" name="Tools">ツール</h2>
+
+<dl>
+ <dt><a href="https://github.com/axios/axios">axios</a></dt>
+ <dd>{{jsxref("Promise")}} ベースの {{glossary("HTTP")}} クライアントで、内部的に <code>XMLHttpRequest</code> を使用しています。</dd>
+</dl>
+
+<h2 class="Other" id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: ウェブアプリケーションへの新しいアプローチ</a></dt>
+ <dd>Adaptive Path の Jesse James Garrett は 2005年 2月にこの記事を書いて、 Ajax とその関連概念を紹介しました。</dd>
+ <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest の仕様書</a></dt>
+ <dd>WHATWG ライブ標準</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ja/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html
new file mode 100644
index 0000000000..1475956d30
--- /dev/null
+++ b/files/ja/web/guide/ajax/other_resources/index.html
@@ -0,0 +1,21 @@
+---
+title: AJAX に関するその他の資料
+slug: Web/Guide/AJAX/Other_Resources
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Other_Resources
+---
+<ul>
+  <li><a href="http://www.ajaxreview.com/">AJAX Review</a></li>
+  <li><a href="http://www.maxkiesler.com/index.php/mhub/">mHub : Ajax and rails examples &amp; how-to's</a></li>
+  <li><a href="http://www.maxkiesler.com/">AJAX Blog at maxkiesler.com</a></li>
+  <li><a href="http://ajaxblog.com/">AJAX Blog</a></li>
+  <li><a href="http://www.ajaxian.com/">Ajaxian Blog</a></li>
+  <li><a href="http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest">AJAX Blog at fiftyfoureleven.com</a></li>
+  <li><a href="http://www.ajaxmatters.com/">AJAX Matters</a></li>
+  <li><a href="http://www.ajaxpatterns.org/Main_Page">AJAX Patterns</a></li>
+  <li><a href="http://www.ajaxtoday.com">AJAX Today Your ajax tutorials, articles, patterns, blogs</a></li>
+  <li><a href="http://www.ajaxlines.com/">AJAX Lines</a></li>
+  <li><a href="http://explash.com/" title="http://explash.com/">eXplash - Ajax and Web 2.0 applications directory</a></li>
+  <li><a href="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/" title="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/">XMLHttpRequest Object</a></li>
+</ul>
diff --git a/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html
new file mode 100644
index 0000000000..fb3a9d6a63
--- /dev/null
+++ b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html
@@ -0,0 +1,167 @@
+---
+title: WAI ARIA Live Regions/API サポート
+slug: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support
+tags:
+  - AJAX
+  - アクセシビリティ
+translation_of: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<div class="warning">これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIAライブリージョン開発者のドキュメント</a>を使用する必要があります。</div>
+
+<p>Firefox 3には、Mozillaエンジンがドキュメントのライブ変更を公開する方法に対する重要な改善が含まれています。<br>
+ <br>
+ これらの機能は、ARIAライブリージョンマークアップでマークアップされたページと、追加のマークアップを追加しなかったページの両方で、スクリーンリーダー開発者がライブリージョンサポートの品質とパフォーマンスを向上させるのに役立ちます。</p>
+
+<p>ARIA のライブリージョンのマークアップについては、<a href="http://www.w3.org/WAI/PF/aria/#liveregions">ARIA の仕様</a>またはライブリージョンのレポートをお読みください。</p>
+
+<p>いつものように、私たちは<a href="http://www.mozilla.org/access/#community">コミュニティフォーラム</a>の変更に関する質問や提案には門を開いています。</p>
+
+<h2 id="Events_fired_for_web_page_mutations" name="Events_fired_for_web_page_mutations">Web ページの突然変異のために発生したイベント</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>文書では何が変わったのですか？</th>
+   <th>ATK/AT-SPI event</th>
+   <th>IAccessible2 event</th>
+  </tr>
+  <tr>
+   <td>Object about to be hidden or removed</td>
+   <td>children_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed)</td>
+   <td>EVENT_OBJECT_HIDE* (fired on the actual accessible object about to go away)</td>
+  </tr>
+  <tr>
+   <td>Object shown or inserted</td>
+   <td>children_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object)</td>
+   <td>EVENT_OBJECT_SHOW* (fired on the actual new accessible object)</td>
+  </tr>
+  <tr>
+   <td>Object replaced with different object (this happens especially if an object's interfaces or role changes)</td>
+   <td>children_changed::remove followed immediately by children_change::add</td>
+   <td>EVENT_OBJECT_HIDE followed immediately by EVENT_OBJECT_SHOW</td>
+  </tr>
+  <tr>
+   <td>Text removed</td>
+   <td>text_changed::delete</td>
+   <td>IA2_EVENT_TEXT_REMOVED (use IAccessibleText::get_oldText to retrieve the offsets and removed text)</td>
+  </tr>
+  <tr>
+   <td>Text inserted</td>
+   <td>text_changed::insert</td>
+   <td>IA2_EVENT_TEXT_INSERTED (use IAccessibleText::get_newText to retrieve the offsets and inserted text)</td>
+  </tr>
+  <tr>
+   <td>Text replaced</td>
+   <td>text_changed::delete followed immediately by text_changed::insert</td>
+   <td>IA2_EVENT_TEXT_REMOVED followed immediately by IA2_EVENT_TEXT_INSERTED</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="nowiki">*</span> We do not use MSAA's CREATE/DESTROY at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- SHOW/HIDE are the equivalent of those events.</p>
+
+<h2 id="Retrieving_author-supplied_ARIA_live_region_semantics_from_an_event" name="Retrieving_author-supplied_ARIA_live_region_semantics_from_an_event">イベントからオーサリング提供の ARIA ライブリージョンセマンティクスを取得する</h2>
+
+<p>ある祖先要素 (最も近い祖先の勝利) に定義されている場合、ページ内の任意の変更イベントに対して、作成者はイベントオブジェクトから以下のオブジェクト属性を取得できます。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Object attribute name</th>
+   <th>Possible values</th>
+   <th>Default value if not specified</th>
+   <th>Meaning</th>
+   <th>ARIA markup if required</th>
+  </tr>
+  <tr>
+   <td>container-live</td>
+   <td>"off" <span class="nowiki">|</span> "polite" <span class="nowiki">|</span> "assertive"</td>
+   <td>"off"</td>
+   <td>Interruption policy</td>
+   <td>aria-live on ancestor element</td>
+  </tr>
+  <tr>
+   <td>container-relevant</td>
+   <td>"{{ mediawiki.external('additions') }} {{ mediawiki.external('removals') }} {{ mediawiki.external('text') }}" <span class="nowiki">|</span> "all"</td>
+   <td>"additions text"</td>
+   <td>What types of mutations are possibly relevant? See {{ mediawiki.external('#Events_fired_for_web_page_mutations the mutation events list') }} to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.</td>
+   <td>aria-relevant on ancestor element</td>
+  </tr>
+  <tr>
+   <td>container-busy</td>
+   <td>"true" <span class="nowiki">|</span> "false" <span class="nowiki">|</span> "error"</td>
+   <td>"false"</td>
+   <td>The current changes are not yet complete. A state change event for the A11y API's BUSY state will be fired on the container object currently marked as BUSY, once it is no longer BUSY. This is especially important in atomic regions. The entire atomic region should be presented once when it is finally no longer BUSY.</td>
+   <td>aria-busy on ancestor element</td>
+  </tr>
+  <tr>
+   <td>container-atomic</td>
+   <td>"true" <span class="nowiki">|</span> "false"</td>
+   <td>"false"</td>
+   <td>Is this change inside a region that should always be presented at once. If yes, member-of relation will point to the root of the region (see next section)</td>
+   <td>aria-atomic on ancestor element</td>
+  </tr>
+  <tr>
+   <td>member-of</td>
+   <td>If container-atomic=true, points to an ancestor accessible object (thus it is actually an accessible relation, not object attribute)</td>
+   <td>Not in atomic region if not provided</td>
+   <td>Points to the root of the atomic container that this object is in. This will always be an ancestor of the current object.</td>
+   <td>aria-atomic on ancestor element</td>
+  </tr>
+  <tr>
+   <td>event-from-input</td>
+   <td>"true" <span class="nowiki">|</span> "false"<br>
+    (described more below)</td>
+   <td>Browser could not calculate this</td>
+   <td>Was the root cause of this event explicit user input?</td>
+   <td>Does not require author's cooperation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The "container-" prefix is so named because the attribute describes what the final computed property of similar name is for that node. This means that the AT does not need to traverse up the parent chain to get this information. At this time, for properties where the container-{{ mediawiki.external('name') }} attribute has not been set, the AT must have code to fall back on the default value as defined in the W3C spec.</p>
+
+<h2 id="Determining_if_event_was_from_user_input" name="Determining_if_event_was_from_user_input">イベントがユーザーの入力であったかどうかを判断する</h2>
+
+<p>All events will now provide information about whether the event was caused by user input, or was something that the web page caused. This information is retrieved differently on each platform, because some platforms use asynchronous events.</p>
+
+<p>In IAccessible2, this is retrieved from the object attribute "event-from-input", which will be set to "true" or "false". If it is not present, then something went wrong and Mozilla was not able to provide this information. This information is available only for EVENT_SHOW, EVENT_HIDE, IA2_EVENT_TEXT_INSERTED and IA2_EVENT_TEXT_REMOVED.</p>
+
+<p>For ATK/AT-SPI, this information is retrieved by checking the event name. If the event name has ":system" appended to it, then it is /not/ from user input. The ":system" string is calculated for children-changed and text-changed events.</p>
+
+<p>Why is this useful? The majority of AJAX pages do not provide live region markup, but still need to be as usable as possible. It is difficult for a screen reader to decide when to interrupt a user with changes on a page. If the screen reader automatically reads too much, then the web page will be too annoying to use. If the screen reader doesn't read anything, then the user may miss important information.</p>
+
+<p>It is believed this information will be useful for heuristics. Often, changes in a page that are directly caused by a user's keystrokes should be read. They are synchronous with what the user is doing and can thus likely be read without disorienting the user. Once the user presses the next key the speech will move on to echoing that key anyway. The screen reader may wish to take other factors into account, such as the type of change, the size of the change, where the change occured, etc. This is a potential area for innovation in screen readers.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Most recent occurance</th>
+   <th>User input?</th>
+  </tr>
+  <tr>
+   <td>Key presses</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Mouse clicks</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Mouse hovers</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Page load events</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Everything else, including focus changes, timer callbacks, XMLHttpRequest callbacks, etc. are neutral. They are only counted as user input if the original reason they happened was because of user input.</p>
+
+<h2 id="スクリーンリーダーが何を提示すべきか？">スクリーンリーダーが何を提示すべきか？</h2>
+
+<p>Please read the live region section of the <a href="/en/ARIA/ARIA_Screen_Reader_Implementors_Guide#Live_Regions" title="http://developer.mozilla.org/editor/fckeditor/core/editor/En/ARIA_Screen_Reader_Implementors_Guide#Live_Regions">WAI-ARIA Screen Reader Implementor's Guide</a>.</p>