ホームページ > 記事 > ウェブフロントエンド > アヤックスとは何ですか? ajax の詳しい紹介

アヤックスとは何ですか? ajax の詳しい紹介

零下一度オリジナル: 2017-06-26 10:29:37976ブラウズ

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 文档。

以上がアヤックスとは何ですか? ajax の詳しい紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：画像カルーセルの実装方法を詳しく解説?次の記事：画像カルーセルの実装方法を詳しく解説?

続きを見る

アヤックスとは何ですか? ajax の詳しい紹介

AJAX とは何ですか?

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

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

Step 3 – 一个简单的例子

Step 4 – 使用 XML 响应

Step 5 – 使用数据返回

関連記事