AJAXチュートリアル:AJAXとは何かとその使用方法

AJAXとは何ですか?

AJAXAsynchronousJavaScript AndXMLの略です。プログラミング言語ではありません。これは、HTML、CSS、JavaScript、およびXMLを使用して、より優れた、より高速でインタラクティブなWebアプリケーションを開発するためのテクノロジーです。

  1. HTML:ハイパーテキストマークアップ言語(HTML)は、Webアプリケーションの構造を定義するために使用されます。
  2. CSS:カスケードスタイルシート(CSS)は、Webアプリケーションに外観とスタイルを提供するために使用されます。
  3. JavaScript:JavaScriptは、Webアプリケーションをインタラクティブで、面白く、ユーザーフレンドリーにするために使用されます。
  4. XML:Extensible Markup Language(XML)は、Webサーバーからデータを格納および転送するための形式です。

AJAXでの非同期の意味は何ですか?

非同期とは、Webアプリケーションがページを更新せずにWebサーバーとデータを送受信できることを意味します。Webページのさまざまなセクションを更新するとともに、サーバーとの間でデータを送受信するこのバックグラウンドプロセスは、AJAXの非同期プロパティ/機能を定義します。

AJAXのしくみ

AJAXは、ブラウザーに組み込まれているXMLHttpRequestオブジェクトを使用して、WebサーバーおよびHTML DOMからデータを要求し、データを表示または使用します。

XMLHttpRequestオブジェクト:これは、メソッドがWebブラウザーとWebサーバー間のデータ転送に役立つオブジェクト形式のAPIです。

HTML DOM:Webページが読み込まれると、ブラウザはそのページのドキュメントオブジェクトモデルを作成します。

XMLHttpRequestオブジェクトを作成します:

var xhttp = new XMLHttpRequest();

XMLHttpRequestオブジェクトのプロパティ:

readystate XMLHttpRequestのステータスを保持するXMLHttpRequestオブジェクトのプロパティです。

  • 0:リクエストは初期化されていません
  • 1:サーバー接続が確立されました
  • 2:リクエストを受け取りました
  • 3:リクエストの処理
  • 4:リクエストが終了し、レスポンスの準備ができました

`` `onreadystatechange```は、readyStateプロパティが変更されたときに呼び出される関数を定義するXMLHttpRequestオブジェクトのプロパティです。

`` `status```は、リクエストのステータス番号を返すXMLHttpRequestオブジェクトのプロパティです。

  • 200:「OK」
  • 403禁止します"
  • 404お探しのページが見つかりませんでした"

XMLHttpRequestオブジェクトメソッド: Webサーバーにリクエストを送信するには、XMLHttpRequestオブジェクトのopen()メソッドとsend()メソッドを使用します。

xhttp.open("GET", "content.txt", true); xhttp.send();

JavaScriptを使用して関数changeContent()を作成します。

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

Webページのコンテンツを変更するAJAXの例:

The XMLHttpRequest Object

Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

このファイルcontent.txtは、Webアプリケーションのルートディレクトリに存在する必要があります。