Implémenter l'imbrication ajax sans jquery

La technologie AJAX est une partie très importante du développement Web moderne, qui nous permet de charger dynamiquement du contenu, une communication interactive et un échange de données front-end et back-end. Cependant, à mesure que la technologie continue de se développer, de plus en plus de développeurs commencent à utiliser JavaScript natif sans utiliser la bibliothèque jQuery pour implémenter les requêtes AJAX afin d'éviter des dépendances supplémentaires. Cependant, de nombreux débutants ne sont pas encore familiers avec la méthode d'implémentation des requêtes AJAX en JavaScript natif, c'est pourquoi cet article partagera des conseils sur la façon d'implémenter des requêtes AJAX imbriquées sans utiliser la bibliothèque jQuery.

Introduction à AJAX

AJAX (JavaScript asynchrone et XML) est une technologie basée sur l'interaction asynchrone entre le navigateur et le serveur. Il peut émettre des requêtes HTTP et traiter des réponses via JavaScript, permettant à la page frontale d'établir une communication asynchrone et fonctions de rafraîchissement partiel. Le plus grand avantage d’AJAX est qu’il peut rendre l’interaction de la page très riche et qu’il peut également améliorer les performances du site Web.

Utilisez JS natif pour implémenter des requêtes AJAX imbriquées

Dans le développement Web traditionnel, nous avons souvent besoin d'utiliser la technologie AJAX pour implémenter certaines interactions avec le serveur. Parfois, nous devons envoyer une deuxième requête une fois la première requête AJAX terminée, mais pour des raisons de mise en œuvre et d'efficacité, nous ne souhaitons pas utiliser des bibliothèques telles que jQuery pour implémenter des requêtes AJAX imbriquées. Cet article montrera comment utiliser JavaScript natif pour implémenter cela. fonctionnalité.

1. Objet XMLHttpRequest

Lors de l'écriture d'AJAX en utilisant du JavaScript natif, nous devons utiliser l'objet XMLHttpRequest, également connu sous le nom de "XHR". L'objet XMLHttpRequest peut envoyer des requêtes au serveur et recevoir des réponses du serveur. Il peut prendre en charge plusieurs méthodes HTTP, telles que GET, POST, PUT, etc.

L'exemple de code est le suivant :

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. Objet Promise

Promise est un objet important dans ES6. Il peut exécuter un contenu spécifique lorsqu'une opération asynchrone est terminée, réalisant des tâches automatisées de traitement des opérations asynchrones. La méthode de base d'utilisation de Promise est la suivante :

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

3. Implémentation de requêtes AJAX imbriquées

Ensuite, nous utilisons Promise pour connecter plusieurs requêtes AJAX en série afin d'implémenter des requêtes asynchrones imbriquées. L'exemple de code est le suivant :

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); 
});

Le. au-dessus du code, nous définissons d'abord une fonction ajax, qui utilise Promise pour encapsuler le processus d'exécution de requêtes asynchrones par XMLHttpRequest, puis accédons à url1 dans l'ordre, et les résultats d'accès sont utilisés comme paramètres lors de l'accès à url2, et plusieurs adresses URL sont imbriquées dans l'ordre .

À ce stade, nous avons implémenté avec succès des requêtes AJAX imbriquées à l'aide de JavaScript natif et réalisé des opérations asynchrones élégantes sans recourir à des bibliothèques externes telles que jQuery. Cette méthode présente de grands avantages en termes d'optimisation des performances d'écriture et de restrictions environnementales, et constitue également un point de compétence important qui ne peut être ignoré dans le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!