アヤックスとは何ですか? ajax の詳しい紹介-jsチュートリアル-php.cn

Ajax 自体はテクノロジーではありませんが、2005 年に Jesse James Garrett によって開拓され、HTML または XHTML、カスケードスタイルシート、JavaScript、ドキュメントオブジェクトモデル、XML などの多くの既存テクノロジーを適用する「新しい」方法として説明されています。、XSLT、そして最も重要なのは XMLHttpRequest オブジェクトです。

これらのテクノロジーを ajax モデルに組み合わせると、Web アプリはブラウジングインターフェイス全体を更新するのではなく、ユーザーインターフェイスを迅速かつ段階的に更新できるため、アプリケーションが高速になり、ユーザーエクスペリエンスが向上します。

x は ajax の xml を表しますが、軽量で JavaScript の一部であるという利点のため、json がよく使用されます。 ajax モデルの json と xml は両方とも、データ情報をパッケージ化するために使用されます。

AJAX とは何ですか?

AJAX は、Asynchronous JavaScript And XML の略で、JSON、XML、HTML、テキストファイルなどのさまざまな方法で情報を送受信できます。 . AJAX の最も魅力的な機能は「非同期」です。これは、ページを更新せずにサーバーと通信してデータを交換できることを意味します。

ajax の主な 2 つの機能:

ページを更新せずにデータをリクエストする
サーバーからデータを取得する

ステップ 1 – リクエスト方法

サーバーをリクエストするにはJavaScript では、必要な機能を備えたオブジェクトをインスタンス化する必要があります。これが XMLHttpRequest の由来です。当初、Internet Explorer は XMLHTTP と呼ばれる ActiveX オブジェクトを実装していました。それ以来、Mozilla、Safari、およびその他のブラウザメーカーは、このメソッドと Microsoft と同様の ActiveX オブジェクト機能をサポートするために XMLHttpRequest オブジェクトを次々に実装してきました。同時に、Microsoft は XMLHttpRequest も実装しました。

// 古い互換性コード、不要になりました。

if (window.window.ActiveXObject) { // IE 6 以前

httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

注: 上記のコードは説明のみを目的としており、XMLHttp のインスタンスを作成するだけです。ステップ 3 に進んで、より実践的な例を確認できます。

リクエスト後、リクエスト結果を受け取る必要があります。この段階では、onreadystatechangeproperty メソッドを次のように構成することで、XMLHttp リクエストオブジェクトにレスポンスの JavaScript メソッドを処理するように指示する必要があります。

httpRequest.onreadystatechange = nameOfTheFunction;

ログイン後にコピー

または

<code>httpRequest.onreadystatechange = function(){<br>    // Process the server response here.<br>};</code>

ログイン後にコピー

レスポンスを受け入れる方法を宣言した後、リクエストを開始する必要があります。 HTTP リクエストオブジェクトを呼び出すことによる open() メソッドと send() メソッドは次のとおりです:

<code>httpRequest.open('GET', 'http://www.example.org/some.file', true);<br>httpRequest.send();</code>

ログイン後にコピー

open() の最初のパラメータは HTTP リクエストメソッドです – GET、POST、HEAD、またはサーバーでサポートされているその他のメソッド。すべて大文字のメソッド名は HTTP 標準です。それ以外の場合、一部のブラウザ (例: Firefox) はリクエストを発行できない場合があります。 http リクエストメソッドの詳細については、「W3C 仕様」をクリックしてください。

2 番目のパラメータは、リクエストされる URL です。セキュリティ上の理由から、デフォルトではクロスドメイン URL リクエストを行うことはできません。すべてのページが同じドメイン名の下にあることを確認してください。そうしないと、open() メソッドを呼び出すときに「アクセス許可が拒否されました」エラーが発生します。よくあるクロスドメインの問題は、Web サイトのドメイン名がdomain.tld であるにもかかわらず、www.domain.tld を使用してページにアクセスしようとすることです。本当にクロスオリジンリクエストを実行したい場合は、HTTP アクセス制御を確認してください。
オプションの 3 番目のパラメーターは、このリクエストが同期か非同期かを設定します。 true (デフォルト値) の場合、JavaScript は実行を継続し、ユーザーがページを操作している間、サーバーはデータを返します。これがAJAXです。
send() メソッドのパラメータには、サーバーに送信 (POST) する任意のデータを指定できます。フォームデータは、サーバーが解析できる形式 (クエリ文字列:
```
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
```
ログイン後にコピー

データを POST する場合は、リクエストの MIME タイプを設定する必要がある場合があることに注意してください。たとえば、send() を呼び出す前に次のコードを追加して、フォームデータをクエリデータとして送信します:

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

ログイン後にコピー

ステップ 2 – サーバー応答

リクエストを処理するときに、応答を処理するための JavaScript メソッドを提供しました:

httpRequest.onreadystatechange = nameOfTheFunction;

ログイン後にコピー

この方法は何をするのですか?まず、リクエストのステータスを確認する必要があります。値が XMLHttpRequest.DONE (4) の場合、すべてのサーバー応答が受け入れられたことを意味します。

<code>if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>    // Everything is good, the response was received.<br>} else {<br>    // Not ready yet.<br>}</code>

ログイン後にコピー

readyState のすべての可能な値は、次のように XMLHTTPRequest.readyState で確認できます。または (リクエストの実行)

4 (完了) または (リクエストが完了し、応答の準備ができていますリクエスト完了の応答が準備されています)
Value
Description
0
クライアントが作成されました。open() はまだ呼び出されていません。1OPENEDopen() が呼び出され、ヘッダーとステータスが利用可能です。3LOADINGダウンロード中;部分的なデータを保持します。4DONE操作は完了しました。
(Source)
接下来，检查HTTP响应的 response code 。查看 W3C看到可能的值。下面例子我们用response code是不是等于200来判断ajax请求是否成功。
```
<code>if (httpRequest.status === 200) {    // Perfect! } else {    // There was a problem with the request.    // For example, the response may have a 404 (Not Found)    // or 500 (Internal Server Error) response code. }</code>
```
ログイン後にコピー
检查完响应值后。我们可以随意处理服务器返回的数据，有两个选择获得这些数据：
- httpRequest.responseText – 返回服务器响应字符串
- httpRequest.responseXML – 返回服务器响应XMLDocument 对象可以传递给JavaScript DOM 方法
上面的代码只有在异步的情况下有效（open() 的第三个参数设置为true）。如果你用同步请求，就没必要指定一个方法。但是我们不鼓励使用同步请求，因为同步会导致极差的用户体验。
Step 3 – 一个简单的例子
我们把上面的放在一起合成一个简单的HTTP请求。我们的JavaScript 将请求一个HTML 文档， test.html, 包含一个字符串 "I'm a test."然后我们alert()响应内容。这个例子使用普通的JavaScript — 没有引入jQuery， HTML, XML 和 PHP 文件应该放在同一级目录下。
```
<code><button id="ajaxButton" type="button">Make a request</button> <script> (function() {  var httpRequest;  document.getElementById("ajaxButton").addEventListener('click', makeRequest);  function makeRequest() {    httpRequest = new XMLHttpRequest();    if (!httpRequest) {      alert('Giving up :( Cannot create an XMLHTTP instance');      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('There was a problem with the request.');      }    }  } })(); </script></code>
```
ログイン後にコピー
在这个例子里：
- 用户点击"Make a request” 按钮；
- 事件调用 makeRequest() 方法；
- 请求发出，然后 (onreadystatechange)执行传递给 alertContents()；
- alertContents() 检查响应是否 OK, 然后 alert() test.html 文件内容。
注意 1: 如果服务器返回XML，而不是静态XML文件，你必须设置response headers 来兼容i.e.。如果你不设置headerContent-Type: application/xml, IE 将会在你尝试获取 XML 元素之后抛出一个JavaScript "Object Expected" 错误。

注意 2: 如果你不设置header Cache-Control: no-cache 浏览器将会缓存响应不再次提交请求，很难debug。你可以添加永远不一样的GET 参数，例如 timestamp 或者随机数 (查看 bypassing the cache)

注意 3: 如果 httpRequest 变量是全局的，混杂调用 makeRequest()会覆盖各自的请求,导致一个竞争的状态。在一个closure 里声明 httpRequest 本地变量来避免这个问题。
在发生通信错误(如服务器崩溃)、onreadystatechange方法会抛出一个异常,当访问响应状态。为了缓解这个问题,你可以用ry…catch包装你的if...then 语句:
```
<code>function alertContents() {  try {    if (httpRequest.readyState === XMLHttpRequest.DONE) {      if (httpRequest.status === 200) {        alert(httpRequest.responseText);      } else {        alert('There was a problem with the request.');      }    }  }  catch( e ) {    alert('Caught Exception: ' + e.description);  } }</code>
```
ログイン後にコピー
Step 4 – 使用 XML 响应
在前面的例子里，在获取到响应之后，我们用request 对象responseText 属性获得 test.html 文件内容。现在让我们尝试获取responseXML 属性。
首先，让我们创建一个有效的XML文档，留着待会我们请求。(test.xml)如下:
```
<code><?xml version="1.0" ?> <root>    I'm a test. </root></code>
```
ログイン後にコピー
在这个脚本里，我们只要修改请求行为：
```
<code>... onclick="makeRequest('test.xml')"> ...</code>
```
ログイン後にコピー
然后在alertContents()里，我们需要把 alert(httpRequest.responseText); 换为：
```
<code>var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data);</code>
```
ログイン後にコピー
这里获得了responseXML的XMLDocument，然后用 DOM 方法来获得包含在XML文档里面的内容。你可以在here查看test.xml，在here查看修改后的脚本。
Step 5 – 使用数据返回
最后，让我们来发送一些数据到服务器，然后获得响应。我们的JavaScript这次将会请求一个动态页面，test.php将会获取我们发送的数据然后返回一个计算后的字符串 - "Hello, [user data]!"，然后我们alert()出来。
首先我们加一个文本框到HTML，用户可以输入他们的姓名：
```
<code><label>Your name:  <input type="text" id="ajaxTextbox" /> </label>  Make a request </code>
```
ログイン後にコピー
我们也给事件处理方法里面加一行获取文本框内容，并把它和服务器端脚本的url一起传递给 makeRequest() 方法：
```
<code>  document.getElementById("ajaxButton").onclick = function() {      var userName = document.getElementById("ajaxTextbox").value;      makeRequest('test.php',userName);  };</code>
```
ログイン後にコピー
我们需要修改makeRequest()方法来接受用户数据并且传递到服务端。我们将把方法从 GET 改为 POST，把我们的数据包装成参数放到httpRequest.send()：
```
<code>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));  }</code>
```
ログイン後にコピー
如果服务端只返回一个字符串， alertContents() 方法可以和Step 3 一样。然而，服务端不仅返回计算后的字符串，还返回了原来的用户名。所以如果我们在输入框里面输入 “Jane”，服务端的返回将会像这样：
{"userData":"Jane","computedString":"Hi, Jane!"}
要在alertContents()使用数据，我们不能直接alert responseText, 我们必须转换数据然后 alert computedString属性:
```
<code>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.');    }  } }</code>
```
ログイン後にコピー
test.php 文件如下：
```
<code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; $computedString = "Hi, " . $name; $array = ['userName' => $name, 'computedString' => $computedString]; echo json_encode($array);</code>
```
ログイン後にコピー
查看更多DOM方法, 请查看 Mozilla's DOM implementation 文档。