1. Les principales raisons d'utiliser Ajax
1. Pour obtenir une meilleure expérience utilisateur grâce à des applications Ajax appropriées ;
2. Pour transférer une partie du travail précédent chargé par le serveur vers le client, ce qui est bénéfique pour la puissance de traitement inactive du client et réduit le serveur ; et la charge de bande passante, atteignant ainsi l'objectif d'économiser les coûts de location d'espace et de bande passante du FAI.
2. Citation
Jesse James Garrett, le premier à proposer le concept d'Ajax, estime qu'Ajax est l'abréviation de Asynchronous JavaScript et XML. Ajax n'est pas un nouveau langage ou une nouvelle technologie, il s'agit en fait de plusieurs technologies combinées d'une certaine manière pour jouer leurs rôles respectifs dans une collaboration commune. Cela inclut :
· Utiliser XHTML et CSS pour standardiser la présentation
· Utiliser DOM ;
·Utiliser XML et XSLT pour l'échange et le traitement des données ;
·Utiliser XMLHttpRequest pour la lecture asynchrone des données ;
·Enfin, utiliser JavaScript pour lier et traiter toutes les données.
Le principe de fonctionnement d'Ajax équivaut à l'ajout d'une couche intermédiaire pour effectuer des opérations utilisateur de manière asynchrone ; et les réponses du serveur sont 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.
3. Aperçu
Bien que Garrent ait répertorié 7 technologies constitutives d'Ajax, je crois personnellement que le noyau de ce qu'on appelle Ajax n'est que JavaScript, XMLHTTPRequest et DOM. Si le format de données utilisé est XML, XML peut également être ajouté (Ajax démarre du côté serveur) Le retour. les données peuvent être au format XML ou dans d'autres formats tels que du texte).
Dans l'ancienne méthode d'interaction, l'utilisateur déclenche une requête HTTP vers le serveur, et 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 qu'il suffit 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 relire la page entière à chaque fois. .
Après avoir utilisé Ajax, les utilisateurs ont le sentiment que presque toutes les opérations répondront rapidement sans attendre le rechargement de la page (écran blanc).
1. XMLHTTPRequest
L'une des fonctionnalités les plus importantes d'Ajax est qu'il peut transmettre ou lire et écrire des données sur le serveur sans actualiser la page (également appelé mise à jour de la page sans actualisation). Cette fonctionnalité bénéficie principalement de l'objet XMLHTTPRequest du composant XMLHTTP. De cette manière, l'application de bureau peut uniquement échanger des données avec le serveur sans avoir à actualiser l'interface à chaque fois ni à soumettre le travail de traitement des données au serveur à chaque fois. Cela réduit non seulement la charge sur le serveur, mais accélère également le temps de traitement. . Vitesse de réponse et temps d’attente des utilisateurs réduit.
Microsoft a été le premier à appliquer XMLHTTP. IE (IE5 et supérieur) étend ses fonctions en permettant aux développeurs d'utiliser des composants XMLHTTP ActiveX dans les pages Web. Les développeurs peuvent directement transférer des données vers ou récupérer des données depuis le serveur sans naviguer à partir de la page Web actuelle. . Cette fonctionnalité est importante car elle contribue à réduire les problèmes liés aux connexions sans état et peut également augmenter la vitesse du processus en éliminant le besoin de télécharger du HTML redondant. Mozilla (Mozilla 1.0 et supérieur et NetScape 7 et supérieur) a répondu en créant sa propre classe proxy XML héritée : la classe XMLHttpRequest. Konqueror (et Safari v1.2, également un navigateur basé sur KHTML) prend également en charge l'objet XMLHttpRequest, et Opera prendra également en charge l'objet XMLHttpRequest dans sa version v7.6x+ et versions ultérieures. Pour l'essentiel, l'objet XMLHttpRequest est très similaire au composant XMLHTTP, et les méthodes et propriétés sont similaires, sauf qu'un petit nombre de propriétés ne sont pas prises en charge.
Application de XMLHttpRequest :
·Application de l'objet XMLHttpRequest dans JS
var xmlhttp = new XMLHttpRequest();
·Application du composant XMLHTTP de Microsoft dans JS
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP =
new ActiveXObject(Msxml2.XMLHTTP) );
Méthode objet XMLHttpRequest
/**
* Instanciation XMLHttpRequest multi-navigateurs
*/
if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for ( var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("Aucun composant XML installé ! ")
}
}
function createXMLHttpRequest() {
try {
// Tentative de le créer "à la manière de Mozilla"
if (window.XMLHttpRequest) {
return new XMLHttpRequest(
}
// Devinez pas - maintenant à la manière d'IE
if (window.ActiveXObject ) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false
};
XMLHttpRequest objet méthode
méthode | description |
abort() | abandonner la requête en cours |
getAllResponseHeaders() | renvoie les en-têtes complets sous forme de chaîne |
getResponseHeader("headerLabel") | renvoie une seule étiquette d'en-tête sous forme de chaîne |
open("method","URL"[,asyncFlag[ , "userName"[, "password"]]]) | Définissez l'URL cible, la méthode et d'autres paramètres de la requête en attente |
send(content) | envoyez la requête |
setRequestHeader("label", "value") | définissez l'en-tête et envoyez-le ensemble avec la requête |
XMLHttpRequest attribut d'objet
description | de l'attribut |
readyState | |
pour | le changement d'état |
Statut de l'objet (entier) : 0 = non initialisé 1 = Lecture 2 = Lire 3 = Interagir 4 = Complétez | |
la version texte des données renvoyées par le processus serveur ResponseText | . |
L'objet document XML compatible DOM renvoyé par le | processus serveurResponseXML |
renvoyé | par le serveur, tel que : 404 = "Fichier introuvable", 200 =. |
"Succès" | |
renvoyé par le serveur | statusText | . Informations textuelles
2. JavaScript
JavaScript est un langage de programmation largement utilisé dans les navigateurs. Il a été qualifié de mauvais langage par le passé (il est en effet ennuyeux à utiliser) et est souvent utilisé par certains. à des fins de gadgets et de farces voyantes ou de validation de formulaire fastidieuse. Mais le fait est qu’il s’agit d’un véritable langage de programmation, qu’il possède ses propres standards et qu’il est largement pris en charge dans divers navigateurs.
3.
Modèle objet de document DOM.
DOM est un ensemble d'API pour les fichiers HTML et XML. Il fournit une représentation structurelle du fichier, vous permettant de modifier son contenu et sa visibilité. Son essence est d'établir un pont de communication entre les pages Web et les langages de script ou de programmation.
Toutes les propriétés, méthodes et événements que les développeurs WEB peuvent exploiter et créer des fichiers sont représentés par des objets (par exemple, document représente l'objet "fichier lui-même", l'objet table représente l'objet table HTML, etc.). Ces objets sont accessibles depuis Script par la plupart des navigateurs actuels.
Une page Web construite avec HTML ou XHTML peut également être considérée comme un ensemble de données structurées. Ces données sont incluses dans DOM (Document Object Model) et prennent en charge la lecture et l'écriture de divers objets dans la page Web.
4. XML
Le moteur Ajax mentionné par Jesse James Garrett est en fait une application JavaScript relativement complexe utilisée pour traiter les requêtes des utilisateurs, lire et écrire sur les 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.
La communication réseau basée sur XML n'est pas nouvelle. En fait, FLASH et JAVA Applet ont donné de bons résultats. Désormais, ce type d'interaction riche est également disponible sur les pages Web. Il est basé sur des technologies standardisées et largement prises en charge et ne nécessite pas de plug-ins. ou des plug-ins. Téléchargez l'applet.
Ajax est une transformation des applications WEB traditionnelles. Dans le passé, le serveur générait à chaque fois une page HTML et la renvoyait au client (navigateur). Dans la plupart des sites Web, au moins 90 % de nombreuses pages sont identiques, telles que : la structure, le format, l'en-tête, le pied de page, les publicités, etc. La seule différence est une petite partie du contenu, mais à chaque fois, le serveur générera tout. la page vers le client est un gaspillage invisible, qu'il s'agisse du temps de l'utilisateur, de la bande passante, de la consommation du processeur ou de la bande passante et de l'espace loués par le FAI à un prix élevé. Si on les calcule sur une base de page, quelques K ou dizaines de K seulement ne sont peut-être pas impressionnants, mais pour un grand FAI comme SINA qui génère des millions de pages chaque jour, cela peut être considéré comme une perte énorme. AJAX peut servir de couche intermédiaire entre le client et le serveur pour gérer la demande du client et envoyer la demande au serveur selon vos besoins. Vous pouvez obtenir ce que vous utilisez et la quantité que vous utilisez, il n'y aura donc pas de redondance ni de gaspillage de données. ., réduisant la quantité totale de données téléchargées, et il n'est pas nécessaire de recharger l'intégralité du contenu lors de la mise à jour de la page. Seule la partie qui doit être mise à jour peut être mise à jour. Par rapport à la méthode de traitement et de rechargement en arrière-plan pur, l'utilisateur attend. le temps est raccourci et le gaspillage de ressources est réduit au minimum, basé sur des technologies standardisées et largement prises en charge, et ne nécessitant aucun plug-in ni applet téléchargée, Ajax est une solution gagnant-gagnant pour les utilisateurs et les FAI.
Ajax sépare l'interface et l'application dans le WEB (on peut également 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. La séparation des données et de la présentation favorise la division du travail et la coopération. réduit le besoin de personnel non technique d'interagir avec la page. La modification provoque des erreurs d'application WEB, améliore l'efficacité et est plus adaptée au système de publication actuel. 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.
L'émergence de l'application du concept Ajax a ouvert le prélude à l'ère de la mise à jour des pages sans rafraîchissement et a tendance à remplacer l'utilisation de la soumission de formulaire (formulaire) dans le développement Web traditionnel pour mettre à jour les pages Web, ce qui peut être considéré comme un jalon. Mais Ajax n’est pas applicable partout et son champ d’application est déterminé par ses caractéristiques.
Un exemple d'application est une application Ajax pour les menus en cascade.
Notre traitement précédent des menus en cascade était le suivant :
Afin d'éviter le rechargement de la page provoqué par chaque opération sur le menu, nous n'avons pas utilisé la méthode d'appel de l'arrière-plan à chaque fois, mais avons lu toutes les données du menu en cascade d'un coup. et écrit dans le tableau, puis utiliser JavaScript pour contrôler la présentation de son sous-ensemble d'éléments en fonction des opérations de l'utilisateur. Cela résout le problème de la vitesse de réponse des opérations, en ne rechargeant pas la page et en évitant les requêtes fréquentes au serveur, mais si. l'utilisateur ne répond pas au menu Si vous opérez ou n'opérez que sur une partie du menu, une partie des données lues deviendra des données redondantes et gaspillera les ressources de l'utilisateur, en particulier lorsque la structure du menu est complexe et que la quantité de données est importante ( par exemple, le menu comporte de nombreux niveaux et chaque niveau contient des centaines d'éléments), cet inconvénient est encore plus important.
Si Ajax est appliqué dans ce cas, le résultat sera amélioré :
lors de l'initialisation de la page, nous lisons uniquement toutes les données du premier niveau et les affichons. Lorsque l'utilisateur actionne l'un des éléments du menu du premier niveau, le résultat sera. être envoyé à l'utilisateur via Ajax. L'arrière-plan demande toutes les données du sous-menu de deuxième niveau auquel appartient l'élément de premier niveau actuel. S'il continue à demander un élément dans le menu de deuxième niveau déjà présenté, il demande alors tout. les données de tous les menus de troisième niveau correspondant à l'élément de menu de deuxième niveau exploité. Données, et ainsi de suite... De cette façon, vous pouvez obtenir tout ce que vous utilisez et autant que vous en avez besoin. Il n'y aura ni redondance ni gaspillage. de données, réduisant la quantité totale de téléchargements de données, et il n'est pas nécessaire de recharger l'intégralité du contenu lors de la mise à jour de la page, il suffit de mettre à jour la partie qui doit être mise à jour. Par rapport au traitement et au rechargement en arrière-plan, cela réduit le temps d'attente de l'utilisateur. et minimise le gaspillage de ressources.
De plus, comme Ajax peut appeler des données externes, il peut également réaliser la fonction d'agrégation de données (avec l'autorisation correspondante, bien sûr), comme la version BETA du lecteur RSS en ligne récemment publiée par Microsoft le 15 mars ; le développement de certaines données ouvertes Certaines de ses propres applications, telles que certaines nouvelles applications de recherche de livres utilisant les données d'Amazon.
Bref, Ajax convient aux applications WEB avec beaucoup d'interactions, des lectures fréquentes de données et une bonne classification des données.
1. Réduisez la charge sur le serveur. Parce que le concept fondamental d'Ajax est « d'obtenir des données à la demande », il peut réduire au maximum la charge causée par les requêtes redondantes et l'impact sur le serveur ;
2. Mettre à jour la page sans actualiser, réduisant ainsi le temps d'attente réel et psychologique de l'utilisateur ;
d'abord, "appuyez sur Le mode "données requises" réduit la quantité réelle de données lues. Pour donner une analogie très frappante, si la méthode de surcharge consiste à revenir à l'origine à partir d'un point final puis à un autre point final, alors Ajax est basé sur un point final, atteignez un autre point final ;
deuxièmement, même si vous souhaitez lire des données relativement volumineuses, il n'est pas nécessaire d'avoir un écran blanc comme RELOAD, car Ajax utilise XMLHTTP pour envoyer des requêtes afin d'obtenir les données de réponse du serveur, sans recharger le fichier. page entière. Utilisez Javascript pour faire fonctionner le DOM et enfin mettre à jour la page, ainsi pendant le processus de lecture des données, l'utilisateur n'est pas confronté à un écran blanc, mais à l'état de la page d'origine (ou vous pouvez ajouter une boîte d'invite de CHARGEMENT pour laisser le message s'afficher). l'utilisateur comprend l'état du processus de lecture des données), seulement lorsque toutes les données sont reçues, la partie correspondante du contenu est mise à jour, et cette mise à jour est également instantanée et presque imperceptible pour l'utilisateur. En bref, les utilisateurs sont très sensibles. Ils peuvent ressentir votre considération pour eux, même si cela ne donnera probablement pas de résultats immédiats, mais cela accumulera petit à petit leur dépendance à l'égard du site Web dans le cœur des utilisateurs.
3. Meilleure expérience utilisateur ;
4. Il peut également transférer une partie du travail précédent chargé par le serveur vers le client, qui peut être utilisé par la puissance de traitement inactive du client, réduisant ainsi la charge sur le serveur et la bande passante, et économisant de l'espace et de la bande passante. les frais de location ;
5 , Ajax peut appeler des données externes ;
6. Il est basé sur une technologie standardisée et largement supportée, et ne nécessite pas de plug-ins ni d'applets téléchargés ;
7. Ajax sépare l'interface et l'application dans le WEB (il peut également être (on dit de séparer les données et la présentation) ;
8. C'est une situation gagnant-gagnant pour les utilisateurs et les FAI.
6. Problèmes avec Ajax
1. Certains appareils portables (tels que les téléphones mobiles, les PDA, etc.) ne prennent pas encore bien en charge Ajax ;
2. Les moteurs Ajax créés avec JavaScript, la compatibilité JavaScript et DeBugs sont des maux de tête
; recharger, car les modifications de la page ne sont pas aussi évidentes que le rechargement par actualisation, il est donc facile de causer des problèmes aux utilisateurs - les utilisateurs ne savent pas si les données actuelles sont nouvelles ou si elles ont été mises à jour. Les solutions existantes incluent : Les invites d'emplacement pertinentes et la mise à jour des données ; les zones sont conçues pour être plus évidentes et les utilisateurs sont informés des mises à jour des données, etc.
4. La prise en charge du streaming multimédia n'est pas aussi bonne que celle de FLASH et de l'applet Java ;