TECH I.S.

AJAX - XMLHttpRequestオブジェクト

AJAXの要はXMLHttpRequestオブジェクトです。


  1. XMLHttpRequestオブジェクトを作成する

  2. コールバック関数を定義する

  3. XMLHttpRequestオブジェクトを開く

  4. サーバーにリクエストを送信する



XMLHttpRequestオブジェクト

最新のブラウザはすべてこのXMLHttpRequestオブジェクトをサポートしています。

このXMLHttpRequestオブジェクトは、バックグラウンドでWebサーバーとデータを交換するために使用できます。これは、ページ全体をリロードしなくても、Webページの一部を更新できることを意味します。

XMLHttpRequestオブジェクトを作成する

最新のすべてのブラウザー(Chrome、Firefox、IE、Edge、Safari、Opera)には組み込みのXMLHttpRequestオブジェクトがあります。

XMLHttpRequest:オブジェクトを作成するための構文
<div><i>variable </i>= new XMLHttpRequest();</div>

コールバック関数を定義する

コールバック関数は、パラメーターとして別の関数に渡される関数です。

この場合、コールバック関数には、応答の準備ができたときに実行するコードが含まれている必要があります。

xhttp.onload = function() {   // What to do when the response is ready }

リクエストを送る

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

xhttp.open("GET", "ajax_info.txt"); xhttp.send();

例

// Create an XMLHttpRequest object const xhttp = new XMLHttpRequest(); // Define a callback function xhttp.onload = function() {   // Here you can use the Data } // Send a request xhttp.open("GET", "ajax_info.txt"); xhttp.send();

自分で試してみる»

ドメイン間のアクセス

セキュリティ上の理由から、最近のブラウザではドメインをまたがるアクセスが許可されていません。

これは、WebページとWebページがロードしようとするXML ファイルの両方が同じサーバー上に存在する必要があることを意味します。

W3Schoolsの例はすべて、W3SchoolsドメインにあるXMLファイルを開きます。

上記の例を独自のWebページで使用する場合、ロードするXMLファイルは独自のサーバーに配置する必要があります。

XMLHttpRequestオブジェクトのメソッド




Method

Description
new XMLHttpRequest() 新しいXMLHttpRequestオブジェクトを作成します
abort（） 現在のリクエストをキャンセルします
getAllResponseHeaders() ヘッダ情報を返す
getResponseHeader() 特定のヘッダー情報を返します
open（method、URL、async、user、psw) リクエストを指定します

method:リクエストタイプGETまたはPOST

URL:ファイルの場所
async:true(非同期)またはfalse (同期)

user:オプションのユーザー名

psw:オプションのパスワード
send（） リクエストをサーバーに送信します

GETリクエストに使用
send（string) リクエストをサーバーに送信します

POSTリクエストに使用
setRequestHeader() 送信するヘッダーにラベル/値のペアを追加します

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



Property

Description
onload リクエストが受信された(ロードされた)ときに呼び出される関数を定義します
onreadystatechange readyStateプロパティが変更されたときに呼び出される関数を定義します
readyState XMLHttpRequestのステータスを保持します

0: リクエストは初期化されていません

1: サーバー接続が確立されました

2: リクエストを受け取りました

3: リクエストの処理

4: リクエストが終了し、レスポンスの準備ができています
responseText 応答データを文字列として返します
responseXML 応答データをXMLデータとして返します
status リクエストのステータス番号を返します

200:"OK"

403:"禁止します"

404:"お探しのページが見つかりませんでした"

完全なリストについては、Http
メッセージリファレンス
statusText ステータステキストを返します(例:"OK"または"Not Found")

onloadプロパティ

このXMLHttpRequestオブジェクトを使用すると、リクエストが応答を受け取ったときに実行されるコールバック関数を定義できます。

この関数は、XMLHttpRequestオブジェクトのonloadプロパティで定義されます。

例

xhttp.onload = function() {   document.getElementById("demo").innerHTML = this.responseText; } xhttp.open("GET", "ajax_info.txt"); xhttp.send();

自分で試してみる»

複数のコールバック関数

Webサイトに複数のAJAXタスクがある場合は、オブジェクトを実行するための関数を1つ作成しXMLHttpRequest、AJAX タスクごとにコールバック関数を1つ作成する必要があります。

関数呼び出しには、URLと、応答の準備ができたときに呼び出す関数を含める必要があります。

例

loadDoc("<em>url-1</em>", myFunction1); loadDoc("<em>url-2</em>", myFunction2); function loadDoc(url, cFunction) {   const xhttp = new XMLHttpRequest();   xhttp.onload = function() {cFunction(this);}   xhttp.open("GET", url);   xhttp.send(); } function myFunction1(xhttp) {   // action goes here } function myFunction2(xhttp) {   // action goes here }

onreadystatechangeプロパティ

このreadyStateプロパティは、XMLHttpRequest のステータスを保持します。

このonreadystatechangeプロパティは、readyStateが変化したときに実行されるコールバック関数を定義します。

プロパティstatusとstatusTextプロパティはXMLHttpRequestオブジェクトのステータスを保持します。




Property

Description
onreadystatechange readyStateプロパティが変更されたときに呼び出される関数を定義します
readyState XMLHttpRequestのステータスを保持します

0: リクエストは初期化されていません

1: サーバー接続が確立されました

2: リクエストを受け取りました

3: リクエストの処理

4: リクエストが終了し、レスポンスの準備ができています
status 200:"OK"

403:"禁止します"

404:"ページが見つかりません"

完全なリストについては、HTTPメッセージリファレンス
statusText ステータステキストを返します(例:"OK"または"Not Found")

このonreadystatechange関数は、readyStateが変化するたびに呼び出されます。

readyStateが4でステータスが200の場合、応答は準備完了です。

例

function loadDoc() {   const 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");   xhttp.send(); }

自分で試してみる»

イベントonreadystatechangeは、readyStateが変化するたびに1回ずつ、計4回(1～4)トリガーされます。



チュートリアル