JS Ajax リクエスト (簡体字) - プログラミング世界へよこそ

Ajax の正式名称は “Asynchronous JavaScript and XML” で、これは “asynchronous JavaScript and XML” と訳されています. プログラマーは、それを “Ajax” と呼ぶことに慣れています. JavaScript、XML、JSON、DOM、CSS、HTML、そして最も重要な XMLHttpRequest物体。 Ajax はサーバーから非同期にデータを要求し、そのデータを Web ページに更新できます. プロセス全体で Web ページ全体をリロード (更新) する必要はなく、Web ページのコンテンツをより速くユーザーに表示できます.

ここでの非同期とは、プログラムが Ajax コードを実行すると、Ajax コードが別のスレッドに渡されて実行され、実行結果に関係なく、現在のスレッドが引き続き下方向に実行されることを意味します。

ヒント: X は Ajax では XML を表しますが、JSON には多くの利点があるため (たとえば、JSON は JavaScript の一部であり、より軽量であるなど)、現在、JSON は Ajax でデータを送信するために一般的に使用されています。

コンテンツ 非表示

1. Ajax のしくみ

2. Ajax リクエストを送信する

3. 「 JS Ajax リクエスト (簡体字)」についてわかりやすく解説！絶対に観るべきベスト2動画

Ajax のしくみ

JavaScript は、ブラウザーの組み込み XMLHttpRequest オブジェクトを使用して、HTTP 要求をサーバーに送信し、サーバーからの応答でデータを受信する必要があります。

ヒント: 現在、すべてのブラウザー (Chrome、Firefox、IE7 以降、Safari、Opera など) が XMLHttpRequest オブジェクトをサポートしています。

次の図は、Ajax 通信がどのように機能するかを示しています。

Ajax リクエストは非同期で実行されるため、Ajax リクエストが送信された後、コードは終了するまで実行され続けます。

Ajax リクエストを送信する

Ajax リクエストを送信するには、まず XMLHttpRequest オブジェクトをインスタンス化する必要があります。サンプルコードは次のとおりです。

var request = new XMLHttpRequest();

次に、XMLHttpRequest オブジェクトの open() メソッドを使用してリクエストを初期化します。open() メソッドの構文は次のとおりです。

XMLHttpRequest.open(メソッド、URL、非同期、ユーザー、パスワード);

パラメータの説明は次のとおりです。

method: GET、POST、PUT、HEAD、DELETE などのリクエストのタイプ (使用される HTTP メソッド)。
url: 要求されたアドレス。
async: オプションのパラメーター。ブール型。リクエストが非同期で実行されるかどうかを示します。デフォルト値は true です。
user: オプションのパラメータで、主に認証に使用されるユーザー名を示します。デフォルト値は null です。
password: 認証にも使用されるパスワードを示すオプションのパラメータで、デフォルト値はnullです。

ヒント: 先ほど紹介した「 Cookie 」と同様に、Ajax にもサーバー環境が必要です。

サンプルコードは次のとおりです。

 var request = new XMLHttpRequest();
request.open('GET', 'test.php'); 

変数requestに新しいXMLHttpRequestオブジェクトを割り当てます。そして、openメソッドを使って、GETメソッドでtest.phpにリクエストを送信するように設定します。

ヒント: 通常、要求アドレスは、サーバー側のスクリプトファイル (.php や .asp 形式のファイルなど) であり、サーバーが応答情報をブラウザーに送信する前に、サーバーからのデータのクエリや書き込みなど、特定の操作を実行できます。データベース。

最後に、XMLHttpRequest オブジェクトの send() メソッドを使用して、リクエストをサーバーに送信します. send() メソッドの構文は次のとおりです:

XMLHttpRequest.send(本体);

このうちbodyは任意のパラメータで、リクエストボディ、つまりリクエストで送信するデータを示します.GETリクエストを送信するなど、リクエスト中にデータを送信する必要がない場合は、このパラメータを無視してかまいません.または null を渡します。

ヒント: リクエストメソッドが GET または HEAD の場合、リクエストボディを null に設定するか、リクエストボディを無視する必要があります。

サンプルコードは次のとおりです。

 var request = new XMLHttpRequest();
request.open（ 'GET', './test.php'）;
request.send(null);

リクエストが正常に送信された後 (つまり、send() メソッドを使用してリクエストが送信された後)、サーバーの応答情報は、XMLHttpRequest オブジェクトを取得することで取得できます. XMLHttpRequest オブジェクトには、応答に関連する多くの属性があります。、例えば：

XMLHttpRequest.readyState: リクエストのステータスコードを示す符号なし整数。値は次のとおりです。
- 0: 初期化されていません。open() メソッドは呼び出されていません。
- 1: 開始、open() メソッドが呼び出されましたが、send() メソッドはまだ呼び出されていません。
- 2: 送信、send() メソッドが呼び出されましたが、応答がまだ受信されていません。
- 3: 受信、応答データの一部が受信されましたが、まだ完了していません。
- 4: 完了。すべての応答データが受信され、クライアントで使用できます。
XMLHttpRequest.onreadystatechange: readyState の値が変化したときに呼び出される関数 (コールバック関数) を指定します。
XMLHttpRequest.responseText: リクエストのレスポンス情報。リクエストが成功しなかった場合、またはリクエストが送信されなかった場合は null になります。
XMLHttpRequest.responseType: 応答に含まれるデータのタイプを指定するために使用される列挙値。
XMLHttpRequest.responseURL: シリアライズされた応答の URL (要求された URL と同じ) を返します。URL が空の場合は空の文字列を返します。
XMLHttpRequest.responseXML: HTML または XML を含む Document オブジェクトを返し、要求が失敗した場合、送信されなかった場合、または応答データを XML または HTML に解析できない場合は null を返します。
XMLHttpRequest.status: リクエストのレスポンスステータスコードを示す符号なし整数. 一般的なレスポンスステータスコードは次のとおりです:
- 200: リクエストは成功し、サーバーはリクエストを正常に処理しました。
- 404: リクエストが失敗しました。サーバーはリクエストされたページを見つけられませんでした。
- 500: サーバーは一時的に利用できません。
XMLHttpRequest.statusText: 「OK」や「Not Found」など、応答ステータスのテキスト情報を示す文字列。
XMLHttpRequest.timeout: リクエストのタイムアウト時間をミリ秒単位で示す符号なし整数. この時間を超えると、リクエストは自動的に終了します. デフォルト値は 0 です.これはタイムアウト時間がないことを意味します.
XMLHttpRequest.upload: アップロードの進行状況を示すために使用される XMLHttpRequestUpload オブジェクトを返します。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="result"></div>
    <button type="button" onclick="displayFullName()">クリックしてリクエストを送信</button>
    <script>
        function displayFullName() {
            // XMLHttpRequestオブジェクトの作成
            var request = new XMLHttpRequest();

            // リクエストオブジェクトのインスタンス化
            request.open("GET", "test.php?name=IT基礎&url=https://it-kiso.com/");

            // readyStateの変化をリッスンする
            request.onreadystatechange = function() {
                // リクエストが成功したかどうかを確認する
                if(this.readyState === 4 && this.status === 200) {
                    // サーバーからのレスポンスを現在のページに挿入する
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            // サーバーにリクエストを送信する
            request.send();
        }
    </script>
</body>
</html>

test.php ファイルのコードは次のとおりです。

 <?php
    if(isset($_GET["name"]) && isset($_GET["url"])) {
        $name = htmlspecialchars($_GET["name"]);
        $url = htmlspecialchars($_GET["url"]);

        // ウェルカムメッセージを出力
        echo " $nameさん、ようこそ！本サイトのURLは：$urlです。";
    } else {
        echo "こんにちは！当サイトを訪問していただきありがとうございます。";
    }
?>