Comment faire des demandes AJAX avec JavaScript dans HTML5?

Comment faire des demandes ajax avec JavaScript dans HTML5?

Faire des demandes ajax dans HTML5 L'utilisation de JavaScript implique de tirer parti de l'objet xmlhttprequest (ou de l'objet fetch plus moderne). Voici comment le faire en utilisant les deux méthodes:

en utilisant xmlhttprequest :

 <code class="JavaScript"> fonction makeajaxrequest (url, méthode, callback) {const xhr = new xmlhttprequest (); xhr.open (méthode, URL); xhr.onload = function () {if (xhr.status & gt; = 200 & amp; & amp; xhr.status & lt; 300) {callback (null, xhr.Response); // Succès, passez la réponse à Callback} else {callback (xhr.status, null); // Erreur, passez le code d'état au rappel}}; xhr.onError = function () {callback (xhr.status, null); // gérer les erreurs de réseau}; xhr.send (); } // Exemple utilisation: makeajaxrequest ('data.json', 'get', fonction (error, réponse) {if (error) {console.error ('error:', error);} else {console.log ('réponse:', json.parse (réponse));}}); <code> makeajaxrequest </code> qui prend l'URL, la méthode http (get, post, etc.), et une fonction de rappel comme arguments. Il crée un objet <code> xmlhttprequest </code>, configure les écouteurs d'événements pour <code> onload </code> (demande réussie) et <code> onerror </code> (erreur réseau) et envoie la demande. La fonction de rappel gère la réponse ou l'erreur.  <p> <strong> en utilisant <code> fetch </code> api: </strong> </p> <pre class="brush:php;toolbar:false"> <code class="javascrip JSON.StRINGIFY (Body) // pour les demandes de poste avec JSON Data}; fetch (url, options) .then (réponse = & gt; {if (! réponse.ok) {throw new error (`Http error! status: $ {réponse json}}`);} return réponse.json (); // parse json réponse}) .then (data = & gt; {console.log ('réponse:', data);}). Console.Error ('Error:', Error);}); } // Exemple d'usage: MakeFetchRequest ('data.json', 'get') MakefetchRequest ('soumid_data.php', 'post', {name: & quot; John Doe & quot;, " john> </code>

the fetch api fournit une approche moderne. Il utilise des promesses, ce qui rend les opérations asynchrones plus faciles à gérer. L'exemple montre comment gérer les deux demandes Get et Poster, notamment l'envoi de données JSON dans le corps de la demande. N'oubliez pas d'ajuster l'en-tête de type contenu si nécessaire pour différents types de données.

Quels sont les principaux avantages de l'utilisation de l'Ajax pour le développement Web?

AJAX (Asynchrones JavaScript et XML) offre plusieurs avantages significatifs dans le développement Web:

• STROFT UTILISATE un rechargement complet. Il en résulte une expérience utilisateur plus rapide et plus réactive, car les utilisateurs n'ont pas à attendre que la page entière actualise après chaque interaction.
• Performances améliorées: En mettant uniquement les parties de la page, Ajax réduit la quantité de données transférées entre le client et le serveur, conduisant à des temps de chargement plus rapides et à une bande inférieure. Sites Web pour mettre à jour le contenu dynamiquement sans interrompre le flux de travail de l'utilisateur. Ceci est crucial pour des fonctionnalités telles que le chat en direct, les mises à jour en temps réel et les formulaires interactifs.
• Interactivité accrue: Ajax facilite la création d'applications Web hautement interactives. Les utilisateurs peuvent interagir avec les éléments et recevoir des commentaires immédiats sans rechargement de pages.
• Séparation des préoccupations: AJAX aide à séparer la couche de présentation (front-end) de la couche de données (back-end), la promotion de l'organisation du code et de la maintenabilité.

Les demandes AJAX sont cruciales pour créer des applications Web robustes et conviviales. Voici des stratégies clés:

• Vérifiez les codes d'état HTTP: Examinez toujours l'objet status de l'objet xmlhttprequest (ou la réponse.ok Propriété dans Fetch ) Une fois la demande terminée. Les codes d'état en dehors de la plage 200-299 indiquent une erreur (par exemple, 404 non trouvé, 500 erreurs de serveur interne).
• Gérer les erreurs de réseau: Implémentez la gestion des erreurs pour les problèmes de réseau (par exemple, le serveur est inaccessible). Écoutez l'événement onerror dans xmlhttprequest ou utilisez le .catch () Bloquer dans Fetch .
• Messages d'erreur spécifiques: Fournissez des messages d'erreur informatifs à l'utilisateur, plutôt que des messages d'erreur génériques. Cela aide les utilisateurs à comprendre le problème et à prendre les mesures appropriées. Envisagez d'utiliser un mécanisme centralisé d'erreurs pour enregistrer les erreurs à des fins de débogage.
• Mécanisme de réchauffement: pour les erreurs transitoires (par exemple, les pépins temporaires de réseau), envisagez d'implémenter un mécanisme de réchauffement qui remet automatiquement la demande après un bref délai.
• pour résoudre le problème. Cela améliore l'expérience utilisateur globale.

Exemple utilisant fetch avec une gestion détaillée des erreurs:

 <code class="javascript"> fetch (url) .then (réponse = & gt; {if (! Réponse.ok) {if (réponse. (Response.Status === 500) {Throw Error («Erreur du serveur. Veuillez réessayer plus tard. Console.Error ('Erreur:', Erreur); Applications:  <ul> <li> <strong> Ignorer la gestion des erreurs: </strong> Le défaut de mettre en œuvre une gestion des erreurs appropriée peut entraîner un comportement inattendu et une mauvaise expérience utilisateur. Anticipez toujours les erreurs potentielles et gérez-les gracieusement. </li> <li> <strong> Surutilisation de Ajax: </strong> Bien que l'Ajax soit puissant, ce n'est pas toujours la meilleure solution. L'utilisation de l'Ajax pour chaque petite tâche peut entraîner des frais généraux et une complexité inutiles. Considérez si un rafraîchissement complet serait plus simple et plus efficace. </li> <li> <strong> Manque d'indicateurs de progrès: </strong> pour les longues demandes de l'AJAX, en fournissant un indicateur de progrès (par exemple, un spinner de chargement) est crucial pour tenir l'utilisateur informé et empêcher la frustration. </li> <li> <frure> Strong> Security Vulnerabilities:  Strong> Ajax Demandes peuvent expliquer pour les risques de sécurité. Utilisez des mesures de sécurité appropriées, telles que la validation des entrées et le traitement sécurisé côté serveur. </frure>
</li> <li> <strong> Problèmes de mise en cache: </strong> La gestion de la mise en cache incorrecte peut entraîner une affichage de données périmées. Utilisez des en-têtes HTTP appropriés (par exemple, <code> Cache-Control </code>) pour gérer efficacement la mise en cache. </li> <li> <strong> Problèmes de partage des ressources (COR) (COR): </strong> Lorsque vous faites des demandes à un domaine différent, vous devez gérer correctement les COR pour éviter les erreurs. Assurez-vous que le serveur est configuré pour permettre les demandes de votre domaine. </li> <li> <strong> Le blocage du thread principal: </strong> Les opérations AJAX de longue durée peuvent bloquer le thread principal, ce qui fait que l'interface utilisateur ne soit pas réactive. Effectuez toujours de telles opérations de manière asynchrone pour éviter ce problème. Utilisez <code> async / attend </code> ou promet de gérer efficacement les opérations asynchrones. </li> </ul></code>

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!