Ajax リクエストのタイムアウトを設定するにはどうすればよいですか?

Ajax リクエストの有効期限を設定するにはどうすればよいですか?特定のコード サンプルが必要です

インターネット アプリケーションの開発に伴い、Ajax は Web 開発に不可欠な部分になりました。 Ajax リクエストを送信する場合、リクエストが長すぎてユーザー エクスペリエンスが低下したり、ブラウザがフリーズしたりすることを防ぐために、リクエストの有効期限を制限する必要がある場合があります。この記事では、Ajax リクエストの有効期限を設定する方法と具体的なコード例を詳しく紹介します。

Ajax リクエストの有効期限の設定は、主に XMLHttpRequest オブジェクトの timeout 属性を通じて行う必要があります。このプロパティは、リクエストの最大待機時間を設定するために使用されます (ミリ秒単位)。この時間が経過すると、リクエストはキャンセルされます。 Ajax リクエストの有効期限を設定するには、次の手順に従います。

ステップ 1: XMLHttpRequest オブジェクトを作成する
Ajax リクエストを送信するには、まず XMLHttpRequest オブジェクトを作成する必要があります。次のコードを使用して、主要なブラウザと互換性のある XMLHttpRequest オブジェクトを作成できます。

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

ステップ 2: リクエスト パラメータと有効期限を設定する
Ajax リクエストを送信する前に、リクエスト パラメータを設定する必要があります。そして有効期限です。次のコードは、Ajax リクエストのパラメータと有効期限を設定する方法を示しています。

xhr.open("GET", "your_url_here", true);
xhr.timeout = 5000; // 设置请求的过期时间为5秒（5000毫秒）

上記のコードでは、open() メソッドを使用してリクエスト タイプ (GET) とアドレス (your_url_here) を設定します。 3 番目の各パラメータを true に設定して、非同期リクエストを示します。次に、timeout 属性を使用して、リクエストの有効期限を 5000 ミリ秒 (つまり 5 秒) に設定します。

ステップ 3: リクエスト ステータスの変化を監視する
Ajax リクエストを送信した後、リクエストが完了するかタイムアウトになったときに適切に処理できるように、リクエスト ステータスの変化を監視する必要があります。以下は、リクエスト ステータスの変更を監視するコード例です。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，执行相应的操作
        } else {
            // 请求失败，执行相应的操作
        }
    }
};

xhr.ontimeout = function() {
    // 请求超时，执行相应的操作
};

上記のコードでは、onreadystatechange 属性を使用してリクエスト ステータスの変更をリッスンします。 readyState が 4 の場合、リクエストが完了したことを示します。ステータスが 200 に等しい場合は、リクエストが成功し、対応する操作が実行されることを意味します。それ以外の場合は、リクエストが失敗し、対応する操作が実行されることを意味します。リクエストがタイムアウトすると、ontimeout イベントがトリガーされ、対応するコールバック関数でタイムアウトを処理できます。

ステップ 4: Ajax リクエストを送信する
最後のステップは、Ajax リクエストを送信することです。次のコードは、Ajax リクエストを送信し、対応する操作を実行する方法を示しています。

xhr.send();

上記のコードでは、send() メソッドを使用して Ajax リクエストを送信します。

要約すると、上記の手順により、Ajax リクエストの有効期限を簡単に設定できます。以下は完全なコード例です:

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，执行相应的操作
        } else {
            // 请求失败，执行相应的操作
        }
    }
};

xhr.ontimeout = function() {
    // 请求超时，执行相应的操作
};

xhr.open("GET", "your_url_here", true);
xhr.timeout = 5000; // 设置请求的过期时间为5秒（5000毫秒）
xhr.send();

上記のコード例を通じて、実際のニーズに応じて Ajax リクエストの有効期限を設定し、リクエストが完了するかタイムアウトになったときに対応する操作を実行できます。この記事が、Ajax リクエストの有効期限設定の理解と使用に役立つことを願っています。

以上がAjax リクエストのタイムアウトを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。