jqueryを使用せずにajaxネスティングを実装する

AJAX テクノロジは、最新の Web 開発の非常に重要な部分であり、コンテンツの動的ロード、インタラクティブな通信、フロントエンドとバックエンドのデータ交換を可能にします。ただし、テクノロジーが発展し続けるにつれて、追加の依存関係を避けるために、jQuery ライブラリを使用せずにネイティブ JavaScript を使用して AJAX リクエストを実装する開発者が増えています。ただし、多くの初心者はネイティブ JavaScript で AJAX リクエストを実装する方法にまだ慣れていないため、この記事では、jQuery ライブラリを使用せずにネストされた AJAX リクエストを実装する方法に関するヒントを紹介します。

AJAX の概要

AJAX (Asynchronous JavaScript and XML) は、ブラウザとサーバー間の非同期対話に基づくテクノロジであり、JavaScript を介して HTTP リクエストを発行し、応答を処理することができます。終了ページは非同期通信と部分更新機能を実現します。 AJAX の最大の利点は、ページの対話を非常に豊かにすることができ、Web サイトのパフォーマンスも向上できることです。

ネイティブ JS を使用してネストされた AJAX リクエストを実装する

従来の Web 開発では、多くの場合、サーバーとのやり取りを実現するために AJAX テクノロジを使用する必要があります。場合によっては、最初の AJAX リクエストが完了した後に 2 番目のリクエストを送信する必要がありますが、実装と効率を考慮すると、入れ子になった AJAX リクエストを実装するために jQuery などのライブラリを使用したくありません。この記事では、ネイティブ JavaScript を使用してこれを実装する方法を説明します。機能性。

1. XMLHttpRequest オブジェクト

ネイティブ JavaScript を使用して AJAX を記述する場合は、「XHR」とも呼ばれる XMLHttpRequest オブジェクトを使用する必要があります。 XMLHttpRequest オブジェクトは、サーバーにリクエストを送信し、サーバーからの応答を受信できます。 GET、POST、PUT などの複数の HTTP メソッドをサポートできます。

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

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'url', true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4 && xhr.status == 200) { 
        console.log(xhr.responseText); 
    }
}; 
xhr.send();

2. Promise オブジェクト

Promise は ES6 の重要なオブジェクトであり、非同期のときに特定のアクションを実行できます。非同期操作を処理するタスクの自動化を実現するコンテンツ。 Promise を使用する基本的な方法は次のとおりです。

const promise = new Promise((resolve, reject) => { 
    // 异步操作
    if (异步操作成功)
        resolve('Success');
    else
        reject('Failure');
}); 
promise.then((value) => { 
    console.log(value); 
}).catch((error) => { 
    console.error(error); 
});

3. ネストされた AJAX リクエストを実装する

次に、Promise を使用して複数の AJAX リクエストを直列に接続し、ネストされた非同期リクエストを実現します。サンプルコードは次のとおりです。

function ajax(url) { 
    return new Promise(function (resolve, reject) { 
        var xhr = new XMLHttpRequest(); 
        xhr.open('GET', url, true); 
        xhr.onreadystatechange = function() { 
            if (xhr.readyState === 4 && xhr.status == 200) { 
                resolve(xhr.responseText); 
            } 
        }; 
        xhr.send(); 
    }); 
} 

ajax('url1').then(function(result1) { 
    return ajax('url2' + result1); 
}).then(function(result2) { 
    return ajax('url3' + result2); 
}).then(function(result3) { 
    console.log(result3); 
}).catch(function(error) { 
    console.error(error); 
});

上記のコードでは、まず、非同期リクエストを実行する XMLHttpRequest の処理を​​ Promise を使用してカプセル化する ajax 関数を定義し、その後 url1 に順番にアクセスし、結果は、url2 パラメータにアクセスするときと同様に使用され、ネストされて複数の URL アドレスに順番にアクセスします。

これまでのところ、ネイティブ JavaScript を使用してネストされた AJAX リクエストを実装し、jQuery などの外部ライブラリに依存せずにエレガントな非同期操作を実現することに成功しました。この方法は、書き込みパフォーマンスの最適化や環境制限の点で大きな利点があり、Web開発において無視できない重要なスキルポイントでもあります。

以上がjqueryを使用せずにajaxネスティングを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。