最新のWeb開発のチュートリアル
 

AJAX導入


AJAXすることができますので、開発者の夢です。

  • ページをリロードせずにWebページを更新します
  • サーバーからのリクエストデータ - ページが読み込まれた後
  • サーバーからデータを受信 - ページが読み込まれた後
  • サーバにデータを送信する - バックグラウンドで

すべての章の例では、それを自分で試してみてください

すべての章では、オンラインの例を編集することができ、その結果を表示するには、ボタンをクリックしてください。

AJAXの例

Let AJAX change this text

»それを自分で試してみてください


AJAXの例の説明しました

HTMLページ

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTMLページが含まれてい<div>セクションと<button>

<div>セクションは、サーバからの情報を表示するために使用されます。

<button> (それがクリックされた場合)関数を呼び出します。

この関数は、Webサーバからのデータを要求し、それを表示します。

機能loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

あなたが知っておくべきこと

続行する前に、あなたは、次の基本的な理解を持っている必要があります。

  • HTML
  • JavaScriptを

あなたが最初にこれらの科目を勉強したい場合は、私たちの上のチュートリアルを見つけるのホームページを


何がAJAX

AJAX =非同期JavaScriptとXML。

AJAXは紛らわしい名前です。 AJAXアプリケーションは、データを転送するためにXMLを使用する場合がありますが、プレーンテキストまたはJSONテキストとしてデータを転送することも同様に一般的です。

AJAXは、高速かつ動的なWebページを作成するための技術です。

AJAXは、Webページが舞台裏サーバと少量のデータを交換することにより、非同期的に更新することができます。 ページ全体をリロードすることなく、ウェブページの一部を更新することが可能であることを意味します。

内容は変更する必要があります場合は、古典的なウェブページは、(AJAXを使用しない)、ページ全体をリロードする必要があります。

AJAXを使用するアプリケーションの例:Googleマップ、GmailやYouTubeの、とFacebook。


どのようにAJAXの機能

AJAX


AJAXは、インターネット標準に基づいて

AJAX、インターネット標準に基づいている、との組み合わせを使用しています。

  • XMLHttpRequestオブジェクト(ウェブサーバからデータを取得します)
  • JavaScript/DOM (データを使用/表示します)

XMLHttpRequest紛らわしい名前です。 あなたは、AJAXを使用するためにXMLを理解する必要はありません。


Googleが提案します

GoogleサジェストでAJAXは、Googleが2005年に人気が行われました。

Googleの提案は非常に動的なWebインターフェースを作成するために、AJAXを使用している:あなたは、Googleの検索ボックスに入力を開始すると、JavaScriptはサーバーにオフ手紙を送信し、サーバーは、提案のリストを返します。


今日AJAXを使用して起動します

AJAXは、既存の規格に基づいています。 これらの規格は、数年前から開発者によって使用されてきました。 それがどのように動作するか確認するために私たちの次の章を読みます!