Alors vous êtes ici, prêt à tout apprendre sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies qui sont utilisées pour créer un contenu Web interactif dynamique.
Le terme Ajax, inventé à l'origine par Jesse James Garrett de Adaptive Path dans son essai Ajax: une nouvelle approche des applications Web, est un acronyme de "JavaScript asynchrone et XML". C'est un peu une bouchée, mais c'est simplement décrire une technique qui utilise JavaScript pour actualiser le contenu d'une page à partir d'un serveur Web sans avoir à recharger toute la page. Ceci est différent de la méthode traditionnelle de mise à jour des pages Web, ce qui nécessite que le navigateur actualise toute la page afin d'afficher toutes les modifications du contenu.
Des techniques similaires existent sous une forme ou une autre (souvent réalisée à l'aide de certains hacks intelligents) depuis un certain temps. Mais la disponibilité croissante de la classe XMLHTTPREQUEST dans les navigateurs, le lien du terme accrocheur Ajax et l'avènement d'un certain nombre d'exemples de haut niveau tels que Google Maps, Gmail, Backpack et Flickr, ont permis à ce type d'applications Web hautement interactives pour commencer à gagner du terrain dans le monde du développement.
Comme le terme Ajax est devenu plus répandu, sa définition s'est étendue pour se référer plus généralement aux applications basées sur le navigateur qui se comportent beaucoup plus dynamiquement que les applications Web à l'ancienne. Cette nouvelle récolte d'applications Web Ajax utilise plus largement les techniques d'interaction comme les animations de texte, de glisser-déposer et de transitions CSS et de transitions pour effectuer des modifications au sein de l'interface utilisateur. Ce tutoriel expliquera ces techniques et vous montrera comment développer vos applications Web Ajax.
Ce tutoriel est un extrait de mon nouveau livre, Créez vos propres applications Web Ajax . Dans les trois chapitres présentés ici, nous discuterons des bases de l'Ajax et apprendrons comment il coche, avant de plonger dans le monde merveilleux de XMLHttprequest. Après avoir joué avec lui, en explorant son fonctionnement intérieur, en faisant des demandes et en mettant à jour notre page d'application de manière asynchrone, nous commençons à développer notre première véritable application Ajax.
Ce sera tout à fait une balade, donc j'espère que vous êtes prêt pour une aventure! Si vous préférez lire ces chapitres en dehors de la ligne, téléchargez leur version .pdf. Mais maintenant, faisons une mise à la terre solide à Ajax.
Il s'échappe, idiot! Dispatch War Rocket Ajax! Pour ramener son corps!
- Général Kala, Flash Gordon
L'AJAX peut être une excellente solution pour de nombreux projets de développement Web - il peut permettre aux applications Web d'intensifier et de reprendre une grande partie du motif qui était auparavant occupé presque exclusivement par des applications de bureau.
Tout comme, il est important de garder à l'esprit que l'Ajax n'est pas une sorte de poussière de fée magique que vous pouvez saupoudrer sur votre application pour la faire siffler et refroidir. Comme toute autre nouvelle technique de développement, Ajax n'est pas difficile à utiliser, et la seule chose pire qu'une horrible application Web de vieille école horrible est une horrible application Web Ajax.
Lorsque vous l'appliquez aux bonnes parties de votre application Web, de la bonne manière, Ajax peut améliorer considérablement l'expérience des utilisateurs de votre application. L'AJAX peut améliorer l'interactivité et la vitesse de votre application, ce qui rend finalement cette application plus facile, plus amusante et plus intuitive à utiliser.
Souvent, les applications AJAX sont décrites comme étant «comme une application de bureau dans le navigateur». Il s'agit d'une description assez précise - les applications Web Ajax sont nettement plus réactives que les applications Web traditionnelles à l'ancienne, et ils peuvent fournir des niveaux d'interactivité similaires à ceux des applications de bureau.
Mais une application Web Ajax est toujours une application distante et se comporte différemment d'une application de bureau qui a accès au stockage local. Une partie de votre travail en tant que développeur AJAX consiste à créer des applications qui se sentent réactives et faciles à utiliser malgré la communication qui doit se produire entre l'application et un serveur distant. Heureusement, la boîte à outils Ajax vous donne un certain nombre d'excellentes techniques pour accomplir exactement cela.
le mauvais vieux temps
L'une des premières tâches de développement Web qui ont dépassé les pages HTML simples et statiques était la technique de création de pages dynamiquement sur le serveur Web à l'aide des données d'un magasin de données back-end.
De retour dans le «mauvais vieux temps» du développement Web, la seule façon de créer ce contenu dynamique axé sur la base de données était de construire la page entière du côté serveur, en utilisant soit un script CGI (très probablement écrit en perl), soit un composant de serveur qui pourrait interpréter un langage de script (comme les pages de serveur actifs de Microsoft). Même une seule modification de cette page a nécessité un aller-retour du navigateur vers le serveur - ce n'est qu'alors que le nouveau contenu pourrait être présenté à l'utilisateur.
À cette époque, le modèle normal de l'interface utilisateur d'une application Web était un formulaire Web que l'utilisateur remplirait et soumettrait au serveur. Le serveur traiterait le formulaire soumis et renvoyer une page entièrement nouvelle au navigateur pour l'affichage en conséquence. Ainsi, par exemple, l'achèvement d'un «sorcier» en plusieurs étapes et basé sur le Web obligerait l'utilisateur à soumettre un formulaire - invitant ainsi un aller-retour entre le navigateur et le serveur - pour chaque étape.
Accordé, c'était une énorme avancée sur les pages Web statiques, mais c'était toujours loin de présenter une véritable expérience «d'application» aux utilisateurs finaux.
préhistorique ajax
Les premiers développeurs Web ont immédiatement commencé à chercher des astuces pour étendre les capacités de ce modèle simple basé sur des formulaires, car ils s'efforcent de créer des applications Web plus réactives et interactives. Ces hacks, bien que assez ad hoc et brut, ont été les premiers pas que les développeurs Web ont pris vers le type d'interactivité que nous voyons dans les applications AJAX d'aujourd'hui. Mais, bien que ces astuces et solutions de contournement fournissaient souvent des solutions de travail utilisables, le code résultant n'était pas une jolie vue.
Nesting Frameset
Une façon de contourner le problème de devoir recharger toute la page afin d'afficher même le plus petit changement à son contenu était le hideux hack de piratage de nidification dans d'autres ensembles de cadres, souvent plusieurs niveaux profonds. Cette technique a permis aux développeurs de mettre à jour uniquement les zones sélectionnées de l'écran, et même d'imiter le comportement des interfaces de navigation de style tab dans lequel les utilisateurs cliquent sur les onglets dans une partie de l'écran ont changé de contenu dans un autre domaine.
Cette technique a abouti à un code horrible et incompétent avec des profusions de pages qui avaient des noms comme EmployeeEditWizardMiddleLowerRight.asp.
L'Iframe caché
L'ajout de l'IFRAME dans les navigateurs comme Internet Explorer 4 a rendu les choses beaucoup moins douloureuses. La possibilité de masquer l'IFRAME a complètement conduit au développement d'un autre piratage soigné: les développeurs feraient des demandes HTTP au serveur à l'aide d'un iframe caché, puis insérer le contenu dans la page à l'aide de JavaScript et DHTML. Cela a fourni à peu près les mêmes fonctionnalités qui sont disponibles via Ajax moderne, y compris la possibilité de soumettre des données à partir de formulaires sans recharger la page - un exploit qui a été réalisé en faisant soumettre le formulaire à l'Iframe caché. Le résultat a été renvoyé par le serveur dans l'IFRAME, où le javascript de la page pourrait y accéder.
Le grand inconvénient de cette approche (au-delà du fait qu'il était, après tout, un piratage) était le fardeau ennuyeux de passer des données entre le document principal et le document dans l'Iframe.
Scripting à distance
Une autre technique précoce de type Ajax, généralement appelé script à distance, impliquait de définir l'attribut SRC d'une balise
Cela avait l'avantage d'être beaucoup plus propre que le piratage d'Iframe caché, car le javascript généré sur le serveur se chargerait directement dans le document principal. Cependant, seules les demandes de GET simples étaient possibles en utilisant cette technique.
C'est pourquoi le développement de l'Ajax est un énorme bond en avant pour le développement Web: au lieu d'avoir à tout envoyer au serveur dans une seule masse énorme, puis attendre que le serveur renvoie une nouvelle page pour le rendu, les développeurs Web peuvent communiquer avec le serveur dans les morceaux plus petits et mettre à jour sélectivement des domaines spécifiques de la page en fonction des réponses du serveur à ces demandes. C'est là que le mot asynchrone dans l'acronyme Ajax est originaire.
Il est probablement plus facile de comprendre l'idée d'un système asynchrone en considérant son contraire - un système synchrone. Dans un système synchrone, tout se produit dans l'ordre. Si une course automobile était un système synchrone, ce serait une affaire très terne. La voiture qui a commencé en premier sur la grille serait la première à travers la ligne d'arrivée, suivie de la voiture qui a commencé deuxième, etc. Il n'y aurait pas de dépassement, et si une voiture est tombée en panne, le trafic derrière serait obligé de s'arrêter et d'attendre pendant que les mécanismes faisaient leurs réparations.
Les applications Web traditionnelles utilisent un système synchrone: vous devez attendre que le serveur vous envoie la première page d'un système avant de pouvoir demander la deuxième page, comme le montre la figure 1.1.
Figure 1.1. Une application Web traditionnelle est un système synchrone
Une course de voitures asynchrones serait beaucoup plus excitante. La voiture en position pole pourrait être dépassée dans le premier coin, et la voiture qui commence à l'arrière de la grille pourrait se frayer un chemin à travers le champ et franchir la ligne d'arrivée à la troisième place. Le HTTP demande du navigateur dans une application AJAX fonctionne exactement de cette manière. C'est cette capacité à faire beaucoup de petites demandes au serveur sur un bass de bases qui rend le développement de l'Ajax si cool. La figure 1.2 montre une application Ajax faisant des demandes asynchrones à un serveur Web.
Figure 1.2. Une application Web Ajax est un système asynchrone
Le résultat final est une application qui se sent beaucoup plus réactive, car les utilisateurs passent beaucoup moins de temps à attendre que les demandes soient traitées et n'ont pas à attendre qu'une nouvelle page Web entière tombe sur le fil et soit rendue par leurs navigateurs, avant de pouvoir afficher les résultats.
Les technologies utilisées pour créer des applications Web Ajax englobent un certain nombre de domaines de programmation différents, de sorte que le développement de l'Ajax n'est ni aussi simple que le développement des applications régulières, ni aussi facile que le développement Web à l'ancienne.
D'un autre côté, le fait que le développement de l'Ajax embrasse tant de technologies différentes le rend beaucoup plus intéressant et amusant. Voici une brève liste des technologies qui travaillent ensemble pour créer une application Web Ajax:
À travers le reste de ce chapitre, nous rencontrerons chacune de ces technologies et discuterons des rôles qu'ils jouent dans une application Web Ajax.
Échange et balisage des données: XML
XML (XML signifie un langage de balisage extensible - pas que quiconque l'appelle à l'extérieur des manuels.) C'est l'endroit où Ajax obtient sa lettre "X." C'est la chance, car les acronymes technologiques sont automatiquement considérés comme étant beaucoup plus cool s'ils contiennent la lettre «x». (Oui, je plaisante!)
Échange de données Lingua Franca
XML sert souvent de format de données principal utilisé dans les demandes HTTP asynchrones qui communiquent entre le navigateur et le serveur dans une application AJAX. Ce rôle joue aux forces de XML en tant que format d'échange de données neutre et assez simple, et signifie également qu'il est relativement facile de réutiliser ou de reformater le contenu si le besoin se produit.
Il existe, bien sûr, de nombreuses autres façons de formater vos données pour un échange facile entre le navigateur et le serveur (tel que CSV (valeurs séparées par les virgules), JSON (notation d'objet JavaScript), ou simplement du texte brut), mais XML est l'un des plus courants.
XML comme balisage
Les pages Web des applications Ajax sont constituées d'un balisage XHTML, qui n'est en fait qu'une saveur de XML. XHTML, en tant que successeur de HTML, lui est très similaire. Il est facilement repris par tout développeur qui connaît le HTML à l'ancienne, mais il présente tous les avantages du XML valide. Il existe de nombreux avantages à utiliser xhtml:
Certaines des personnes les plus pédantes de la communauté de développement insistent sur le fait que les gens ne devraient pas encore utiliser XHTML. Ils croient très fortement que XHTML, car il s'agit du XML réel, ne devrait pas être utilisé du tout à moins qu'il ne puisse être servi avec un en-tête de type HTTP de contenu HTTP de l'application / XHTML XML (texte / XML et application / XML, il y aurait également un soutien à un soutien-gorge limités. (Internet Explorer 6 et 7 ne le soutient pas du tout.)
En pratique, vous pouvez servir XHTML au navigateur avec un type de contenu de texte / HTML, car tous les navigateurs grand public rendent correctement tous les documents XHTML servis de texte / HTML. Bien que les navigateurs traiteront votre code comme un vieux HTML un simple, d'autres programmes peuvent toujours l'interpréter comme XML, il n'y a donc aucune raison pratique de ne pas «sauter à l'avenir» en l'utilisant.
Si vous êtes en désaccord avec moi, vous pouvez plutôt choisir de vous développer en utilisant la norme HTML 4.01 plus ancienne. Il s'agit toujours d'une norme Web viable et est un choix parfaitement légitime à faire pour développer votre application Web.
xhtml et ce livre
La plupart des exemples de code de ce livre utiliseront XHTML 1.0 Strict. L'élément IFRAME n'est pas disponible en strict, donc les quelques exemples de code que nous montrons en utilisant l'IFRAME seront XHTML 1.0 Transitional.
Le World Wide Web Consortium maintient une FAQ sur les différences entre HTML et XHTML.
Modèle d'objet de document W3C
Le modèle d'objet de document (DOM) est une représentation orientée objet des documents XML et HTML, et fournit une API pour modifier le contenu, la structure et le style de ces documents.
À l'origine, des navigateurs spécifiques comme NetScape Navigator et Internet Explorer ont fourni des moyens propriétaires différents de manipuler des documents HTML à l'aide de JavaScript. Le DOM est né des efforts du World Wide Web Consortium (W3C) pour fournir une manière neutre de la plate-forme et du navigateur pour réaliser les mêmes tâches.
Le DOM représente la structure d'un document XML ou HTML en tant que hiérarchie d'objets, qui est idéal pour l'analyse par des outils XML standard.
Méthodes de manipulation DOM
JavaScript fournit une grande API pour traiter ces structures DOM, en termes d'analyse et de manipulation du document. Il s'agit de l'une des principales façons d'accomplir les modifications plus petites, pièce par pièce dans une page Web que nous voyons dans une application Ajax. (Une autre méthode consiste simplement à modifier la propriété innerHTML d'un élément. Cette méthode n'est pas bien documentée en toute norme, bien qu'elle soit largement prise en charge par les navigateurs grand public.)
événements DOM
L'autre fonction importante du DOM est qu'elle fournit un moyen standard pour JavaScript d'attacher des événements aux éléments d'une page Web. Cela rend les interfaces utilisateur beaucoup plus riches, car elle vous permet de donner aux utilisateurs la possibilité d'interagir avec la page au-delà des liens simples et des éléments de formulaire.
Un excellent exemple de ceci est la fonctionnalité de glisser-déposer, qui permet aux utilisateurs de faire glisser des morceaux de la page à l'écran et de les déposer pour déclencher des fonctionnalités spécifiques. Ce type de fonctionnalité existait uniquement dans les applications de bureau, mais maintenant il fonctionne aussi bien dans le navigateur, grâce au dom.
Présentation: CSS
CSS (feuilles de style en cascade) fournit une méthode unifiée pour contrôler l'apparence des éléments d'interface utilisateur dans votre application Web. Vous pouvez utiliser CSS pour modifier presque tous les aspects de l'apparence de la page, des tailles de police, des couleurs et de l'espacement au positionnement des éléments.
Dans une application AJAX, une très bonne utilisation du CSS consiste à fournir des commentaires d'interface de l'utilisateur (avec des animations et des transitions pilotées par CSS), ou pour indiquer des parties de la page avec lesquelles l'utilisateur peut interagir (avec des modifications de la couleur ou de l'apparence déclenchée, par exemple, par des souris). Par exemple, vous pouvez utiliser les transitions CSS pour indiquer qu'une partie de votre application attend une demande HTTP qui traite sur le serveur.
La manipulation du CSS figure fortement dans la définition plus large du terme ajax - dans diverses transitions visuelles et effets, ainsi que dans la fonctionnalité de glisser-déposer et d'édition en place.
Communication: xmlhttprequest
xmlhttprequest, une classe JavaScript avec une interface très facile à utiliser, envoie et reçoit des demandes et des réponses HTTP vers et depuis les serveurs Web. La classe XMLHttpRequest est ce qui rend possible le véritable développement d'applications AJAX. Les demandes HTTP faites avec XMLHTTPRequest fonctionnent comme si le navigateur faisait des demandes normales pour charger une page ou soumettre un formulaire, mais sans que l'utilisateur ne devienne jamais la page Web actuellement chargée.
Microsoft a d'abord implémenté XMLHTTPRequest dans Internet Explorer 5 pour Windows en tant qu'objet ActiveX. Le projet Mozilla a fourni une version JavaScript-Native avec une API compatible dans le navigateur Mozilla, à partir de la version 1.0. (Il est également disponible dans Firefox, bien sûr.) Apple a ajouté XMLHttpRequest à Safari depuis la version 1.2.
La réponse du serveur - soit un document XML, soit une chaîne de texte - peut être transmise à JavaScript pour utiliser, mais le développeur le voit bien - souvent pour mettre à jour un élément de l'interface utilisateur de l'application Web.
Mettre tout cela ensemble: javascript
JavaScript est la colle qui maintient votre application Ajax ensemble. Il joue plusieurs rôles dans le développement de l'Ajax:
En raison de sa longue histoire d'utilisation dans la programmation Web légère (et entre les mains de programmeurs inexpérimentés), JavaScript n'a pas été considéré par de nombreux développeurs d'applications traditionnels comme un «langage de programmation sérieux», malgré le fait que, en réalité, il s'agit d'un langage dynamique entièrement traduit et capable de soutenir des méthodologies orientées objet.
La perception erronée de JavaScript en tant que «langage des jouets» change maintenant rapidement à mesure que les techniques de développement de l'Ajax étendent la puissance et la fonctionnalité des applications basées sur le navigateur. À la suite de l'avènement de l'Ajax, JavaScript semble maintenant subir quelque chose d'une Renaissance, et la croissance explosive du nombre de boîtes à outils et de bibliothèques JavaScript disponibles pour le développement de l'Ajax est la preuve du fait.Dans ce chapitre, nous avons eu un aperçu rapide de l'Ajax et des technologies qui le font vibrer. Nous avons examiné certains des horribles contorsions de codage que les développeurs ont dû endurer dans le mauvais vieux temps pour créer quelque chose qui ressemble à une interface interactive, et nous avons vu comment Ajax offre une énorme amélioration de ces approches. Avec une commande décente des éléments constitutifs d'Ajax - XML, DOM, CSS, XMLHTTPREQUEST et JavaScript, qui les relie tous ensemble - vous avez tout ce dont vous avez besoin pour commencer à construire des sites AJAX dynamiques et accessibles.
J'ai hâte de partager cette nouvelle merveille, les gens verront tous sa lumière, les laisser tous faire leur propre musique, les prêtres louent mon nom sur cette nuit.
- Rush, Discovery
C'est XMLHttpRequest qui donne à Ajax sa véritable puissance: la capacité de faire des demandes HTTP asynchrones du navigateur et de retirer le contenu en petits morceaux.
Les développeurs Web utilisent des astuces et des hacks pour y parvenir depuis longtemps, tandis que la souffrance des limitations ennuyeuses: le piratage d'Iframe invisible nous a forcés à transmettre des données entre le document parent et le document dans l'IFRAME, et même la méthode de «script à distance» était limitée à la réalisation de demandes de recours aux pages qui contenaient JavaScript.
Les techniques modernes de l'Ajax, qui utilisent XMLHttpRequest, fournissent une énorme amélioration par rapport à ces méthodes Kludgy, permettant à votre application de faire des demandes et de publier les demandes sans jamais recharger complètement la page.
Dans ce chapitre, nous allons sauter directement et créer une application Web AJAX simple - une application de surveillance simple de site qui pingre une page sur un serveur Web à un calendrier chronométré. Mais avant de commencer à faire les demandes HTTP asynchrones pour interroger le serveur, nous devons simplifier l'utilisation de la classe XMLHTTPRequest en prenant soin de toutes les petites incompatibilités de navigateur, telles que les différentes façons dont XMLHTTPREQUEST est instancié, dans une bibliothèque de code unique et réutilisable.
Une approche pour simplifier l'utilisation de la classe XMLHttpRequest serait d'utiliser une bibliothèque de code existante. Grâce à la popularité croissante du développement de l'Ajax, il y a littéralement des dizaines de bibliothèques, de kits d'outils et de cadres disponibles qui rendent XMLHttpRequest plus facile à utiliser.
mais, comme le code pour créer une instance de la classe XMLHTTPREQUEST est assez simple, et l'API pour l'utiliser est facile à comprendre, nous allons simplement écrire une bibliothèque JavaScript très simple qui prend soin des éléments de base dont nous avons besoin.
La transmission du processus de création de votre propre bibliothèque vous assurera de savoir comment fonctionne la classe XMLHTTPREQUEST, et vous aidera à tirer le meilleur parti de ces autres boîtes à outils ou bibliothèques lorsque vous décidez de les utiliser.
Démarrage de notre classe Ajax
Nous allons commencer par créer une classe de base, appelée Ajax, dans laquelle nous allons envelopper la fonctionnalité de la classe XMLHTTPREQUEST.
Je n'ai jamais fait de programmation orientée objet en javascript - aidez!
Dans cette section, nous commencerons à créer des classes et des objets en JavaScript. Si vous n'avez jamais fait cela auparavant, ne vous inquiétez pas - c'est assez simple tant que vous connaissez les bases de la programmation orientée objet.
En JavaScript, nous ne déclarons pas les classes avec une syntaxe complexe comme nous le ferions dans Java, C ou l'une des langues .NET; Nous écrivons simplement une fonction de constructeur pour créer une instance de la classe. Tout ce que nous devons faire est:
Voici le code qui crée une classe simple appelée Helloworld:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Le cadre de JavaScript pour la programmation orientée objet est très léger, mais fonctionne étonnamment bien une fois que vous avez compris. Des fonctionnalités plus avancées d'objets, telles que l'héritage et le polymorphisme, ne sont pas disponibles en JavaScript, mais ces fonctionnalités sont rarement nécessaires du côté client dans une application Ajax. La logique métier complexe pour laquelle ces fonctionnalités sont utiles doit toujours être sur le serveur Web et accessible à l'aide de la classe XMLHTTPREQUEST.
Dans cet exemple, nous créons une classe appelée Helloworld avec une propriété (message) et une méthode (SayMessage). Pour utiliser cette classe, nous appelons simplement la fonction du constructeur, comme indiqué ci-dessous:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Ici, nous créons une instance de Helloworld (appelé HW), puis utilisons cet objet pour afficher deux messages. La première fois que nous appelons SayMessage, le défaut «Bonjour, Monde!» le message s'affiche. Ensuite, après avoir changé la propriété du message de notre objet en «Au revoir», nous appelons SayMessage et «Goodbye» est affiché.
Ne vous inquiétez pas si cela n'a pas trop de sens pour le moment. Au fur et à mesure que nous progressons dans la construction de notre classe Ajax, il deviendra plus clair.
Voici les débuts de la fonction constructeur de notre classe Ajax:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Ce code définit simplement les propriétés dont nous aurons besoin dans notre classe AJAX afin de travailler avec les objets XMLHTTPRequest. Maintenant, ajoutons quelques méthodes à notre objet. Nous avons besoin de certaines fonctions qui configureront un objet XMLHttpRequest et lui diront comment faire des demandes pour nous.
Création d'un objet XmlHttpRequest
Tout d'abord, nous ajouterons une méthode init, qui créera un objet XMLHTTPRequest pour nous. Malheureusement, XMLHTTPRequest est mis en œuvre légèrement différemment dans Firefox (dans ce livre, chaque fois que j'explique comment quelque chose fonctionne dans Firefox, je fais référence à tous les navigateurs basés à Mozilla, y compris Firefox, Mozilla, Camino et Seamonkey), Safari et Opera que celle-ci soutient maintenant l'interface d'Internet Explorer (Internet Explorer version 7 soutient Tomer 7 Simplifiez le développement de l'Ajax à l'avenir), vous devrez donc essayer d'instanier l'objet de différentes manières si vous ne ciblez pas un navigateur spécifique. Firefox et Safari créent des objets XMLHTTPRequest à l'aide d'une classe appelée XMLHTTPREQUEST, tandis que les versions Internet Explorer 6 et utilisent plus tôt une classe spéciale appelée ActiveXObject qui est intégrée au moteur de script de Microsoft. Bien que ces classes aient des constructeurs différents, ils se comportent de la même manière.
Code de navigateur croisé
Heureusement, la plupart des navigateurs modernes (Internet Explorer 6, Firefox 1.0, Safari 1.2 et Opera 8, ou les versions ultérieures de l'un de ces navigateurs) adhèrent assez bien aux normes Web, vous n'aurez donc pas à faire beaucoup de ramification spécifique au navigateur dans votre code Ajax.
Cela rend généralement une application AJAX basée sur un navigateur plus rapidement pour développer et déployer une plate-forme multipliée qu'une application de bureau. À mesure que la puissance et les capacités disponibles pour les applications AJAX augmentent, les applications de bureau offrent moins d'avantages du point de vue de l'interface utilisateur.
La méthode init ressemble à ceci:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}La méthode init passe par chaque façon possible de créer un objet XMLHTTPRequest jusqu'à ce qu'il en crée un avec succès. Cet objet est ensuite renvoyé à la fonction d'appel.
dégradant gracieusement
maintenir la compatibilité avec les navigateurs plus âgés (par «plus âgés», je veux dire tout ce qui est plus ancien que les «navigateurs modernes» que j'ai mentionnés dans la note précédente) nécessite beaucoup de travail de code supplémentaire, il est donc essentiel de définir les navigateurs que votre application devrait prendre en charge.
Si vous savez que votre application recevra un trafic important via des navigateurs plus âgés qui ne prennent pas en charge la classe XMLHTMLRequest (par exemple, Internet Explorer 4 et plus tôt, Netscape 4 et plus tôt), vous devrez soit le laisser complètement de côté, soit écrire votre code afin qu'il se dégrade gracieusement. Cela signifie qu'au lieu de permettre à vos fonctionnalités de disparaître simplement dans des navigateurs moins capables, vous codez pour vous assurer que les utilisateurs de ces navigateurs reçoivent quelque chose qui est fonctionnellement équivalent, bien que peut-être dans un format moins interactif ou facile à utiliser.
Il est également possible que votre site Web attire les utilisateurs qui parcourent avec JavaScript désactivé. Si vous souhaitez répondre à ces utilisateurs, vous devez fournir une interface alternative à l'ancienne par défaut, que vous pouvez ensuite modifier à la volée - en utilisant JavaScript - pour les navigateurs modernes.
Envoi d'une demande
Nous avons maintenant une méthode qui crée un XMLHttpRequest. Alors écrivons une fonction qui l'utilise pour faire une demande. Nous commençons la méthode Doreq comme ceci:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cette première partie de Doreq appelle init pour créer une instance de la classe XMLHttpRequest, et affiche une alerte rapide si elle ne réussit pas.
Configuration de la demande
Ensuite, notre code appelle la méthode ouverte sur ce.req - notre nouvelle instance de la classe XMLHttpRequest - pour commencer à configurer la demande HTTP:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
La méthode ouverte prend trois paramètres:
1. Méthode - Ce paramètre identifie le type de méthode de demande HTTP que nous utiliserons. Les méthodes les plus couramment utilisées sont Get and Post.
Les méthodes sont sensibles à la casse
Selon la spécification HTTP (RFC 2616), les noms de ces méthodes de demande sont sensibles à la casse. Et comme les méthodes décrites dans la spécification sont définies comme étant toutes les majuscules, vous devez toujours vous assurer de taper la méthode dans toutes les lettres majuscules.
2. URL - Ce paramètre identifie la page demandée (ou publiée si la méthode est publiée).
Domaines de croisement
Les paramètres de sécurité du navigateur normal ne vous permettra pas d'envoyer des demandes HTTP à un autre domaine. Par exemple, une page desservie à partir d'Ajax.net ne pourrait pas envoyer de demande à Remotescripting.com à moins que l'utilisateur n'ait autorisé ces demandes.
3. Indicateur asynchrone - Si ce paramètre est défini sur true, votre JavaScript continuera à s'exécuter normalement en attendant une réponse à la demande. À mesure que l'état de la demande change, des événements sont licenciés afin que vous puissiez traiter l'état changeant de la demande.
Si vous définissez le paramètre sur False, l'exécution JavaScript s'arrêtera jusqu'à ce que la réponse revienne du serveur. Cette approche a l'avantage d'être un peu plus simple que d'utiliser une fonction de rappel, car vous pouvez commencer à gérer la réponse directement après avoir envoyé la demande dans votre code, mais le gros inconvénient est que votre code s'arrête pendant que la demande est envoyée et traitée sur le serveur, et la réponse est reçue. Comme la possibilité de communiquer avec le serveur de manière asynchrone est tout le point d'une application Ajax, cela devrait être défini sur true.
Dans notre classe AJAX, la méthode et les propriétés asynchrones sont initialisées par défaut raisonnables (Get and True), mais vous devrez toujours définir l'URL cible, bien sûr.
Configuration du gestionnaire d'événements OnReadyStateChange
Comme la demande HTTP est traitée sur le serveur, ses progrès sont indiqués par des modifications de la propriété ReadyState. Cette propriété est un entier qui représente l'un des états suivants, répertorié dans l'ordre depuis le début de la demande à sa fin:
Un objet XMLHttpRequest vous parle de chaque changement d'état en licenciant un événement ReadyStateChange. Dans le gestionnaire de cet événement, vérifiez le readystate de la demande, et à la fin de la demande (c'est-à-dire lorsque le ReadyState se transforme en 4), vous pouvez gérer la réponse du serveur.
Un aperçu de base pour notre code AJAX ressemblerait à ceci:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Nous allons discuter de la façon de «faire des choses pour gérer la réponse» dans un peu. Pour l'instant, gardez à l'esprit que vous devez configurer ce gestionnaire d'événements avant l'envoi de la demande.
Envoi de la demande
Utilisez la méthode d'envoi de la classe XMLHttpRequest pour démarrer la demande HTTP, comme ainsi:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
La méthode Send prend un paramètre, qui est utilisé pour les données de poste. Lorsque la demande est un simple GET qui ne transmet aucune donnée au serveur, comme notre demande actuelle, nous définissons ce paramètre sur Null.
perte de portée et ceci
Vous avez peut-être remarqué que OnreadyStateChange comprend une affectation de variable d'aspect étrange:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Cette nouvelle variable, soi, est la solution à un problème appelé «perte de portée» qui est souvent vécue par les développeurs JavaScript utilisant des gestionnaires d'événements asynchrones. Les gestionnaires d'événements asynchrones sont couramment utilisés en conjonction avec XMLHTTPRequest, et avec des fonctions comme SetTimeout ou SetInterval.
Le mot clé est utilisé comme raccourci dans le code JavaScript orienté objet pour se référer à «l'objet actuel». Voici un exemple rapide - une classe appelée Scopetest:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Ce code créera une instance de la classe ScopeTest, puis appellera la méthode Dottest de cet objet, qui affichera le message «Salutations de ScopeTest!» Simple, non?
Maintenant, ajoutons un code XMLHTTPREQUEST simple à notre classe ScopeTest. Nous enverrons une demande de GET simple pour la page d'accueil de votre serveur Web et, lorsqu'une réponse sera reçue, nous afficherons le contenu de ce.Message et de Self.Message.
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};Alors, quel message s'affiche? La réponse est révélée dans la figure 2.1.
Nous pouvons voir que Self.Message est le message de salutation que nous attendons, mais qu'est-il arrivé à ce.message?
En utilisant le mot-clé, c'est un moyen pratique de se référer à «l'objet qui exécute ce code». Mais cela a un petit problème - sa signification change quand elle est appelée de l'extérieur de l'objet. C'est le résultat de quelque chose appelé contexte d'exécution. Tout le code à l'intérieur de l'objet s'exécute dans le même contexte d'exécution, mais le code exécuté à partir d'autres objets - tels que les gestionnaires d'événements - s'exécute dans le contexte d'exécution de l'objet d'appel. Cela signifie que, lorsque vous écrivez JavaScript orienté objet, vous ne pourrez pas utiliser ce mot-clé pour vous référer à l'objet dans le code pour les gestionnaires d'événements (comme OnReadyStateChange ci-dessus). Ce problème est appelé perte de portée.
Si ce concept ne vous est pas encore clair à 100%, ne vous inquiétez pas trop. Nous verrons une véritable démonstration de ce problème dans le chapitre suivant. En attendant, gardez en quelque sorte à l'esprit que si vous voyez le moi variable dans des exemples de code, il a été inclus pour faire face à un problème de perte de scope.
Figure 2.1. Message affiché par ScopeTest Class
Traitement de la réponse
Maintenant, nous sommes prêts à écrire du code pour gérer la réponse du serveur à notre demande HTTP. Rappelez-vous le commentaire «faire des trucs pour gérer la réponse» que nous avons laissé dans le gestionnaire d'événements OnreadyStateChange? Nous allons, il est temps que nous ayons écrit du code pour faire ce genre de choses! La fonction doit faire trois choses:
Inclure le code ci-dessous dans la fonction intérieure de notre classe Ajax:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}À la fin de la réponse, un code indiquant si la demande a réussi est renvoyée dans la propriété d'état de notre objet XMLHTTPRequest. La propriété d'état contient le code d'état HTTP de la demande terminée. Cela pourrait être le code 404 si la page demandée était manquante, 500 si une erreur se produisait dans le script côté serveur, 200 si la demande a été réussie, etc. Une liste complète de ces codes est fournie dans la spécification HTTP (RFC 2616).
pas bon avec les nombres?
Si vous avez du mal à vous souvenir des codes, ne vous inquiétez pas: vous pouvez utiliser la propriété Statustext, qui contient un court message qui vous indique un peu plus de détails sur l'erreur (par exemple, «non trouvé», «erreur de serveur interne», «OK»).
Notre classe AJAX sera en mesure de fournir la réponse du serveur dans trois formats différents: en tant que chaîne JavaScript normale, en tant qu'objet de document XML accessible via le DOM XML W3C, et en tant que objet XMLHTTPRequest réel qui a été utilisé pour faire la demande. Ceux-ci sont contrôlés par la propriété ResponseFormat de la classe Ajax, qui peut être définie sur du texte, du XML ou de l'objet.
Le contenu de la réponse est accessible via deux propriétés de notre objet XMLHttpRequest:
Notre classe AJAX initialise sa propriété ResponseFormat au texte, donc par défaut, votre gestionnaire de réponse sera transmis le contenu du serveur en tant que chaîne JavaScript. Si vous travaillez avec le contenu XML, vous pouvez modifier la propriété ResponseFormat en XML, qui retirera l'objet de document XML à la place.
Il y a une autre option que vous pouvez utiliser si vous voulez devenir vraiment sophistiqué: vous pouvez retourner l'objet XMLHTTPRequest réel lui-même à votre fonction de gestionnaire. Cela vous donne un accès direct à des choses comme les propriétés de statut et de statistique, et peut être utile dans les cas où vous souhaitez traiter différemment les classes d'erreurs particulières - par exemple, en terminant une journalisation supplémentaire dans le cas de 404 erreurs.
Définition du type de contenu correct
Les implémentations de XMLHTTPRequest dans tous les principaux navigateurs nécessitent que le type de contenu de la réponse HTTP soit correctement réglé pour que la réponse soit gérée sous forme de XML. XML bien formé, renvoyé avec un type de contenu de texte / xml (ou application / xml, ou même application / xhtml xml), remplira correctement la propriété ResponseXML d'un objet XMLHTTPRequest; Les types de contenu non XML se traduiront par des valeurs nuls ou non définies pour cette propriété.
Cependant, Firefox, Safari, et Internet Explorer 7 fournissent un moyen de provoquer la sélection de XMLHTTPREQUEST par rapport aux documents XML: la méthode OverIdeMiMetype de la classe XMLHTTPRequest. Notre classe simple Ajax s'accroche à cela avec la méthode SetMiMetype:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cette méthode définit la propriété MIMETYPE.
Ensuite, dans notre méthode Doreq, nous appelons simplement OvernideMiMetype à l'intérieur d'un bloc d'essai ... Catch, comme ainsi:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
La possibilité de remplacer les en-têtes de type contenu à partir de serveurs non coopératives peut être très important dans les environnements dans lesquels vous n'avez pas de contrôle sur les extrémités avant et arrière de votre application Web. Cela est particulièrement vrai, car de nombreuses applications d'aujourd'hui accèdent aux services et au contenu de nombreux domaines ou sources disparates. Cependant, comme cette technique ne fonctionnera pas dans Internet Explorer 6 ou Opera 8, vous ne le trouverez peut-être pas adapté à une utilisation dans vos applications aujourd'hui.
Handler de réponse
Selon la spécification HTTP 1.1, toute réponse qui a un code entre 200 et 299 inclus est une réponse réussie.
Le gestionnaire d'événements OnReadyStateChange que nous avons défini examine la propriété Status pour obtenir le statut de la réponse. Si le code se trouve dans la plage correcte pour une réponse réussie, le gestionnaire d'événements OnreadyStateChange transmet la réponse à la méthode du gestionnaire de réponse (qui est définie par la propriété HandlersResp).
Le gestionnaire de réponse devra savoir quelle était la réponse, bien sûr, nous allons donc le transmettre la réponse en tant que paramètre. Nous verrons ce processus en action plus tard, lorsque nous parlons de la méthode DoGet.
Étant donné que la méthode du gestionnaire est définie par l'utilisateur, le code fait également une vérification rapide pour s'assurer que la méthode a été correctement définie avant d'essayer d'exécuter la méthode.
Handler d'erreur
Si la propriété d'état indique qu'il y a une erreur avec la demande (c'est-à-dire qu'elle est en dehors de la plage de codes 200 à 299), la réponse du serveur est transmise au gestionnaire d'erreurs dans la propriété Handleerr. Notre classe Ajax définit déjà un défaut raisonnable pour le gestionnaire d'erreurs, nous n'avons donc pas à nous assurer qu'il est défini avant de l'appeler.
La propriété Handleerr pointe vers une fonction qui ressemble à ceci:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cette méthode vérifie pour s'assurer que les fenêtres contextuelles ne sont pas bloquées, puis essaie d'afficher le texte complet du contenu de la page d'erreur du serveur dans une nouvelle fenêtre de navigateur. Ce code utilise un bloc d'essai ... Catch, donc si les utilisateurs ont bloqué des fenêtres contextuelles, nous pouvons leur montrer une version coupée du message d'erreur et leur dire comment accéder à un message d'erreur plus détaillé.
Il s'agit d'un défaut décent pour les débutants, bien que vous voudrez peut-être afficher moins d'informations à l'utilisateur final - tout dépend de votre niveau de paranoïa. Si vous souhaitez utiliser votre propre gestionnaire d'erreurs personnalisé, vous pouvez utiliser Sethandlerèrer comme:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
ou, le seul véritable gestionnaire
Il est possible que vous souhaitiez utiliser une seule fonction pour gérer à la fois les réponses et les erreurs réussies. Sethandlerboth, une méthode de commodité dans notre classe Ajax, définit cela facilement pour nous:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Toute fonction qui est passée comme paramètre à Sethandlerboth gérera à la fois les réponses et les erreurs réussies.
Cette configuration pourrait être utile à un utilisateur qui définit l'objet de la propriété ResponseFormat de votre classe, ce qui entraînerait l'objet XMLHTTPRequest qui est utilisé pour faire la demande - plutôt que la valeur des propriétés ResponseText ou ResponseXML - à transmettre au gestionnaire de réponse.
abandonner la demande
Parfois, comme vous le saurez par votre propre expérience, une page Web mettra beaucoup de temps à charger. Votre navigateur Web a un bouton d'arrêt, mais qu'en est-il de votre classe Ajax? C'est là que la méthode d'abandon entre en jeu:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cette méthode modifie le gestionnaire d'événements OnReadyState en une fonction vide, appelle la méthode d'abandon sur votre instance de la classe XMLHTTPRequest, puis détruit l'instance que vous avez créée. De cette façon, toutes les propriétés qui ont été définies exclusivement pour la demande interrompue sont réinitialisées. La prochaine fois qu'une demande sera faite, la méthode init sera appelée et ces propriétés seront réinitialisées.
Alors, pourquoi devons-nous changer le gestionnaire d'événements OnreadyState? De nombreuses implémentations de XMLHTTPRequest licendront l'événement OnreadyState une fois que l'on appelle à intervenir, pour indiquer que l'état de la demande a été modifié. Ce qui est pire, c'est que ces événements sont complets avec un ReadyState de 4, ce qui indique que tout ce qui est terminé comme prévu (ce qui est en partie vrai, si vous y réfléchissez: dès que nous appelons abandonner, tout devrait s'arrêter et notre exemple de XMLHttprequest devrait être prêt à envoyer une autre demande, si nous le désirons). De toute évidence, nous ne voulons pas que notre gestionnaire de réponse soit invoqué lorsque nous interdisons une demande, nous supprimons donc le gestionnaire existant juste avant d'appeler abandonner.
Enveloppez-le
Compte tenu du code que nous avons jusqu'à présent, la classe Ajax n'a besoin que de deux choses pour faire une demande:
Fournit une méthode appelée Doget pour définir ces deux propriétés, et lançant la demande:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Vous remarquerez que, avec les deux paramètres attendus, l'URL et la main, la fonction a un troisième paramètre: format. Il s'agit d'un paramètre facultatif qui nous permet de modifier le format de la réponse du serveur qui est transmis à la fonction de gestionnaire.
Si nous ne transmettons pas une valeur pour le format, la propriété ResponseFormat de la classe AJAX sera par défaut une valeur de texte, ce qui signifie que votre gestionnaire sera transmis la valeur de la propriété ResponseText. Vous pourriez plutôt passer XML ou objet comme format, qui modifierait le paramètre qui est passé au gestionnaire de réponse en un objet XML DOM ou XMLHTTPREQUEST.
Exemple: une page de test simple
Il est enfin temps de mettre tout ce que nous avons appris ensemble! Créons une instance de cette classe Ajax, et utilisons-la pour envoyer une demande et gérer une réponse.
Maintenant que le code de notre classe se trouve dans un fichier appelé ajax.js, toutes les pages Web dans lesquelles nous voulons utiliser notre classe AJAX devront inclure le code AJAX avec une balise
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Ce script nous donne une nouvelle instance brillante de la classe Ajax. Maintenant, faisons-le faire quelque chose d'utile.
Pour faire la demande la plus élémentaire avec notre classe Ajax, nous pourrions faire quelque chose comme ceci:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cela crée une instance de notre classe Ajax qui fera une demande de get simple à une page appelée fakerver.php, et transmettra le résultat en tant que texte à la fonction manuelle. Si FakerServer.php a renvoyé un document XML que vous vouliez utiliser, vous pouvez le faire comme ceci:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Vous voudriez vous assurer absolument dans ce cas que Somepage.php servait vraiment un XML valide et que son en-tête de réponse HTTP de type contenu était défini sur Text / XML (ou quelque chose d'autre qui était approprié).
Création de la page
Maintenant que nous avons créé l'objet Ajax et configuré une fonction de gestionnaire simple pour la demande, il est temps de mettre notre code en action.
La fausse page du serveur
Dans le code ci-dessus, vous pouvez voir que l'URL cible pour la demande est définie sur une page appelée fakerver.php. Pour utiliser ce code de démonstration, vous devrez servir à la fois ajaxtest.html et fakerver.php à partir du même serveur Web compatible PHP. Vous pouvez également le faire à partir d'un serveur Web IIS avec un ASP simple. La page de faux serveur est une page super simple qui simule le temps de réponse variable d'un serveur Web en utilisant le code PHP ci-dessous:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}C'est tout ce petit morceau de code: il attend quelque part entre trois et 12 secondes, puis imprime OK.
Le code FAKESERVER.PHP définit l'en-tête de type contenu de la réponse au texte / plaine. Selon le contenu de la page que vous transmettez, vous pouvez choisir un autre type de contenu pour votre réponse. Par exemple, si vous transmettez un document XML à l'appelant, vous voudriez naturellement utiliser le texte / xml.
Cela fonctionne aussi bien dans ASP, bien que certaines fonctionnalités (comme le sommeil) ne soient pas aussi facilement disponibles, car le code ci-dessous l'illustre:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Tout au long de ce livre, tous nos exemples côté serveur seront écrits en PHP, bien qu'ils puissent tout aussi facilement être écrits en ASP, ASP.NET, Java, Perl ou à peu près n'importe quel langage qui peut servir du contenu via un serveur Web.
Utilisez la méthode setMiMetype
Imaginez que vous avez une réponse que vous connaissez contient un document XML valide que vous souhaitez analyser en XML, mais le serveur insiste pour vous le servir en tant que texte / ordinaire. Vous pouvez forcer cette réponse à être analysée comme XML dans Firefox et Safari en ajoutant un appel supplémentaire à SetMiMetype, comme ainsi:
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};Naturellement, vous ne devriez utiliser cette approche que lorsque vous êtes certain que la réponse du serveur sera valide XML, et vous pouvez être sûr que le navigateur est Firefox ou Safari.
Frapper la page
Vient maintenant le moment de la vérité! Appuyez sur votre serveur Web local, chargez Ajaxtest.html et voyez ce que vous obtenez. Si tout fonctionne correctement, il y aura quelques instants, puis vous verrez une alerte JavaScript standard comme celle de la figure 2.2 qui dit simplement OK.
Figure 2.2. Confirmation que votre classe Ajax fonctionne comme prévu
Maintenant que tout va bien et que notre classe Ajax fonctionne correctement, il est temps de passer à l'étape suivante.
D'accord, donc en utilisant la puissance impressionnante de l'Ajax pour engendrer une petite petite boîte d'alerte JavaScript qui se lit "OK" n'est probablement pas exactement ce que vous aviez en tête lorsque vous avez acheté ce livre. Implémentez quelques modifications à notre exemple de code qui rendront ces éléments XMLHTTPRequest un peu plus utiles. Dans le même temps, nous créerons cette application de surveillance simple que j'ai mentionnée au début de ce chapitre. L'application tirera un ping sur un site Web et signalera le temps nécessaire pour récupérer une réponse.
Poser les fondations
Nous allons commencer par un simple document HTML qui se lie à deux fichiers JavaScript: ajax.js, qui contient notre bibliothèque, et appmoneitor1.js, qui contiendra le code de notre application.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Vous remarquerez qu'il n'y a pratiquement aucun contenu dans le corps de la page - il n'y a qu'un seul élément div. Ceci est assez typique des applications Web qui reposent sur les fonctions AJAX. Souvent, une grande partie du contenu des applications Ajax est créée par JavaScript dynamiquement, nous voyons donc généralement beaucoup moins de balisage dans le corps de la source de page que dans une application Web non ajax pour laquelle tout le contenu a été généré par le serveur. Cependant, lorsque l'AJAX n'est pas une partie absolument essentielle de l'application, une version HTML simple de l'application doit être fournie.
Nous allons commencer notre fichier appmoneitor1.js avec un contenu simple qui utilise notre classe Ajax:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Nous utiliserons la variable START pour enregistrer l'heure à laquelle chaque demande démarre - ce chiffre sera utilisé pour calculer la durée de chaque demande. Nous faisons démarrer une variable globale afin que nous n'ayons pas à gommer les travaux de notre classe Ajax avec du code supplémentaire pour les demandes de synchronisation - nous pouvons définir la valeur de démarrage immédiatement avant et après nos appels vers l'objet Ajax.
La variable AJAX détient simplement une instance de notre classe Ajax.
La fonction DOPOLL fait en fait les demandes HTTP à l'aide de la classe AJAX. Vous devez reconnaître l'appel à la méthode DOGET à partir de notre page de test d'origine.
Remarquez que nous avons ajouté à l'URL cible une chaîne de requête qui a la valeur de démarrage en tant que paramètre. Nous n'allons pas réellement utiliser cette valeur sur le serveur; Nous l'utilisons simplement comme une valeur aléatoire pour faire face à la mise en cache trop zélée d'Internet Explorer. IE Caches Tous obtiennent des demandes avec XMLHTTPREQUEST, et une façon de désactiver cette «fonctionnalité» consiste à ajouter une valeur aléatoire dans une chaîne de requête. La valeur des millisecondes au démarrage peut doubler comme valeur aléatoire. Une alternative à cette approche consiste à utiliser la méthode setRequestHeader de la classe XMLHTTPREQUESQUE pour définir l'en-tête de sidér if-modifié sur la demande.
Enfin, nous lançons tout en attachant Dopoll à l'événement de la fenêtre.
Gestion du résultat avec showpoll
Le deuxième paramètre que nous passons à Doget indique à la classe AJAX de transmettre des réponses au showPoll de la fonction. Voici le code de cette fonction:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Tout cela est assez simple: la fonction attend un seul paramètre, qui devrait être la chaîne OK renvoyée de Fakeserver.php si tout se passe comme prévu. Si la réponse est correcte, le code fait les calculs rapides nécessaires pour déterminer la durée de la réponse et crée un message qui contient le résultat. Il transmet ce message à PollResult for Display.
Dans cette implémentation très simple, tout autre chose que la réponse attendue se traduit par un message assez laconique et inutile: la demande a échoué. Nous rendrons notre traitement des conditions d'erreur plus robuste lorsque nous mettons à niveau cette application dans le chapitre suivant.
Une fois PollResult définis, il est transmis à la fonction Printresult:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
La fonction Printresult affiche le message envoyé à partir de showpoll à l'intérieur du seul div dans la page.
Notez le test dans le code ci-dessus, qui est utilisé pour voir si notre div a des nœuds enfants. Cela vérifie l'existence de tous les nœuds de texte, qui pourraient inclure du texte que nous avons ajouté à cette div dans les itérations précédentes, ou le texte qui était contenu à l'intérieur de la div dans le balisage de la page, puis les supprime. Si vous ne supprimez pas les nœuds de texte existants, le code ajoutera simplement le nouveau résultat à la page en tant que nouveau nœud de texte: vous afficherez une longue chaîne de texte à laquelle plus de texte est continuellement annexé.
Pourquoi ne pas utiliser innerhtml?
Vous pouvez simplement mettre à jour la propriété innerhtml du div, comme ainsi:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}La propriété InnerHTML n'est pas une norme Web, mais tous les principaux navigateurs le prennent en charge. Et, comme vous pouvez le voir sur le fait qu'il s'agit d'une seule ligne de code (par rapport aux quatre lignes nécessaires pour les méthodes DOM), il est parfois plus facile à utiliser que les méthodes DOM. Aucune façon d'afficher du contenu sur votre page n'est intrinsèquement meilleure.
Dans certains cas, vous pouvez finir par choisir une méthode basée sur les différences de vitesses de rendu de ces deux approches (innerHTML peut être plus rapide que les méthodes DOM). Dans d'autres cas, vous pouvez fonder votre décision sur la clarté du code, ou même sur le goût personnel.
recommencer le processus
Enfin, ShowPoll démarre l'intégralité du processus en planifiant un appel à la fonction DOPOLL d'origine en 15 secondes à l'aide de setTimeout, comme indiqué ci-dessous:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Le fait que le code invoque en continu la fonction DOPOLL signifie qu'une fois que la page se charge, les demandes HTTP interrogent la page FAKESERVER.PHP continueront de le faire jusqu'à ce que cette page soit fermée. La variable de vote est l'ID d'intervalle qui vous permet de garder une trace de l'opération en attente et de l'annuler en utilisant ClearTimeout.
Le premier paramètre de l'appel Settimeout, Dopoll, est un pointeur vers la fonction principale de l'application; La seconde représente la durée, en quelques secondes, qui doit s'écouler entre les demandes.
Exemple complet Code
Voici tout le code de notre premier essai exécuté avec cette application de surveillance simple.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Dans le but de suivre les bons principes d'ingénierie logicielle, j'ai séparé le code JavaScript du balisage et les ai mis dans deux fichiers différents.
Je suivrai une approche similaire avec tout l'exemple de code pour ce livre, séparant le balisage de chaque exemple, le code JavaScript et CSS en fichiers séparés. Cette petite application de surveillance est si basique qu'elle n'a pas de fichier CSS. Nous allons ajouter quelques styles pour le rendre plus agréable dans le chapitre suivant.
exécuter l'application
Essayez de charger la page dans votre navigateur. Déposez-le dans le répertoire racine de votre serveur Web et ouvrez la page de votre navigateur.
Si la page Fakerver.php répond correctement, vous verrez quelque chose comme l'affichage illustré à la figure 2.3.
Figure 2.3. Exécution de l'application de surveillance simple
Voici quelques ressources en ligne qui vous aideront à en savoir plus sur les techniques et les concepts de ce chapitre.
Modèle d'objet de JavaScript
Consultez ces deux chapitres sur les objets du guide JavaScript côté client pour la version 1.3 de JavaScript, hébergé par Sun Microsystems. Le premier chapitre explique tous les concepts de base dont vous avez besoin pour comprendre comment travailler avec des objets en JavaScript. Le second va plus en profondeur sur le modèle d'héritage basé sur le prototype de JavaScript, vous permettant de tirer parti de plus de puissance du codage orienté objet avec JavaScript.
Il s'agit d'une brève introduction à la création de variables d'instance privées avec des objets JavaScript. Cela vous aidera à mieux comprendre le schéma d'héritage basé sur le prototype de JavaScript.
xmlhttprequest
Voici une bonne page de référence de la connexion du développeur Apple. Il donne un bel aperçu de la classe XMLHTTPREQUEST et un tableau de référence de ses méthodes et propriétés.
Cet article, initialement publié en 2002, continue d'être mis à jour avec de nouvelles informations. Il comprend des informations sur la fabrication de demandes de tête (au lieu de simplement obtenir ou publier), ainsi que la notation d'objet JavaScript (JSON), et SOAP.
Il s'agit de la référence exhaustive de Xulplanet sur l'implémentation XMLHTTPREQUEST dans Firefox.
Voici une autre belle vue d'ensemble, qui montre également certaines des méthodes moins utilisées de l'objet XMLHTTPRequest, telles que OverdemimeType, SetRequestHeader et GetResponseHeader. Encore une fois, cette référence est axée sur la mise en œuvre dans Firefox.
Il s'agit de la documentation de Microsoft sur MSDN de son implémentation de XMLHTTPREQUEST.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}La figure 3.1 montre à quoi ressemblera l'application en cours d'exécution une fois que nous aurons terminé avec toutes les améliorations.
Le code de cette application est divisé en trois fichiers: le balisage dans Appmonitor2.html, le code JavaScript dans Appmonitor2.js et les styles dans appmonitor2.css. Pour commencer, nous lierons tous les fichiers requis à Appmonitor2.html:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Figure 3.1. L'application en cours d'exécution
Toutes ces nouvelles fonctionnalités ajouteront beaucoup plus de complexité à notre application, c'est donc le bon moment pour établir une sorte d'organisation au sein de notre code (une bien meilleure option que de tout laisser dans la portée mondiale). Après tout, nous construisons une application Ajax entièrement fonctionnelle, nous voulons donc le faire organiser correctement.
Nous utiliserons les principes de conception orientés objet pour organiser notre application. Et nous commencerons, bien sûr, avec la création d'une classe de base pour notre application - la classe Monitor.
En règle générale, nous créons une classe en javascript comme ceci:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Il s'agit d'une belle fonction de constructeur normal, et nous pourrions facilement l'utiliser pour créer une classe de moniteur (ou un tas d'entre eux si nous le voulions).
Perte de portée avec setTimeout
Malheureusement, les choses ne seront pas aussi faciles dans le cas de notre application. Nous allons utiliser beaucoup d'appels pour setTimeout (ainsi que SetInterval) dans notre application, de sorte que la méthode normale de création de classes JavaScript peut s'avérer gênante pour notre classe de moniteur.
La fonction Settimeout est vraiment pratique pour retarder l'exécution d'un morceau de code, mais il a un inconvénient sérieux: il exécute ce code dans un contexte d'exécution différent de celui de l'objet. (Nous avons parlé un peu de ce problème, appelé perte de portée, dans le dernier chapitre.)
C'est un problème car le mot-clé de l'objet, cela a une nouvelle signification dans le nouveau contexte d'exécution. Ainsi, lorsque vous l'utilisez dans votre classe, il souffre d'un coup soudain d'amnésie - cela n'a aucune idée de ce que c'est!
Cela peut être un peu difficile à comprendre; Profitons une démonstration rapide afin que vous puissiez réellement voir cette gêne en action. Vous vous souvenez peut-être de la classe Scopetest que nous avons examinée dans le dernier chapitre. Pour commencer, c'était une classe simple avec une propriété et une méthode:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Le résultat de ce code est la boîte d'alerte JavaScript prévisible avec le texte «Salutations de Scopetest!»
Modigeons la méthode Dottest afin qu'il utilise Settimeout pour afficher le message en une seconde.
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Au lieu de notre message de salutation, la boîte d'alerte qui résulte de cette version du code lira «Undefined». Parce que nous avons appelé sur le temps de Settimeout, ontimeout est exécuté dans un nouveau contexte d'exécution. Dans ce contexte d'exécution, cela ne fait plus référence à une instance de ScopeTest, donc ce.Message n'a pas de sens.
Le moyen le plus simple de traiter ce problème de perte de portée est de faire de la classe Monitor un type de classe spécial, appelé singleton.
singletons avec javascript
Un «singleton» est appelé ainsi car seul une instance «unique» de cette classe existe à tout moment. Faire une classe en singleton est étonnamment facile:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}L'utilisation du mot-clé nouveau avant la fonction crée un constructeur «à un coup». Il crée une seule instance de ScopeTest, et c'est fait: vous ne pouvez pas l'utiliser pour créer plus d'objets ScopeTest.
Pour appeler la méthode Dottest de cet objet Singleton, vous devez utiliser le nom réel de la classe (car il n'y a que la seule instance):
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};C'est bien bien, mais nous n'avons pas résolu notre problème de perte de portée. Si vous deviez essayer le code maintenant, vous obtiendrez le même message «non défini» que vous avez vu auparavant, car cela ne fait pas référence à une instance de ScopeTest. Cependant, l'utilisation d'un singleton nous donne un moyen facile de résoudre le problème. Tout ce que nous avons à faire est d'utiliser le nom réel de l'objet - au lieu du mot clé ceci - à l'intérieur de l'heure:
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};Il n'y a qu'une seule instance de ScopeTest, et nous utilisons son nom réel au lieu de cela, il n'y a donc pas de confusion sur quelle instance de ScopeTest est mentionnée ici.
Lorsque vous exécutez ce code, vous verrez la valeur attendue des «salutations de Scopetest!» Dans le boîtier d'alerte JavaScript.
Maintenant, je me lasse d'utiliser le nom réel de l'objet tout au long de mon code d'objet, et j'aime utiliser un mot-clé de raccourci comme celui-ci partout où je le peux. Donc, généralement je crée un moi variable que je peux utiliser à la place de cela, et je le pointe vers le nom de l'objet en haut de chaque méthode, comme ainsi:
Example 2.4. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
this.req.open(this.method, this.url, this.async); <br>
};Cela semble un peu idiot dans une méthode aussi courte que cela, mais dans des morceaux de code plus longs, il est agréable d'avoir une solution de raccourci similaire à celle que vous pouvez utiliser pour vous référer à votre objet. Je m'utilise, mais vous pourriez m'utiliser, ou Heyyou, ou Darthvader si vous le vouliez.
Création de l'objet Monitor
Maintenant que nous avons un plan pour l'organisation de code qui résoudra le problème de perte de scope à partir de setTimeout, il est temps de créer notre classe de moniteur de base:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Les quatre premières propriétés, TargetUrl, Polonterval, MaxPollentries et TimeoutThreshold, seront initialisées dans le cadre de l'initialisation de la classe. Ils prendront les valeurs définies dans la configuration de l'application, que nous examinerons dans la section suivante.
Voici un bref aperçu des autres propriétés:
Un webmaster qui examine cette application peut penser qu'il était assez cool, mais l'une des premières choses qu'il souhaiterait est un moyen facile de configurer l'intervalle de sondage de l'application, ou le moment qui s'écoule entre les demandes que l'application fait sur le site qu'il surveillait. Il est facile de configurer l'intervalle de sondage en utilisant une constante globale.
Pour rendre très simple que tout utilisateur de ce script définit l'intervalle de sondage, nous mettrons cette section du code dans un élément de script dans la tête d'AppMonitor2.html:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Vous remarquerez que ces noms de variables sont écrits en tout-caps. Ceci est une indication qu'ils devraient agir comme des constantes - des valeurs définies tôt dans le code et ne changent pas au fur et à mesure que le code s'exécute. Les constantes sont une caractéristique de nombreux langages de programmation mais, malheureusement, JavaScript n'en fait pas partie. (Les versions plus récentes de JavaScript vous permettent de définir des constantes réelles avec le Constkeyword, mais cette installation n'est pas largement prise en charge (même par de nombreux navigateurs modernes).) Notez que ces constantes se rapportent directement aux quatre premières propriétés de notre classe: TargetUrl, Polterval, MaxPollentries et Timeouthreshold. Ces propriétés seront initialisées dans la méthode INIT de notre classe:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}En plus de l'initialisation de certaines des propriétés de notre classe, la méthode INIT appelle également deux méthodes: ToggleAppStatus, qui est responsable du démarrage et de l'arrêt du sondage, et de la méthode INIT de l'objet reqstatus. Reqstatus est l'instance de la classe de singleton de statut dont nous avons discuté il y a un instant.
Cette méthode init est liée à l'événement Window.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}La première version de cette application a commencé lorsque la page a chargé et a couru jusqu'à ce que la fenêtre du navigateur soit fermée. Dans cette version, nous voulons donner aux utilisateurs un bouton qu'ils peuvent utiliser pour activer ou désactiver le processus de sondage. La méthode ToggleAppStatus gère cela pour nous:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
D'accord, donc ToggleAppStatus ne fait pas vraiment le travail, mais il appelle les méthodes qui font: ToggleButton, qui modifie les boutons de démarrage en boutons d'arrêt et vice versa, et ToggleStatusMessage, qui met à jour le message d'état de l'application. Examinons de plus près chacune de ces méthodes.
La méthode ToggleButton
Cette méthode bascule l'application principale entre ses états «stop» et «start». Il utilise des méthodes DOM-Manipulation pour créer le bouton approprié dynamiquement, en lui attribuant le texte correct et un gestionnaire d'événements OnClick:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Le seul paramètre de cette méthode, arrêté, peut être vrai, indiquant que le sondage a été arrêté, soit faux, indiquant que le sondage a commencé.
Comme vous pouvez le voir dans le code de cette méthode, le bouton est créé et est défini pour afficher Start si l'application est arrêtée, ou arrête si l'application interroge actuellement le serveur. Il attribue également PollServerStart ou PollServerStop en tant que gestionnaire d'événements OnClick du bouton. Ces gestionnaires d'événements commenceront ou arrêteront respectivement le processus de sondage.
Lorsque cette méthode est appelée depuis init (via ToggleAppStatus), STOPT est défini sur true afin que le bouton affiche le démarrage lorsque l'application est démarrée.
Comme ce code appelle une div avec l'ID Buttonarea, ajoutons cela à notre balisage maintenant:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};La méthode ToggleStatusMessage
Affichage d'un bouton avec le mot «démarrer» ou «s'arrêter», cela peut être tout ce que les programmeurs ou les ingénieurs ont besoin de déterminer le statut de l'application, mais la plupart des gens normaux ont besoin d'un message un peu plus clair et plus évident pour déterminer ce qui se passe avec une application.
Cette version mise à niveau de l'application affichera un message d'état en haut de la page pour informer l'utilisateur de l'état global de l'application (arrêté ou exécuté) et l'état du processus de sondage. Pour afficher l'état de l'application, nous placerons un bon message clair dans la barre d'état de l'application qui indique l'état de l'application: statut d'arrêt ou de l'application: en cours d'exécution.
Dans notre balisage, insérons le message d'état ci-dessus où le bouton apparaît. Nous n'inclurons que la partie «statut de l'application» du message dans notre balisage. Le reste du message sera inséré dans une portée avec l'ID CurrentAppstate:
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};La méthode toggleStatusMessage bascule entre les mots qui peuvent s'afficher à l'intérieur de la portée actuelle de la pointe:
Example 2.4. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
this.req.open(this.method, this.url, this.async); <br>
};Une fois l'interface utilisateur configurée, l'application est amorcée et prête à commencer à interroger et à enregistrer les temps de réponse.
Vérification de votre travail en cours
Maintenant que vous êtes venu si loin, ce serait bien de pouvoir voir votre travail en action, non? Eh bien, malheureusement, nous avons encore beaucoup de fins lâches dans notre application - nous avons brièvement mentionné une classe singleton appelée Status, mais nous ne l'avons pas encore créée, et nous avons encore des gestionnaires d'événements à écrire. Mais n'ayez pas peur! Nous pouvons rapidement mettre l'application en cours d'exécution avec quelques talons de classe et de fonction.
Nous allons commencer par créer cette classe de singleton de statut avec une méthode vide.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Étant donné que la classe d'état est utilisée par la classe Monitor, nous devons déclarer l'état avant le moniteur.
Ensuite, nous ajouterons les gestionnaires d'événements OnClick de notre bouton à la classe Monitor. Nous les obtiendrons afficher des boîtes de dialogue d'alerte afin que nous sachions ce qui se passerait s'il se passait quelque chose dans les coulisses.
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Avec ces deux talons simples en place, votre application doit désormais être prête pour un essai.
Figure 3.2. Humble Beginnings
Lorsque vous cliquez sur le bouton Démarrer dans l'affichage illustré à la figure 3.2, vous avez une boîte d'alerte qui promet de plus grandes choses à venir. Commençons à faire ces promesses.
La première étape consiste à étoffer le gestionnaire d'événements OnClick du bouton de démarrage, PollServerStart:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Ce code appelle immédiatement la méthode DOPOLL, qui, comme le moniteur d'application que nous avons construit dans le chapitre 2, XMLHTTPREQUEST de base, sera responsable de faire une demande HTTP pour interroger le serveur. Une fois la demande envoyée, le code appelle ToggleAppStatus, le transmettant faux pour indiquer que le sondage est en cours.
où est l'intervalle de sondage?
Vous vous demandez peut-être pourquoi, après tous ces discours sur la définition d'un intervalle de sondage, notre code intervient avec une demande au serveur; Où est le retard? La réponse est que nous ne voulons pas de délai sur la toute première demande. Si les utilisateurs cliquent sur le bouton et qu'il y a un délai de dix secondes avant que quelque chose ne se produise, ils penseront que l'application est rompue. Nous voulons des retards entre toutes les demandes suivantes qui se produisent une fois l'application en cours d'exécution, mais lorsque l'utilisateur clique pour la première fois sur ce bouton, nous voulons que le sondage commence tout de suite.
La seule différence entre Dopoll dans cette version de notre moniteur d'applications et celle que nous avons vue dans le dernier chapitre est l'utilisation de soi pour préfixer les propriétés de la classe et l'appel à setTimeout. Jetez un œil:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Notre appel à Settimeout demande au navigateur d'appeler HandleTimeout une fois que le seuil de temps mort est passé. Nous gardons également une trace de l'ID d'intervalle qui est retourné, nous pouvons donc annuler notre appel à HandleTimeout lorsque la réponse est reçue par showpoll.
Voici le code de la méthode ShowPoll, qui gère la réponse du serveur:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}La première chose que cette méthode fait est d'annuler l'appel retardé à HandleTimeout qui a été fait à la fin de Dopoll. Après cela, nous disons à notre instance de la classe d'état pour arrêter son animation (nous allons examiner les détails de cela un peu plus tard).
Après ces appels, ShowPoll vérifie pour s'assurer que la réponse est OK, puis calcule combien de temps cette réponse a pris pour revenir du serveur. Les capacités de gestion des erreurs de la classe Ajax doivent gérer les erreurs du serveur, donc notre script ne devrait rien retourner d'autre que OK… bien qu'il ne fasse jamais de mal de s'assurer!
Une fois qu'il a calculé le temps de réponse, ShowPoll enregistre que le temps de réponse avec UpdatePollaRay, puis affiche le résultat avec Printresult. Nous examinerons ces deux méthodes dans la section suivante.
Enfin, nous planifions un autre sondage à Dopolldelay - une méthode très simple qui planifie un autre appel à Dopoll une fois l'intervalle de sondage passé:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Pour vérifier nos progrès jusqu'à ce point, nous devrons ajouter quelques méthodes supplémentaires. Tout d'abord, ajoutons StartProc et StopProc à la classe d'état:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Ajoutons également quelques méthodes de stub à notre classe de moniteur:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Maintenant, nous sommes prêts à tester nos progrès. Ouvrez Appmonitor2.html Dans votre navigateur Web, cliquez sur Démarrer et attendez que Fakeserver.php se réveille de son sommeil et renvoyez OK à votre page.
Vous pouvez vous attendre à l'un des deux résultats: Soit une réponse est reçue par votre page, et vous voyez une boîte de dialogue similaire à celle illustrée à la figure 3.3, ou vous voyez le message d'expiration illustré à la figure 3.4.
Figure 3.3. Une réponse reçue par votre application Ajax
Ne vous inquiétez pas si vous recevez le message de délai d'expiration illustré à la figure 3.4. Gardez à l'esprit que dans notre application AJAX, notre seuil de délai d'expiration est actuellement défini sur dix secondes, et que Fakeserver.php dort actuellement pour un nombre sélectionné au hasard de secondes entre trois et 12. Si le nombre aléatoire est dix ou plus, l'application AJAX rapportera un délai d'expiration.
Figure 3.4. Votre application Ajax rendant l'espoir
Pour le moment, nous n'avons pas mis en œuvre un moyen d'arrêter le sondage, vous devrez donc l'arrêter soit en rechargeant la page ou en fermant la fenêtre de votre navigateur.
Si vous avez exécuté le code que nous avons écrit jusqu'à présent, vous avez probablement remarqué que même lorsqu'un délai d'attente est signalé, vous voyez un message signalant le temps de réponse de la demande peu de temps après. Cela se produit parce que HandleTimeout n'est rien d'autre qu'un simple talon pour le moment. Regardons de nous construire sur ce talon afin que nous n'obtenons pas cet effet secondaire.
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Ici, HandleTimeout appelle Stoppoll pour arrêter notre application sonder le serveur. Il enregistre qu'un délai d'attente s'est produit, met à jour l'interface utilisateur et configure enfin un autre appel à Dopoll via Dopolldelay. Nous avons déplacé le code qui arrête le sondage dans une fonction distincte car nous devrons le revoir plus tard et le renforcer. À l'heure actuelle, la méthode Stoppoll interdit simplement la demande HTTP via la méthode AbOrt de la classe Ajax; Cependant, il y a quelques scénarios que cette fonction ne gère pas. Nous les aborderons plus tard, lorsque nous créons le code complet pour arrêter le processus de sondage, mais dans le but de gérer le délai d'attente, Stoppoll est bien.
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Maintenant, lorsque nous rechargeons notre application, les délais d'expiration fonctionnent exactement comme nous l'attendons.
Maintenant, à la viande de la nouvelle version de notre application de surveillance! Nous voulons que l'application affiche une liste des temps de réponse passés, pas seulement une seule entrée de la plus récente, et nous voulons afficher cette liste d'une manière qui est rapidement et facilement lisible. Un affichage de graphique à barres en cours d'exécution est l'outil parfait pour le travail.
La liste des courses dans Pollarray
Tous les temps de réponse entreront dans un tableau qui est stocké dans la propriété Pollarray de la classe Monitor. Nous conservons ce tableau à jour avec la méthode intuitivement nommée UpdatePolLarray. C'est une méthode très simple qui ressemble à ceci:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Le code est très simple, bien que certaines des fonctions que nous y avons utilisées aient des noms légèrement déroutants.
La méthode de décalage d'un objet de tableau met un nouvel élément dans le tout premier élément du tableau, et déplace le reste du contenu du tableau par une position, comme le montre la figure 3.5.
Figure 3.5. Insérer des fruits en utilisant un décalage
Lorsque le tableau dépasse la longueur maximale définie par l'utilisateur, UpdatePolLarray le tronque en «faisant sortir» un élément de la fin. Ceci est réalisé par la méthode POP, qui supprime simplement le dernier élément d'un tableau. (Notez que le nom de méthode POP peut sembler assez étrange, mais il est plus logique une fois que vous comprenez une structure de données appelée une pile, qui stocke un certain nombre d'éléments qui ne peuvent être accessibles qu'à l'ordre de l'ordre dans lequel ils ont été ajoutés à la pile. un tableau.) La raison pour laquelle nous ajoutons les éléments en haut et supprimons les éléments du bas du tableau est que, dans notre affichage, nous voulons que les entrées les plus récentes apparaissent en haut, et les entrées plus anciennes pour se déplacer progressivement vers le bas.
Affichage des résultats
Une fois que nous avons mis à jour les résultats dans Pollarray, nous pouvons les afficher en utilisant la méthode Printresult. Il s'agit en fait de la partie cool: l'utilisateur connaîtra la différence entre notre application AJAX et une application de style plus ancienne qui nécessite un rafraîchissement de page entier pour mettre à jour le contenu.
Page de rendu partiels
Dans le jargon ajax, le morceau de la page qui contient la liste des temps de réponse est appelé une page partielle. Cela fait référence à une zone d'une page Web qui est mise à jour séparément du reste de la page.
La mise à jour d'un morceau d'une page Web en réponse à une demande asynchrone au serveur est appelée «Rendre une page partielle».
La méthode Printresult itère via Pollarray et utilise des méthodes DOM pour établir la liste des résultats du sondage à l'intérieur d'une div avec le PollResult ID. Nous allons commencer par ajouter cette div à notre balisage:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Maintenant, nous sommes prêts pour la méthode Printresult:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Il y a pas mal ici, alors regardons cette méthode étape par étape.
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Après avoir initialisé certaines variables, cette méthode supprime tout de Polldiv: la boucle while utilise Removechild à plusieurs reprises pour supprimer tous les nœuds enfants de Polldiv.
Vient ensuite un simple pour la boucle qui saute dans le tableau mis à jour de résultats et les affiche.
Nous générons un message pour le résultat de chaque élément de ce tableau. Comme vous pouvez le voir ci-dessous, les délais d'expiration (qui sont enregistrés comme un 0) génèrent un message de (temps mort).
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};Ensuite, nous utilisons les méthodes DOM pour ajouter le balisage pour chaque entrée de la liste dynamiquement. En effet, nous construisons le HTML suivant en JavaScript pour chaque entrée de la liste:
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};La largeur de la barre de la barre change pour refléter le temps de réponse réel, et les délais d'expiration sont indiqués en rouge, mais sinon toutes les entrées de cette liste sont identiques. Notez que vous devez mettre quelque chose dans le div pour faire afficher sa couleur d'arrière-plan. Même si vous donnez à la div une largeur fixe, la couleur d'arrière-plan ne montrera pas si la div est vide. C'est ennuyeux, mais c'est facile à réparer: nous pouvons remplir la div avec un personnage d'espace non révolutionnaire.
Jetons un coup d'œil au code que nous utiliserons pour insérer ce balisage:
Example 2.4. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
this.req.open(this.method, this.url, this.async); <br>
};Ce code peut sembler compliqué si vous n'avez jamais utilisé de fonctions de manipulation DOM, mais c'est vraiment assez simple. Nous utilisons la méthode CreateElement bien nommée pour créer des éléments; Ensuite, nous attribuons des valeurs aux propriétés de chacun de ces objets d'élément.
Juste après l'instruction IF, nous pouvons voir le code qui définit la largeur des pixels du div de barre en fonction du nombre de secondes prises pour générer chaque réponse. Nous multiplions cette période de temps par 20 pour obtenir une largeur raisonnable, mais vous voudrez peut-être utiliser un nombre supérieur ou inférieur en fonction de la quantité d'espace horizontal disponible sur la page.
Pour ajouter du texte aux éléments, nous utilisons CreateTextNode en conjonction avec APPENDCHILD, qui est également utilisé pour placer des éléments à l'intérieur d'autres éléments.
CreateExtNode et espaces non révolutionnaires
Dans le code ci-dessus, nous créons un espace non révolutionnaire en utilisant U00A0. Si nous essayons d'utiliser le NORMAD & NBSP; Entité Ici, CreateTextNode tentera d'être «utile» en convertissant l'ampesand en & amp ;; Le résultat est que & nbsp; est affiché sur votre page. La solution de contournement consiste à utiliser l'espace non révolutionnaire Unicode échappé: u00a0.
Figure 3.6. L'application commence à prendre forme
Le dernier morceau du code rassemble tous les éléments div, puis place le div de Pollresult à l'intérieur du Pollresults Div. La figure 3.6 montre l'application en cours d'exécution.
«tenir une seconde», vous pourriez bien penser. "Où est le graphique de la barre que nous sommes censés voir?"
La première barre est là, mais elle est affichée en blanc sur blanc, ce qui est assez inutile. Prenons le visible via CSS de notre application:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Le principal point d'intérêt pour le CSS est le flotteur: les déclarations de gauche pour le temps et les éléments de div bar, qui constituent la liste des temps et la barre colorée dans le graphique de la barre. Les flottant à gauche est ce qui les fait apparaître côte à côte. Cependant, pour que cette technique de positionnement fonctionne, un élément avec la classe ClearBoth doit apparaître immédiatement après ces deux div.
C'est là que vous pouvez voir Ajax en action. Il utilise des bits de toutes ces différentes technologies - XMLHttpRequest, le W3C DOM et CSS - câblé ensemble et contrôlé avec JavaScript. Les programmeurs éprouvent souvent les plus gros problèmes avec CSS et avec les aspects pratiques de la construction d'éléments d'interface dans leur code.
En tant que programmeur Ajax, vous pouvez soit essayer de dépendre d'une bibliothèque pour prendre soin du CSS pour vous, soit en apprendre suffisamment pour faire le travail. Il est pratique de connaître quelqu'un de intelligent qui est heureux de répondre à beaucoup de questions sur le sujet, ou d'avoir un bon livre sur CSS (par exemple, SitePoint The CSS Anthology: 101 Conseils essentiels, astuces et hacks ).
Figure 3.7. Les débuts de notre graphique à barres
Maintenant que notre CSS est en place, nous pouvons voir le graphique de la barre dans notre affichage d'application, comme l'illustre la figure 3.7.
Arrêter l'application
L'action finale de la méthode PollServerStart, après avoir fait fonctionner l'application, est d'appeler ToggleAppStatus pour basculer l'apparition de l'application. ToggleAppStatus modifie l'affichage d'état en l'état de l'application: l'exécution, bascule le bouton Démarrer sur un bouton d'arrêt et attache la méthode PollServerStop à l'événement OnClick du bouton.
La méthode PollServerStop arrête le processus de sondage en cours, puis replie l'application afin qu'il semble être correctement arrêté:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Ce code réutilise la méthode d'arrêt que nous avons ajoutée plus tôt dans le chapitre. Pour le moment, tout ce que fait la méthode est interrompu la demande HTTP actuelle, ce qui est bien pendant que nous gérons un délai d'attente. Cependant, cette méthode doit également gérer deux autres scénarios.
Le premier de ces scénarios se produit lorsque la méthode est appelée pendant l'intervalle de scrutin (c'est-à-dire après avoir reçu une réponse à une demande HTTP, mais avant l'envoi de la demande suivante). Dans ce scénario, nous devons annuler l'appel retardé à Dopoll.
Le deuxième scénario que cette méthode doit être capable de gérer se produit lorsque Stoppoll est appelé une fois qu'il a envoyé une demande, mais avant de recevoir la réponse. Dans ce scénario, le gestionnaire de temps mort doit être annulé.
Alors que nous gardons une trace des ID d'intervalle des deux appels, nous pouvons modifier Stoppoll pour gérer ces scénarios avec deux appels à ClearTimeout:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Maintenant, vous devriez être en mesure de vous arrêter et de démarrer le processus de sondage simplement en cliquant sur le bouton Démarrer / Stop sous le graphique de la barre.
La capacité de l'Ajax à mettre à jour le contenu de manière asynchrone et le fait que les mises à jour peuvent affecter uniquement les petites zones de la page font de l'affichage des notifications de statut une partie essentielle de la conception et du développement d'une application Ajax. Après tout, les utilisateurs de votre application doivent savoir ce que fait l'application.
à l'époque du développement Web, lorsqu'une page entière a dû recharger afin de refléter toute modification de son contenu, il était parfaitement clair pour les utilisateurs finaux lorsque l'application communiquait avec le serveur. Mais nos applications Web Ajax peuvent parler au serveur en arrière-plan, ce qui signifie que les utilisateurs ne voient pas le rechargement de page complet qui indiquerait autrement que quelque chose se passait.
Alors, comment les utilisateurs de votre application Ajax savent-ils que la page communique avec le serveur? Eh bien, au lieu de l'ancien globe de rotation ou des animations de drapeau agitant qui s'affichent dans le navigateur Chrome, les applications AJAX informent généralement les utilisateurs que le traitement est en cours à l'aide de petites animations ou de transitions visuelles. Habituellement réalisés avec CSS, ces transitions attirent les yeux des utilisateurs - sans être distrayant! - et fournir des conseils sur ce que fait l'application. Un aspect important de la bonne conception de l'application Ajax est le développement de ces types de notifications.
L'animation d'état
Puisque nous avons déjà en haut de notre application une petite barre qui indique à l'utilisateur si l'application est en cours d'exécution ou arrêtée, c'est un endroit assez logique pour afficher un peu plus d'informations d'état.
Les animations comme les boules de tournoyer ou les chiens de course sont un bon moyen d'indiquer qu'une application est occupée - généralement, vous voudrez afficher une image qui utilise le mouvement pour indiquer l'activité. Cependant, nous ne voulons pas utiliser un signal qui va éloigner l'attention des utilisateurs de la liste, ou conduire les gens à la distraction alors qu'ils essaient de lire les résultats, nous allons donc aller avec l'animation lente et pulsante illustrée à la figure 3.8.
Cette animation a les avantages supplémentaires d'être léger et facile à mettre en œuvre dans CSS - aucun lecteur flash n'est requis, et il n'y a pas d'image gif volumineuse à télécharger le cadre par un cadre fastidieux.
Le côté à droite de la barre blanc est un espace inutilisé, ce qui en fait un endroit idéal pour ce type de notification: c'est en haut de l'interface utilisateur, donc c'est facile à voir, mais c'est à droite, donc c'est à l'écart des personnes qui essaient de lire la liste des résultats.
Figure 3.8. Notre animation de statut pulsé
Pour héberger cette animation, nous allons ajouter une div avec le pondage d'ID juste en dessous du message de statut div dans notre document:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Ajoutez une règle CSS à votre feuille de style pour positionner cette div:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Cette animation est désormais positionnée à droite de la page.
Lorsque vous ouvrez la page dans votre navigateur, vous ne pourrez pas voir l'animation - ce n'est rien d'autre qu'une boîte blanche sur un fond blanc pour le moment. Si vous le souhaitez, ajoutez un peu de contenu à PollingMessage pour voir où il est positionné.
setterval et perte de portée
Le JavaScript setInterval est un moyen évident et facile de gérer une tâche qui se produit à plusieurs reprises - par exemple, pour contrôler une animation pulsée.
Toutes les girations CSS avec SetInterval entraînent un code assez intéressant et volumineux. Ainsi, comme je l'ai mentionné précédemment, il est logique de mettre le code de l'animation d'état dans sa propre classe - statut - que nous pouvons référencer et utiliser à partir de la classe Monitor.
Certains des développeurs intelligents lisant ceci ont peut-être deviné que SetInterval souffre des mêmes problèmes de perte de scope que Settimeout: le mot clé de l'objet qui se perd. Puisque nous devons traiter une seule animation de statut dans notre application de surveillance, il est logique de prendre l'approche opportune et de faire de notre classe de statut une classe singleton, tout comme nous l'avons fait pour la classe Monitor.
Configuration du statut
Commençons par ajouter certaines propriétés au talon d'état que nous avons déjà écrit, afin d'obtenir le code précédent:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}L'objet de statut a quatre propriétés:
Initialisation
Une méthode init est nécessaire pour lier la propriété DIV à PollingMessage:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}La méthode init contient également un appel à une méthode nommée Setalpha, qui est requise pour une solution de contournement IE que nous envisageons un peu plus tard.
Les fuites de mémoire de l'explorateur Internet
Les références d'élémentDOM (variables qui pointent vers des éléments div, td ou span et similaires) qui sont utilisées comme propriétés de classe sont une cause notoire de fuites de mémoire dans Internet Explorer. Si vous détruisez une instance d'une classe sans effacer ces propriétés (en les définissant sur NULL), la mémoire ne sera pas récupérée.
Ajoutons à notre classe de moniteur une méthode de nettoyage qui gère l'événement de la fenêtre.
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
};En réalité, ce ne serait pas vraiment un problème pour notre petite application, mais cela peut devenir un problème sérieux dans les grandes applications Web qui ont beaucoup de DHTML. Il est bon de prendre l'habitude de nettoyer les références DOM dans votre code afin que cela ne devienne pas un problème pour vous.
La méthode DisplayOpacity
Le morceau de code central de la classe d'état vit dans la méthode DisplayOpacity. Cela contient le code spécifique du navigateur nécessaire pour modifier les propriétés CSS appropriées du DIV de PollingMessage. Voici le code:
Example 2.3. ajax.js (excerpt) <br>
<br>
this.doReq = function() { <br>
if (!this.init()) { <br>
alert('Could not create XMLHttpRequest object.'); <br>
return; <br>
} <br>
};Dans la méthode, vous verrez un test pour Document. tout - une propriété qui est prise en charge uniquement par IE et Opera - et un test pour Window.Opera, qui, sans surprise, n'est pris en charge que par Opera. En tant que tel, seul IE doit exécuter la clause if de cette instruction IF. À l'intérieur de cette branche IE de l'instruction IF, la propriété propriétaire alpha.opacity est utilisée pour définir l'opacité, tandis que dans la clause ELSE, nous utilisons la propriété Mozopacity plus ancienne, qui est prise en charge par les anciens navigateurs basés sur Mozilla.
Enfin, cette méthode définit l'opacité de la manière conforme aux normes: en utilisant la propriété Opacital, qui devrait finalement être prise en charge dans tous les navigateurs conformes aux normes.
ie gotchas
Internet Explorer version 6, étant un navigateur plus ancien, souffre de quelques problèmes lorsque vous essayez de rendre les changements CSS basés sur l'opacité.
Heureusement, le premier d'entre eux est facilement résolu par un ajout à notre règle CSS de sondage:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}L'ajout de la propriété d'arrière-plan résout le premier problème spécifique avec Internet Explorer. Nous devons définir la couleur d'arrière-plan d'un élément si nous voulons modifier son opacité dans IE, ou si le texte s'affiche avec des bords déchiquetés. Notez que le réglage de l'arrière-plan sur transparent ne fonctionnera pas: il doit être défini sur une couleur spécifique.
Le deuxième problème est un peu plus délicat si vous voulez que vos fichiers CSS soient valides. IE ne vous permettra pas de changer le style.alpha.opacity à moins qu'il ne soit déclaré dans la feuille de style en premier. Maintenant, si cela ne vous dérange pas d'empêcher que vos feuilles de style soient passées par le validateur W3C, il est facile de résoudre ce problème en ajoutant une autre déclaration:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Malheureusement, cette approche génère des avertissements CSS dans les navigateurs qui ne prennent pas en charge ces propriétés propriétaires, telles que Firefox 1.5, qui affiche par défaut CSS dans la console JavaScript. Une solution qui vaut mieux que d'insérer des informations de style IE spécifiques à votre feuille de style globale consiste à utiliser JavaScript pour ajouter cette déclaration à l'attribut de style de PollingMessage Div dans IE uniquement. C’est ainsi que la méthode Setalpha appelée dans init. Voici le code de cette méthode:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Ce code, qui s'exécute uniquement dans Internet Explorer, utilise le tableau Document.Stylesheets pour parcourir chaque feuille de style liée à la page actuelle. Il accède aux règles de chacune de ces feuilles de style à l'aide de la propriété Règles et trouve le style que nous voulons en regardant la propriété SelectOrTExt. Une fois qu'il a le bon style dans le tableau des règles, il donne à la propriété filtrante la valeur dont il a besoin pour modifier l'opacité.
opacité dans l'opéra?
Malheureusement, au moment de la rédaction, même la dernière version de l'opéra (version 8.5) ne prend pas en charge l'opacité CSS, donc une telle animation ne fonctionne pas dans ce navigateur. Cependant, cette fonctionnalité est prévue pour l'opéra version 9.
exécutant l'animation
Le code de l'animation de traitement se compose de cinq méthodes: les trois premiers contrôlent l'animation «Traitement…», tandis que les deux autres contrôlent l'animation «faite». Les trois méthodes qui contrôlent l'animation «Traitement…» sont:
Les deux qui contrôlent l'animation «fait» sont:
le démarrer
Définir l'animation et le démarrer sont des travaux pour la méthode StartProc:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Après avoir défini la propriété PROC sur Proc (traitement), ce code appelle la méthode SetDisplay, qui définit la couleur et le contenu du PollingMessage Div. Nous allons examiner de plus près SetDisplay ensuite.
Une fois que le code définit la couleur et le contenu du DIV de PollingMessage, il initialise l'opacité de la div à 100 (complètement opaque) et appelle l'affichage de l'affichage pour que ce paramètre prenne effet.
Enfin, cette méthode appelle SetInterval pour planifier l'étape suivante du processus d'animation. Notez que, comme pour Settimeout, l'appel SetInterval renvoie un ID d'intervalle. Nous stockons cela dans la propriété Procinterval afin que nous puissions arrêter le processus plus tard.
Les animations «Processing…» et «Done» partagent la méthode SetDisplay:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Étant donné que les seules différences entre les états de «traitement…» et «fait» de la div de sondage sont sa couleur et son texte, il est logique d'utiliser cette fonction commune pour basculer entre les deux états du PollingMessage Div. Les couleurs sont contrôlées en attribuant des cours au PollingMessage Div, nous devons donc ajouter des règles de classe CSS pour les cours de fait et de traitement à notre feuille de style:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Faire arrêter
L'arrêt en douceur de l'animation nécessite un timing spécifique. Nous ne voulons pas que l'animation s'arrête brusquement en plein milieu d'une impulsion. Nous voulons l'arrêter dans la pause naturelle, lorsque l'opacité de l'image «Traitement…» est à zéro.
Ainsi, la méthode StopProc pour arrêter l'animation ne l'arrête pas réellement en soi - elle définit simplement un drapeau pour dire au processus d'animation qu'il est temps de s'arrêter lorsqu'il atteint un point pratique. Cela ressemble beaucoup aux appels téléphoniques reçus par de nombreux programmeurs à la fin de la journée des femmes et des maris leur rappelant de rentrer à la maison lorsqu'ils arrivent à un point d'arrêt logique dans leur code.
Étant donné que très peu d'action se produit ici, la méthode est assez courte:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Cette méthode doit faire la distinction entre deux types d'arrêt: une demande terminée avec succès (terminée) et une demande de l'utilisateur pour arrêter l'application (abandonner).
La méthode DOProc utilise ce drapeau pour déterminer s'il faut afficher le message «fait», ou tout simplement pour s'arrêter.
exécuter l'animation avec Doproc
La méthode DOPROC, qui est invoquée à 90 millisecondes, modifie l'opacité de la div de sondage pour produire l'effet pulsant de l'animation de traitement. Voici le code:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Cette méthode est morte simple - son objectif principal est simplement de réduire l'opacité de la div de sondage de 10% à chaque fois qu'elle s'appelle.
La première instruction IF semble voir si la div s'est complètement estompée. Si c'est le cas, et l'animation est toujours censée être en cours d'exécution, il réinitialise l'opacité à 100 (entièrement opaque). L'exécution de ce code tous les 90 millisecondes produit un effet fluide dans lequel le div de sondage se dispute, réapparaît et s'estompe à nouveau - l'effet pulsant familier qui montre que l'application est occupée à faire quelque chose.
Si l'animation n'est pas censée continuer à fonctionner, nous arrêtons l'animation en appelant ClearInterval, alors, si la propriété PROC est terminée, nous déclenchons l'animation «terminée» avec un appel à StartDone.
Démarrage de l'animation «Done» avec StartDone
La méthode StartDone sert le même objectif pour l'animation «faite» que la méthode StartProc sert à l'animation «Traitement…». Il ressemble également remarquablement à StartProc:
Example 2.1. ajax.js (excerpt) <br>
<br>
function Ajax() { <br>
this.req = null; <br>
this.url = null; <br>
this.method = 'GET'; <br>
this.async = true; <br>
this.status = null; <br>
this.statusText = ''; <br>
this.postData = null; <br>
this.readyState = null; <br>
this.responseText = null; <br>
this.responseXML = null; <br>
this.handleResp = null; <br>
this.responseFormat = 'text', // 'text', 'xml', or 'object' <br>
this.mimeType = null; <br>
}Cette fois, nous passons fidèles à SetDisplay, qui changera le texte en «fait» et la couleur en vert.
Nous avons ensuite configuré des appels pour Dodone avec SetInterval, qui effectue en fait le Fadeout.
le fondu final
Le code de Dodone est nettement plus simple que le code pour DOProc. Il n’a pas besoin de traiter en continu avant d’arrêter de s’arrêter, comme Doproc. Il continue de réduire de 10% l'opacité du DIV de PollingMessage jusqu'à ce qu'elle atteigne zéro, puis s'arrête. Des trucs assez simples:
Example 2.2. ajax.js (excerpt) <br>
<br>
this.init = function() { <br>
if (!this.req) { <br>
try { <br>
// Try to create object for Firefox, Safari, IE7, etc. <br>
this.req = new XMLHttpRequest(); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for later versions of IE. <br>
this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br>
} <br>
catch (e) { <br>
try { <br>
// Try to create object for early versions of IE. <br>
this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br>
} <br>
catch (e) { <br>
// Could not create an XMLHttpRequest object. <br>
return false; <br>
} <br>
} <br>
} <br>
} <br>
return this.req; <br>
}; 
Figure 3.9. L'application avec un indicateur d'état pulsé
Enfin, nous sommes prêts à tester ce code dans notre navigateur. Ouvrez Appmonitor2.html Dans votre navigateur, cliquez sur le bouton Démarrer et vous devriez voir un traitement pulsé… Message près du coin supérieur droit de la fenêtre du navigateur, comme celui illustré à la figure 3.9.
Soyez prudent avec cet intervalle de sondage!
Maintenant que nous avons une animation en cours d'exécution dans la page, nous devons faire attention à ne pas recommencer l'animation avant que le précédent ne s'arrête. Pour cette raison, il est fortement recommandé de ne pas définir Poll_Interval à rien de moins de deux secondes.
Maintenant que nous avons notre application opérationnelle, utilisons CSS pour que cela soit beau. Nous devrons ajouter le balisage suivant pour réaliser la disposition souhaitée:
function HelloWorld() { <br>
this.message = 'Hello, world!'; <br>
this.sayMessage = function() { <br>
window.alert(this.message); <br>
}; <br>
}Comme vous pouvez le voir, nous avons ajouté trois divs à partir desquels nous pouvons accrocher nos styles et une pause de ligne pour effacer le message d'état de l'application flotté et l'animation. Le CSS terminé pour cette page est le suivant; L'interface stylée est illustrée à la figure 3.10:
var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();
Figure 3.10. Le moniteur d'application terminé
Notre première application de travail a montré comment Ajax peut être utilisé pour faire plusieurs demandes à un serveur sans que l'utilisateur ne quitte la page actuellement chargée. Il a également donné une image assez réaliste du type de complexité que nous devons faire face lors de plusieurs tâches de manière asynchrone. Un bon exemple de cette complexité était notre utilisation de Settimeout pour chronométrer les demandes XMLHTTPREQUEST. Cet exemple a fourni une bonne occasion d'explorer certains des problèmes courants que vous rencontrerez lorsque vous développez des applications Ajax, telles que la perte de portée et les délais de connexion, et a fourni des solutions pratiques pour vous aider à les gérer.
C'est tout pour cet extrait de Créez vos propres applications Web Ajax - N'oubliez pas, vous pouvez télécharger cet article au format .pdf. Le livre compte huit chapitres au total, et à la fin de celui-ci, les lecteurs auront construit de nombreuses applications Web entièrement fonctionnantes, y compris un jeu d'échecs en ligne que plusieurs joueurs peuvent jouer en temps réel - la table des matières du livre a tous les détails.
AJAX, qui signifie JavaScript et XML asynchrones, est un ensemble de techniques de développement Web qui permet à une page Web de mettre à jour et de récupérer les données du serveur de manière asynchronique sans interférer avec l'affichage et le comportement de la page existante. Les composants clés de l'AJAX incluent le HTML (ou XHTML) et le CSS pour présenter des informations, le modèle d'objet de document (DOM) pour l'affichage dynamique et l'interaction avec les données, le XML pour transporter des données, le XSLT pour la manipulation des données, le XMLHTTPREQUEST objet pour la communication Asynchrones et les mises en Javascript pour améliorer ces technologies. Expérience sur un site Web?
L'objet XMLHttpRequest est un composant clé d'Ajax. Il fournit un moyen d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger toute la page. Il est utilisé pour envoyer des demandes HTTP ou HTTPS directement à un serveur Web et charger les données de réponse du serveur directement dans le script.
Oui, malgré les «x» dans AJAX pour les applications XML, les applications AJAX), et même les formats de textes de base tels que JSON (Javascript Notation), Html, et même des formats de textes de données. JSON, en particulier, est souvent utilisé dans l'Ajax car il est facile de travailler avec en JavaScript et peut être plus efficace que XML.
L'AJAX est couramment utilisé dans les applications Web qui nécessitent des mises à jour de données en temps réel sans rechargement de la page. Cela inclut des applications telles que les résultats de recherche en direct, les champs de formulaire de réalisation automatique, les cartes interactives et les mises à jour de contenu dynamique. Les flux de médias sociaux, les clients de messagerie et les sites de commerce électronique utilisent souvent l'AJAX pour fournir une expérience utilisateur fluide et interactive.
Bien que l'AJAX puisse améliorer considérablement l'expérience utilisateur, il a également des inconvénients potentiels. Il s'agit notamment des problèmes de compatibilité des navigateurs, des difficultés de débogage et des tests, et des défis avec l'optimisation des moteurs de recherche (SEO), car les moteurs de recherche peuvent avoir du mal à indexer le contenu AJAX. De plus, comme Ajax s'appuie sur JavaScript, les utilisateurs qui ont désactivé JavaScript dans leurs navigateurs ne pourront pas utiliser les fonctionnalités basées sur l'Ajax.
Comment AJAX gère-t-il la sécurité des données?
Puis-je utiliser Ajax avec des frameworks comme React ou Angular?
Le débogage d'une application Ajax peut être plus complexe que de déboguer une application Web traditionnelle en raison de la nature asynchrone de l'Ajax. Cependant, la plupart des navigateurs modernes fournissent des outils de développeur qui vous permettent d'inspecter les demandes et les réponses de l'AJAX, de surveiller l'activité du réseau et de parcourir le code JavaScript. De plus, de nombreuses bibliothèques et frameworks JavaScript fournissent des outils et des méthodes pour gérer les erreurs et exceptions de l'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!
Comment transformer deux pages en un seul document Word
vue v-si
Comment faire défiler les images en ppt
Nom de domaine de site Web gratuit
Utilisation de la fonction Matlab GridData
Définir l'imprimante par défaut
Quel logiciel est ig
Comment résoudre le problème de l'oubli du mot de passe de mise sous tension de l'ordinateur Win8
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
