Un guide de la vanille Ajax sans jQuery

Les plats clés

• Ajax, abréviation de JavaScript asynchrones et XML, permet des mises à jour de page partielles, réduisant le besoin d'un actualisation pleine page et permettant des expériences d'utilisateurs plus fluides. L'anatomie de base d'une demande AJAX consiste à créer une instance de la classe requise pour une demande HTTP, à spécifier la méthode de demande HTTP et l'URL de la page, et envoyant la demande.
• Bien que jQuery puisse simplifier les demandes AJAX, ce n'est pas toujours nécessaire. L'API AJAX en JavaScript Vanilla a subi des améliorations significatives, et la spécification XMLHTTPREQuest est désormais traitée comme une seule entité du point de vue des normes, indiquant un engagement de la communauté pour s'en tenir à une norme.
• Vanilla Ajax fournit une API frontale flexible et moderne. Il permet de définir des en-têtes de demande, de spécifier le type de réponse attendu du serveur et de casser le cache du navigateur. Alors que l'Ajax était autrefois un processus complexe, il est devenu plus simple et convivial.

abréviation de JavaScript asynchrone et XML, AJAX est un mécanisme pour effectuer des mises à jour de page partielles. Il vous permet de mettre à jour les sections d'une page avec des données provenant du serveur, tout en évitant la nécessité d'un rafraîchissement complet. Faire des mises à jour partiels de cette manière peut être efficace pour créer des expériences utilisateur fluides et peut diminuer la charge sur le serveur.

Il s'agit de l'anatomie d'une demande de base ajax:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Ici, nous créons une instance de la classe requise pour faire une demande HTTP au serveur. Nous appelons ensuite sa méthode ouverte, spécifiant la méthode de demande HTTP comme premier paramètre et l'URL de la page que nous demandons comme seconde. Enfin, nous appelons sa méthode Send, passant Null en tant que paramètre. Si vous publiez la demande (ici nous utilisons Get), ce paramètre doit contenir toutes les données que nous souhaitons envoyer avec la demande.

Et c'est ainsi que nous traitons la réponse du serveur:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

L'ONREADYSTATECHANGE est asynchrone, ce qui signifie qu'il est appelé à tout moment. Ces types de fonctions sont des rappels - celui qui est appelé une fois que certains traitements se terminent. Dans ce cas, le traitement se produit sur le serveur.

Pour ceux qui souhaitent en savoir plus sur les bases de l'Ajax, le réseau MDN a un bon guide.

à jQuery ou à ne pas jQuery?

Donc, la bonne nouvelle est que le code ci-dessus fonctionnera dans tous les derniers navigateurs majeurs. La mauvaise nouvelle est, eh bien, qu'elle est assez alambiquée. Beurk! Je suis déjà en train d'espirer pour une solution élégante.

En utilisant jQuery, on pourrait condenser l'extrait entier pour:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Ce qui est sympa. Et en effet pour beaucoup, y compris le vôtre vraiment, JQuery est devenu la norme de facto en ce qui concerne l'Ajax. Mais tu sais quoi? Cela ne doit pas être le cas. JQUERY existe pour contourner l'API laide DOM. Mais, est-ce vraiment que laid? Ou incompréhensible?

Dans le reste de cet article, je voudrais enquêter sur les améliorations apportées à l'API Ajax dans Vanilla JavaScript. La spécification entière peut être trouvée sur le W3C. Ce qui me frappe à propos de cette spécification, c'est le nom. Ce n'est plus «XMLHTTPREQUEST NIVEAL 2» mais «XMLHTTPREQUEST NIVEAL 1» - le résultat d'une fusion de 2011 entre les deux spécifications. À l'avenir, il sera traité comme une seule entité du point de vue des normes et la norme vivante sera appelée XMLHttpRequest. Cela montre qu'il y a un engagement de la communauté de s'en tenir à une norme, et cela ne peut signifier que de bonnes nouvelles pour les développeurs qui veulent se libérer de jQuery.

Alors commençons…

Configuration

Pour cet article, j'utilise Node.js sur le back-end. Oui, il y aura JavaScript sur le navigateur et sur le serveur. Le back-end Node.js est Lean, je vous encourage à télécharger toute la démo sur Github et à suivre. Voici la viande et les pommes de terre de ce qui se trouve sur le serveur:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Cela vérifie l'URL de demande pour déterminer comment l'application doit répondre. Si la demande provient du répertoire des scripts, le fichier approprié est servi avec le type de contenu d'application / javascript. Sinon, si les en-têtes de la demande en X-With ont été définis sur XMLHTTPREQUESQUE, nous savons que nous avons affaire à une demande Ajax et nous pouvons répondre de manière appropriée. Et si aucun de ces éléments n'est le cas, les vues du fichier / index.html sont servies.

J'élargirai la section commentée lorsque nous plongeons dans les réponses AJAX du serveur. Dans Node.js, j'ai dû faire un peu de haut avec le rendu et le httphandler:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

La fonction de rendu lit de manière asynchrone le contenu du fichier demandé. Il est transmis une référence à la fonction httphandler, qu'il exécute ensuite en tant que rappel. La fonction httphandler vérifie la présence d'un objet d'erreur (qui serait présent, par exemple, si le fichier demandé ne pouvait pas être ouvert). Fournir tout est bon, il sert ensuite le contenu du fichier avec le code d'état HTTP et le type de contenu approprié.

tester l'API

Comme avec toute API back-end, écrivons quelques tests unitaires pour vous assurer que cela fonctionne. Pour ces tests, j'appelle SuperTest et Mocha pour obtenir de l'aide:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Ceux-ci garantissent que notre application répond avec le type de contenu correct et le code d'état HTTP à différentes demandes. Une fois que vous avez installé les dépendances, vous pouvez exécuter ces tests à partir de la commande à l'aide du test NPM.

L'interface

Maintenant, jetons un coup d'œil à l'interface utilisateur que nous construisons en HTML:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

Le HTML est joli et soigné. Comme vous pouvez le voir, toute l'excitation se produit en javascript.

onreadystate vs onload

Si vous passez par un livre canonique Ajax, vous pouvez trouver sur le stade partout. Cette fonction de rappel est complète avec des IF imbriqués et beaucoup de peluches qui rendent difficile de se souvenir du haut de votre tête. Mettons les événements OnreadyState et Onload tête à tête.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Il s'agit de la sortie de la console:

L'événement OnreadyState se déclenche partout. Il tire au début de chaque demande, à la fin, et parfois simplement parce qu'il aime vraiment se faire virer. Mais selon le SPEC, l'événement Onload ne se déclenche que lorsque la demande réussit . Ainsi, l'événement Onload est une API moderne que vous pouvez mettre à bon escient en quelques secondes. L'événement OnreadyState est là pour être compatible en arrière. Mais, l'événement Onload devrait être votre outil de choix. L'événement Onload ressemble au rappel de réussite sur jQuery, n'est-ce pas?

Il est temps de mettre de côté les haltères de 5 lb et de passer à des boucles de bras

Réglage des en-têtes de demande

jQuery définit les en-têtes de demande sous les couvertures afin que votre technologie back-end sache qu'il s'agit d'une demande AJAX. En général, le back-end ne se soucie pas d'où la demande de GET provient tant qu'elle envoie la réponse appropriée. Cela est utile lorsque vous souhaitez prendre en charge Ajax et HTML avec la même API Web. Alors, voyons comment définir les en-têtes de demande dans Vanilla Ajax:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

Avec cela, nous pouvons effectuer un chèque dans Node.js:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Comme vous pouvez le voir, Vanilla Ajax est une API frontale flexible et moderne. Il y a une tonne d'idées pour lesquelles vous pouvez utiliser les en-têtes de demande, et l'une d'elles est le versioning. Ainsi, par exemple, disons que je souhaite prendre en charge plus d'une version de cette API Web. Ceci est utile lorsque je ne veux pas casser les URL et fournir à la place un mécanisme dans lequel les clients peuvent choisir la version qu'ils souhaitent. Nous pouvons définir l'en-tête de demande comme tel:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

et dans le back-end, essayez:

// app.js
function render(path, contentType, fn) {
  fs.readFile(__dirname + '/' + path, 'utf-8', function (err, str) {
    fn(err, str, contentType);
  });
}
var httpHandler = function (err, str, contentType) {
  if (err) {
    res.writeHead(500, {'Content-Type': 'text/plain'});
    res.end('An error has occured: ' + err.message);
  } else {
    res.writeHead(200, {'Content-Type': contentType});
    res.end(str);
  }
};

node.js vous donne un objet en-têtes que vous pouvez utiliser pour vérifier les en-têtes de demande. La seule astuce est qu'elle les lit en minuscules.

Nous sommes à la maison et nous n'avons pas transpiré! Vous vous demandez peut-être, quoi d'autre doit-il savoir sur Ajax? Eh bien, que diriez-vous de quelques astuces soignées.

Types de réponse

Vous vous demandez peut-être pourquoi ResponseText contient la réponse du serveur lorsque tout ce avec quoi je travaille est un vieux JSON. Il s'avère que c'est parce que je n'ai pas réglé le vrai reponsetype. Cet attribut AJAX est idéal pour indiquer à l'API frontal quel type de réponse à attendre du serveur. Alors, mettons cela à bon escient:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

génial, au lieu de renvoyer un texte brut que je dois ensuite analyser JSON, je peux dire à l'API à quoi m'attendre. Cette fonctionnalité est disponible dans presque tous les derniers navigateurs majeurs. JQUERY, bien sûr, fait automatiquement ce type de conversion. Mais n'est-ce pas génial que nous ayons maintenant une façon pratique de faire de même en JavaScript ordinaire? Vanilla Ajax prend en charge de nombreux autres types de réponse, notamment XML.

Malheureusement, dans Internet Explorer, l'histoire n'est pas aussi géniale. À IE 11, l'équipe n'a pas encore ajouté de support pour xhr.ResponSetype = «JSON». Cette fonctionnalité doit arriver sur Microsoft Edge. Mais, le bogue est exceptionnel depuis près de deux ans au moment de la rédaction. Je suppose que les gens de Microsoft ont travaillé dur pour réorganiser le navigateur. Espérons que Microsoft Edge, alias Project Spartan, tient ses promesses.

Hélas, si vous devez contourner ce problème, c'est-à-dire:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

casser le cache

Une caractéristique du navigateur que les gens ont tendance à oublier est la capacité de mettre en cache les demandes AJAX. Internet Explorer, par exemple, le fait par défaut. J'ai eu du mal pendant des heures à essayer de comprendre pourquoi mon Ajax ne fonctionnait pas à cause de cela. Heureusement, JQuery éclate le cache du navigateur par défaut. Eh bien, vous pouvez aussi dans l'Ajax ordinaire et c'est assez simple:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Selon la documentation jQuery, tout ce qu'il fait est d'ajouter une chaîne de requête horodato à la fin de la demande. Cela rend la demande un peu unique et détruit le cache du navigateur. Vous pouvez voir à quoi cela ressemble lorsque vous licenciez les demandes HTTP AJAX:

tada! Tout sans drame.

Conclusion

J'espère que vous avez apprécié le développé couché de 300 lb Vanilla Ajax. Un à un moment, Ajax était une bête terrible, mais pas plus. En fait, nous avons couvert toutes les bases de l'Ajax sans les béquilles, les chaînes ahem, de jQuery.

Je vous laisserai avec une façon succincte de passer des appels Ajax:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

Et c'est à quoi ressemble la réponse:

N'oubliez pas, vous pouvez trouver la démo entière sur GitHub. Je me réjouirais d'entendre vos pensées ajax avec et sans jQuery dans les commentaires.

Questions fréquemment posées (FAQ) sur Vanilla Ajax sans jQuery

Qu'est-ce que Vanilla Ajax et en quoi diffère-t-il de jQuery Ajax?

Vanilla Ajax fait référence à l'utilisation de JavaScript natif pour créer des applications Web asynchrones, sans s'appuyer sur la bibliothèque JQuery. Alors que JQuery Ajax fournit une méthode simplifiée compatible avec le navigateur pour manipuler Ajax, Vanilla Ajax vous donne plus de contrôle et de compréhension des processus sous-jacents. C'est aussi une excellente option si vous souhaitez réduire les dépendances sur les bibliothèques externes comme jQuery.

Comment créer une demande AJAX de base à l'aide de Vanilla JavaScript?

Création d'une demande AJAX de base avec Vanilla JavaScript implique l'utilisation de l'objet XMLHTTPREQUEST. Cet objet vous permet d'envoyer des demandes HTTP ou HTTPS à un serveur Web et de recharger les données de réponse du serveur dans votre script. Voici un exemple simple:

var xhr = new xmlhttprequest ();
xhr.open ("get", 'https://api.example.com/data', true);
xhr.onreadystateChange = function () {
if (xhr.readystate == 4 && xhr.status == 200)
Console.log (JSON.Parse (xhr.ResponSeText));
}
xhr.send ();

comment puis-je gérer les erreurs dans la vanille ajax?

La gestion des erreurs dans Vanilla Ajax peut être effectuée en utilisant le gestionnaire d'événements ONERROR de l'objet XMLHTTPRequest. Cet événement est déclenché lorsqu'une erreur se produit lors de la demande d'Ajax. Voici un exemple:

var xhr = new xmlhttprequest ();
xhr.open ("get", 'https://api.example.com/data', true);
xhrr .onError = function () {
console.log ("demande Échec ");
};
xhr.send ();

La méthode ouverte de l'objet XMLHTTPRequest accepte la méthode HTTP comme son premier argument. Ainsi, vous pouvez remplacer «Get» par «Post». N'oubliez pas de définir l'en-tête de type contenu à l'aide de la méthode setRequestHeader avant d'envoyer la demande.

Comment puis-je envoyer des données JSON dans une demande publique utilisant Vanilla Ajax?

pour envoyer des données JSON dans un post Demande, vous devez chaîner l'objet JSON et l'envoyer sous forme de corps de la demande. Définissez également l'en-tête de type contenu sur Application / JSON. Voici un exemple:

var xhr = new xmlhttprequest ();
xhr.open ("post", 'https://api.example.com/data', true);
xhrr .SetRequestHeader ("Content-Type", "application / json");
xhr.send (json.stringify ({key: "value"}));

comment puis-je annuler une demande ajax dans Vanilla javascript?

Vous pouvez annuler une demande AJAX en appelant la méthode AbORT de l'objet XMLHTTPRequest. Cela finira immédiatement la demande.

Puis-je faire des demandes AJAX synchrones à l'aide de JavaScript Vanilla?

Oui, mais il n'est pas recommandé car il peut bloquer l'exécution de votre script et rendre votre page Web sans réaction et ne pas répondre à . Pour faire une demande synchrone, passez FALSE comme troisième argument à la méthode ouverte.

Comment puis-je surveiller la progression d'une demande Ajax?

Vous pouvez surveiller la progression d'une demande Ajax en utilisant Le gestionnaire d'événements OnProgress de l'objet XMLHttpRequest. Cet événement est déclenché plusieurs fois, fournissant les informations de progression actuelles.

Puis-je utiliser Vanilla Ajax avec d'autres bibliothèques ou frameworks JavaScript?

Oui, Vanilla Ajax peut être utilisée avec n'importe quelle bibliothèque ou cadre JavaScript . C'est une fonctionnalité JavaScript native et ne dépend d'aucune bibliothèque externe.

Vanilla Ajax est-il soutenu par tous les navigateurs?

Vanilla Ajax, à l'aide de l'objet XMLHTTPRequest, est pris en charge par tous les navigateurs modernes. Cependant, les versions plus anciennes d'Internet Explorer (IE 6 et plus tôt) utilisent un objet ActiveX pour Ajax.

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!