Explication détaillée du fonctionnement d'AJAX et de ses avantages et inconvénients

Cet article expliquera le principe de fonctionnement d'ajax et son contenu associé.

1. AJAX signifie « Asynchronous JavaScript and XML », qui est une technologie de développement Web permettant de créer des applications Web interactives. Il utilise :

Utiliser XHTML+CSS pour standardiser la présentation ;

Utiliser XML et XSLT pour l'échange de données et les opérations associées ;

Utiliser ; L'objet XMLHttpRequest communique des données asynchrones avec le serveur Web ;

utilise JavaScript pour faire fonctionner le modèle d'objet de document pour l'affichage et l'interaction dynamiques ;

utilise JavaScript pour lier et traiter toutes les données.

2. L'interaction avec une application Web traditionnelle implique que l'utilisateur déclenche une requête HTTP vers le serveur. Le serveur la traite puis renvoie une nouvelle page HTHL au client. Chaque fois que le serveur traite une requête soumise par le client. le client ne peut qu'attendre inactif, et même s'il ne s'agit que d'une petite interaction et n'a besoin que d'obtenir une simple donnée du serveur, une page HTML complète doit être renvoyée et l'utilisateur doit perdre du temps et de la bande passante pour la relire à chaque fois. Prenez la page entière. Cette approche gaspille beaucoup de bande passante. Puisque chaque interaction avec l'application nécessite l'envoi d'une requête au serveur, le temps de réponse de l'application dépend du temps de réponse du serveur. Cela se traduit par une interface utilisateur beaucoup moins réactive que les applications natives.

À la différence de cela, une application AJAX peut uniquement envoyer et récupérer les données nécessaires au serveur. Elle utilise SOAP ou une autre interface de service Web basée sur XML et utilise JavaScript sur le client pour traiter les données. de la réponse du serveur. Parce que beaucoup moins de données sont échangées entre le serveur et le navigateur, nous constatons ainsi des applications plus réactives. Dans le même temps, de nombreux travaux de traitement peuvent être effectués sur la machine client qui effectue la demande, ce qui réduit également le temps de traitement du serveur Web.

3. Le principe de fonctionnement d'AJAX : Le principe de fonctionnement d'Ajax équivaut à ajouter une couche intermédiaire (moteur AJAX) entre l'utilisateur et le serveur, rendant les opérations de l'utilisateur et les réponses du serveur asynchrones. Toutes les demandes des utilisateurs ne sont pas soumises au serveur. Certaines vérifications et traitements des données sont laissés au moteur Ajax lui-même. Ce n'est que lorsqu'il est déterminé que de nouvelles données doivent être lues à partir du serveur que le moteur Ajax soumettra la demande au serveur. en son nom.

Le noyau d'Ajax est composé d'objets JavaScript, XMLHTTPRequest et DOM. Il envoie des requêtes asynchrones au serveur via l'objet XmlHttpRequest, obtient les données du serveur, puis utilise JavaScript pour faire fonctionner le DOM et mettre à jour le DOM. page. L’étape la plus critique consiste à obtenir les données de la demande auprès du serveur. Découvrons ces objets.

(1).Objet XMLHTTPRequest

L'une des plus grandes fonctionnalités d'Ajax est qu'il peut transmettre ou lire et écrire des données sur le serveur sans actualiser la page (également connu sous le nom de mise à jour de la page sans rafraîchissant). Cette fonctionnalité est principalement due à l'objet XMLHTTPRequest du composant XMLHTTP.

Description de la méthode objet XMLHttpRequest :

abort() : Arrête la requête en cours

getAllResponseHeaders() : Renvoie tous les en-têtes de réponse de la requête HTTP sous forme de clé/valeur paires

getResponseHeader("header") : renvoie la valeur de chaîne de l'en-tête spécifié

open("method","URL",[asyncFlag],["userName"],[" password"] ) : Effectue un appel au serveur. Le paramètre de méthode peut être GET, POST ou PUT. Le paramètre url peut être une URL relative ou une URL absolue. Cette méthode comprend également 3 paramètres optionnels, qu'elle soit asynchrone, nom d'utilisateur, mot de passe

send(content) : Envoyer une requête au serveur

setRequestHeader("header", "value") : Définit l'en-tête spécifié sur la valeur fournie. open() doit être appelé avant de définir des en-têtes. Définissez l'en-tête et envoyez-le avec la requête (la méthode 'post' est requise)

Description de l'attribut de l'objet XMLHttpRequest :

onreadystatechange : déclencheur d'événement pour le changement d'état, à chaque fois que l'état change Le déclenchement de ce gestionnaire d'événements appelle généralement une fonction JavaScript

readyState : le statut de la requête. Il y a 5 valeurs possibles : 0 = Non initialisé, l'objet a été créé, mais il n'a pas été initialisé (la méthode open n'a pas été appelée), 1 = Chargement, l'objet a été créé, et la méthode send n'a pas été appelée. , 2 = Chargé, la méthode d'envoi a été appelée. Cependant, l'état actuel et les en-têtes http sont inconnus. 3 = Lors de l'interaction, certaines données ont été reçues. La réponse et les en-têtes http étant incomplets, des erreurs se produiront lors de l'obtention de certaines. données via ResponseBody et ResponseText. 4 = Terminé, la réception des données est terminée et vous pouvez obtenir les données de réponse complètes via ResponseXml et ResponseText

responseText : la réponse du serveur, le texte des données renvoyées.

responseXML : la réponse du serveur renvoie un objet de document XML compatible DOM. Cet objet peut être analysé en un objet DOM.

responseBody : le sujet renvoyé par le serveur (format non texte)

responseStream : le flux de données renvoyé par le serveur

status : le code d'état HTTP du serveur (tel que : 404 = "Fichier introuvable", 200 = "Succès", etc.)

statusText : informations de texte d'état renvoyées par le serveur, texte correspondant du code d'état HTTP (OK ou Not Found (introuvable), etc.)

Le moteur Ajax est en fait une application JavaScript relativement complexe utilisée pour traiter les demandes des utilisateurs, lire et écrire des serveurs et modifier le contenu du DOM. Le moteur Ajax de JavaScript lit les informations et réécrit le DOM de manière interactive. Cela permet de reconstruire les pages Web de manière transparente, c'est-à-dire de modifier le contenu de la page après le téléchargement de la page. C'est ce que nous utilisons largement avec JavaScript et la méthode DOM. mais pour rendre une page Web véritablement dynamique, cela nécessite non seulement une interaction interne, mais également une acquisition de données de l'extérieur. Dans le passé, nous laissions les utilisateurs saisir des données et modifier le contenu de la page Web via le DOM, mais désormais, XMLHTTPRequest le permet. nous permet de lire et d'écrire des données sur le serveur sans recharger la page, minimisant ainsi les entrées de l'utilisateur.

Ajax sépare l'interface et l'application dans le WEB (on peut aussi dire qu'il sépare les données et la présentation). Dans le passé, il n'y avait pas de frontière claire entre les deux. est propice à la division du travail, réduit les erreurs d'application WEB causées par le personnel non technique modifiant les pages, améliore l'efficacité et convient mieux aux systèmes de publication actuels. Vous pouvez également transférer une partie du travail précédent du serveur vers le client, ce qui est bénéfique pour la puissance de traitement inactive du client.

4. Avantages d'AJAX

f35d6e602fd7d0f0edfa6f7d103c1b57.

Le plus grand avantage d'AJAX est qu'il peut communiquer avec le serveur pour conserver les données sans actualiser la page entière. Cela permet aux applications Web de répondre plus rapidement aux interactions des utilisateurs et d'éviter d'envoyer des informations inchangées sur le réseau, réduisant ainsi le temps d'attente des utilisateurs et apportant une très bonne expérience utilisateur.

2cc198a1d5eb0d3eb508d858c9f5cbdb. Communiquez avec le serveur de manière asynchrone.

AJAX utilise une méthode asynchrone pour communiquer avec le serveur, sans interrompre le fonctionnement de l'utilisateur, et a une capacité de réponse plus rapide. Optimise la communication entre le navigateur et le serveur, réduisant ainsi la transmission de données inutile, le temps et le trafic de données sur le réseau.

5bdf4c78156c7953567bb5a0aef2fc53. Équilibrage de charge front-end et back-end.

AJAX peut transférer une partie du travail précédemment chargé par le serveur vers le client, en utilisant les capacités inactives du client pour le traiter, réduisant ainsi la charge sur le serveur et la bande passante, et économisant de l'espace et des coûts de location du haut débit. Et pour réduire la charge sur le serveur, le principe d'AJAX est « d'obtenir des données à la demande », ce qui peut minimiser la charge sur le serveur causée par les demandes et réponses redondantes et améliorer les performances du site.

23889872c2e8594e0f446a471a78ec4c. Largement pris en charge sur la base des normes.

AJAX est basé sur une technologie standardisée et largement prise en charge et ne nécessite pas de téléchargement de plug-ins ou d'applets de navigateur, mais nécessite que le client autorise l'exécution de JavaScript sur le navigateur. À mesure qu'Ajax mûrit, certaines bibliothèques de programmes simplifiant l'utilisation d'Ajax sont également apparues. De même, une autre technologie est apparue pour aider à la programmation, offrant des fonctionnalités alternatives aux utilisateurs qui ne prennent pas en charge JavaScript.

43ad812d3a971134e40facaca816c822. L'interface est séparée de l'application.

Ajax sépare l'interface et l'application dans le WEB (ce qui peut également être considéré comme séparant les données et la présentation), ce qui favorise la division du travail et la coopération, réduit les erreurs d'application WEB causées par du personnel non technique modifiant le page, améliore l'efficacité et est également plus adapté aux systèmes de publication actuels.

5. Inconvénients d'ajax

f35d6e602fd7d0f0edfa6f7d103c1b57. AJAX tue les fonctions Retour et Historique, ce qui est une destruction du mécanisme du navigateur.

Dans le cas de pages mises à jour dynamiquement, les utilisateurs ne peuvent pas revenir à l'état de la page précédente car le navigateur ne peut mémoriser que les pages statiques de l'historique. La différence entre une page qui a été entièrement lue et une page qui a été modifiée dynamiquement est très subtile : les utilisateurs s'attendront souvent à ce que cliquer sur le bouton Précédent annule leur opération précédente, mais dans une application Ajax, cela ne sera pas possible.

Le bouton retour est une fonctionnalité importante d'un site Web standard, mais il ne fonctionne pas bien avec js. Il s'agit d'un problème sérieux causé par Ajax, car les utilisateurs espèrent souvent annuler l'opération précédente en revenant en arrière. Alors, y a-t-il une solution à ce problème ? La réponse est oui. Ceux qui ont utilisé Gmail savent que la technologie Ajax utilisée sous Gmail résout ce problème. Cependant, cela ne change pas le mécanisme d'Ajax. La façon de procéder consiste à créer ou à utiliser un IFRAME masqué pour reproduire les modifications sur la page lorsque l'utilisateur clique sur le bouton Précédent pour accéder à l'historique. (Par exemple, lorsque l'utilisateur clique à nouveau dans Google Maps, il recherche dans un IFRAME masqué, puis reflète les résultats de la recherche sur un élément Ajax pour restaurer l'état de l'application tel qu'il était à ce moment-là.)

Cependant , bien que ce problème puisse être résolu, le coût de développement qu'il entraîne est très élevé et va à l'encontre du développement rapide requis par le framework Ajax. Il s'agit d'un problème très grave causé par l'Ajax.

Un point connexe est que l'utilisation de mises à jour dynamiques de pages rend difficile pour les utilisateurs d'enregistrer un état spécifique dans les favoris. Des solutions à ce problème ont également émergé, dont la plupart utilisent des identifiants de fragments d'URL (souvent appelés ancres, la partie après le # dans l'URL) pour garder une trace et permettre à l'utilisateur de revenir à un état d'application spécifié. (De nombreux navigateurs permettent à JavaScript de mettre à jour dynamiquement les ancres, ce qui permet aux applications Ajax de mettre à jour l'ancre simultanément avec le contenu affiché.) Ces solutions résolvent également de nombreux arguments concernant la non-prise en charge du bouton de retour.

2cc198a1d5eb0d3eb508d858c9f5cbdb.Problèmes de sécurité AJAX.

La technologie AJAX apporte non seulement une bonne expérience utilisateur aux utilisateurs, mais apporte également de nouvelles menaces de sécurité aux entreprises informatiques. La technologie Ajax revient à établir un canal direct pour les données d'entreprise. Cela permet aux développeurs d’exposer par inadvertance davantage de données et de logique de serveur qu’auparavant. La logique Ajax peut être masquée par les technologies d'analyse de sécurité côté client, permettant ainsi aux pirates de créer de nouvelles attaques à partir de serveurs distants. Ajax est également difficile à éviter certaines faiblesses de sécurité connues, telles que les attaques de scripts intersites, les attaques par injection SQL et les vulnérabilités de sécurité basées sur les informations d'identification.

5bdf4c78156c7953567bb5a0aef2fc53. Faible prise en charge des moteurs de recherche.

Le support des moteurs de recherche est relativement faible. S'il est mal utilisé, AJAX augmentera le trafic de données réseau, réduisant ainsi les performances de l'ensemble du système.

23889872c2e8594e0f446a471a78ec4c. Détruisez le mécanisme de gestion des exceptions du programme.

Au moins pour l'instant, les frameworks Ajax comme Ajax.dll et Ajaxpro.dll détruiront le mécanisme d'exception du programme. Concernant ce problème, je l'ai rencontré lors du processus de développement, mais après vérification, il n'y a quasiment aucune introduction pertinente sur Internet. Plus tard, nous avons fait une expérience et utilisé Ajax et les modes de soumission de formulaires traditionnels pour supprimer une donnée... ce qui a apporté de grandes difficultés à notre débogage.

43ad812d3a971134e40facaca816c822. Viole l'intention initiale du positionnement de l'URL et des ressources.

Par exemple, si je vous donne une adresse URL, si la technologie Ajax est utilisée, peut-être que ce que vous voyez sous l'adresse URL est différent de ce que je vois sous cette adresse URL. Ceci est contraire à l’intention initiale du positionnement des ressources.

efbfa0de8737dc86eae413541a49df20.AJAX ne prend pas bien en charge les appareils mobiles.

Certains appareils portables (tels que les téléphones mobiles, les PDA, etc.) ne prennent actuellement pas très bien en charge Ajax. Par exemple, lorsque nous ouvrons un site Web utilisant la technologie Ajax sur un navigateur de téléphone mobile, il ne prend actuellement pas en charge. il.

40107655ec554331c1c6222ab67a141c. Le client est trop gros et trop de code client entraîne des coûts de développement.

L'écriture est complexe et sujette aux erreurs ; il y a beaucoup de code redondant (c'est un problème courant d'AJAX d'inclure des fichiers js dans des couches, et beaucoup de code côté serveur dans le passé est désormais placé sur le client) ; il détruit les fonctionnalités originales du standard Web.

6. Points de note AJAX et scénarios applicables et non applicables

(1) Points de note

Lors du développement d'Ajax, c'est le retard du réseau. intervalle entre la demande d'un utilisateur et la réponse du serveur – doit être soigneusement étudié. Ne pas donner aux utilisateurs une réponse claire, ne pas pré-lire correctement les données ou gérer incorrectement XMLHttpRequest entraînera des retards qu'ils ne veulent pas voir et qu'ils ne peuvent pas comprendre. Une solution courante consiste à utiliser un composant visuel pour indiquer à l'utilisateur que le système effectue des opérations en arrière-plan et lit des données et du contenu.

(2). Scénarios applicables Ajax

f35d6e602fd7d0f0edfa6f7d103c1b57. Interaction basée sur le formulaire

2cc198a1d5eb0d3eb508d858c9f5cbdb. 3>. Réponse rapide de communication d'utilisateur à utilisateur

23889872c2e8594e0f446a471a78ec4c. Scénarios insignifiants tels que le vote, oui/non, etc.

43ad812d3a971134e40facaca816c822. filtrer et manipuler les données associées

efbfa0de8737dc86eae413541a49df20. Invites de saisie de texte ordinaires et scénarios de saisie semi-automatique

(3) Scénarios dans lesquels Ajax n'est pas applicable

< ;. Formulaire partiellement simple

2cc198a1d5eb0d3eb508d858c9f5cbdb. Rechercher

5bdf4c78156c7953567bb5a0aef2fc53. Navigation de base

23889872c2e8594e0f446a471a78ec4c. 🎜>43ad812d3a971134e40facaca816c822. Manipulation de présentation

7. Technologie incluse dans ajax

Tout le monde sait qu'ajax n'est pas une nouvelle technologie, mais une combinaison de plusieurs technologies originales. Il est composé des technologies suivantes.

1. Utilisez CSS et XHTML pour exprimer.

2. Utilisez le modèle DOM pour l'interaction et l'affichage dynamique.

3. Utilisez XMLHttpRequest pour communiquer de manière asynchrone avec le serveur.

4. Utilisez javascript pour vous lier et appeler.

Parmi les technologies ci-dessus, à l'exception de l'objet XmlHttpRequest, toutes les autres technologies sont basées sur les standards du Web et ont été largement utilisées. Bien que XMLHttpRequest n'ait pas encore été adopté par le W3C, il s'agit déjà d'un standard de facto. presque tous les principaux navigateurs le prennent actuellement en charge.

Exemple :

Cet article explique le principe de fonctionnement d'ajax et son utilisation associée. Pour plus de connaissances connexes, veuillez faire attention au chinois php. site web.

Recommandations associées :

function    CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest) {
xmlhttp =newXmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject) {
try{
xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try{
xmlhttp =newActiveXObject("msxml2.XMLHTTP");
}
catch(ex) { }
}
}
}
functionUstbwuyi() {
vardata = document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp) {
alert("创建xmlhttp对象异常！");
returnfalse;
}
xmlhttp.open("POST", url,false);
xmlhttp.onreadystatechange =function() {
if(xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if(xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

N façons d'obtenir des éléments en JS et leurs discussions dynamiques et statiques

DOM, un DOM complet résumé de l'élément JavaScript

implémente le chargement paresseux jquery et revient en haut

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!