Si vos signets contiennent même un seul blog de développement Web, vous saurez sans aucun doute que les scripts à distance sont présentés comme le nouveau «futur du Web».
Bien que j'ai le sentiment que quelques personnes sont peut-être un peu surexprimées à ce sujet, la version récente de nombreuses applications Web de haut niveau qui utilisent des scripts à distance ont montré qu'il existe des avantages illégaux à utiliser ces techniques dans la création d'applications Web sans transport, et à augmenter les fonctionnalités de la page Web.
Cet article vise à vous donner une introduction aux fondements des scripts à distance, en particulier, le protocole XMLHTTPRequest émergent. Nous allons ensuite parcourir un exemple d'application qui montre comment implémenter ce protocole, tout en créant une interface utilisable.
Pour commencer, téléchargez l'archive de code, qui contient tous les fichiers dont vous aurez besoin pour créer les exemples de travail présentés ici.
Essentiellement, les scripts à distance permet à JavaScript côté client de demander des données à un serveur sans avoir à actualiser la page Web. C'est ça. Tout ce qui va dans la création d'une application Web transparente s'appuie sur les méthodes établies de manipulation du modèle d'objet de document. Cela peut être quelque chose d'aussi simple que de créer une liste de mots à sélectionner, selon Google. Ou cela pourrait impliquer la création d'une interface entière pour naviguer et zoomer des images de carte, comme celle sur map.search.ch.
Cependant, ainsi que la possibilité de créer de nouvelles expériences Web, les scripts à distance nous donnent la possibilité de faire de nouvelles expériences Web inutilisables. Les scripts à distance et les applications transparentes entraînent avec eux une multitude de problèmes du domaine de conception d'applications de bureau, ce qui rend ces mêmes problèmes possibles sur le Web. Il est de votre devoir de vous assurer que vos interfaces de script à distance traitent de ces problèmes et donnent à vos utilisateurs la meilleure expérience possible.
script à distance et accessibilitéC'est une meilleure pratique généralement acceptée que les fonctions d'interaction JavaScript et de script à distance ajoutent à la fonctionnalité de base du contenu Web: le contenu doit toujours être accessible et utilisable sans ces technologies. Dans le cas d'applications Web à part entière, il peut être acceptable de fournir un système entièrement différent pour les utilisateurs qui n'ont pas de capacités de script JavaScript ou distantes. L'équipe de Gmail a récemment implémenté une interface alternative non-javascript au service.
script distant à l'aide de xmlhttprequest
pas une norme publique, la plupart des navigateurs modernes l'implémentent de manière cohérente, et il est bien parti de devenir une norme de facto pour la récupération de données JavaScript. Internet Explorer 5 pour Windows, Mozilla 1.0, Safari 1.2 et la prochaine version 8.0 d'Opera introduisent tous XMLHTTPRequest en tant qu'objet disponible.
L'API Internet Explorer XMLHttpRequest est disponible en téléchargement.Vous pouvez également télécharger la documentation de Mozilla.
Si vous avez besoin de support pour les navigateurs plus âgés que ceux-ci, les méthodes utilisant des IFRames fournissent une solution viable; Cependant, le codage de ces navigateurs limitera également votre capacité à utiliser des méthodes JavaScript DOM standard. Cet article se concentrera sur la méthode plus contemporaine XMLHTTPREQUEST.
Création d'un objet XmlHttpRequest
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");Remarque: Cela signifie également que si les utilisateurs ont des objets ActiveX désactivés dans Internet Explorer, ils ne pourront pas utiliser xmlhttprequest même si JavaScript est activé.
Pour faire face aux différences de syntaxe de création d'objets utilisées par ces navigateurs, il est préférable d'utiliser une structure d'essai / capture pour vous fournir automatiquement l'objet correct ou renvoyer une erreur si l'objet XMLHTTPRequest n'est pas disponible:var requester = new XMLHttpRequest();
Heureusement, la différence entre les implémentations s'arrête là, et tous les appels de méthode ultérieurs vers l'objet XMLHTTPRequest peuvent être effectués, quel que soit le navigateur, le script s'exécute.
Une fois qu'un objet XMLHttpRequest a été créé, nous devons appeler deux méthodes distinctes afin de la récupérer des données d'un serveur.
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
L'URL peut être relative ou absolue, mais en raison de problèmes de sécurité dans le domaine croisé, la cible doit résider sur le même domaine que la page qui la demande.
La méthode Open () prend également un troisième argument booléen facultatif qui spécifie si la demande est faite de manière asynchrone (vrai, par défaut) ou de manière synchrone (false). Avec une demande synchrone, le navigateur se figera, interdit toute interaction utilisateur, jusqu'à ce que l'objet se termine. Une demande asynchrone se produit en arrière-plan, permettant à d'autres scripts d'exécuter et de laisser l'utilisateur continuer à accéder à son navigateur. Il est recommandé d'utiliser des demandes asynchrones; Sinon, nous exécutons le risque de verrouillage du navigateur d'un utilisateur pendant qu'il attend une demande qui a mal tourné. Les quatrième et cinquième arguments optionnels d'Open () sont un nom d'utilisateur et un mot de passe pour l'authentification lors de l'accès à une URL protégée par mot de passe
Une fois que Open () a été utilisé pour initialiser une connexion, la méthode Send () active la connexion et fait la demande. Send () prend un argument, nous permettant d'envoyer des données supplémentaires, telles que les variables CGI, ainsi que l'appel. Internet Explorer le traite comme facultatif, mais Mozilla renverra une erreur si aucune valeur n'est passée, il est donc le plus sûr de l'appeler en utilisant:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Pour envoyer des variables CGI à l'aide de la méthode de demande GET, nous devons cocoter les variables dans l'URL ouverte ():
requester.open("GET", "/feed.xml");Pour envoyer des variables CGI à l'aide de la méthode de la demande de post, les variables CGI peuvent être transmises à la méthode Send () comme SO:
requester.send(null);
Une fois que nous avons appelé Send (), XMLHttpRequest contactera le serveur et récupérera les données que nous avons demandées; Cependant, ce processus prend un temps indéterminé. Afin de savoir quand l'objet a terminé la récupération des données, nous devons utiliser un écouteur d'événements. Dans le cas d'un objet XMLHTTPRequest, nous devons écouter les modifications de sa variable ReadyState. Cette variable spécifie l'état de la connexion de l'objet et peut être l'une des opérations suivantes:
Les modifications de la variable ReadyState peuvent être surveillées à l'aide d'un écouteur spécial sur leclange, nous devons donc configurer une fonction pour gérer l'événement lorsque le ReadyState est modifié:
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Même si l'objet XMLHTTPRequest nous permet d'appeler la méthode Open () plusieurs fois, chaque objet ne peut vraiment être utilisé que pour un seul appel, car l'événement OnReadyStateChange ne se met pas à jour une fois que ReadyState modifie "4" (à Mozilla). Par conséquent, nous devons créer un nouvel objet XMLHttpRequest chaque fois que nous voulons passer un appel distant.
Si nous avons fait une demande réussie, deux propriétés de l'objet XMLHttpRequest peuvent contenir des données:
Selon la complexité des données, il peut être plus facile de renvoyer les données simplement en tant que chaîne de texte brut, rendant ainsi le XML dans XMLHTTPREQUEST redondant. Cependant, pour des types de données plus complexes, vous voudrez probablement utiliser un format XML, comme celui-ci:
xml version = "1.0"?>
Nous pouvons accéder à différentes parties des données à l'aide de méthodes d'accès DOM standard. N'oubliez pas que les données contenues entre les balises sont considérées comme représentant les nœuds de texte de l'enfant du parent, nous devons donc prendre en compte cette couche de structure supplémentaire lorsque nous récupérons les données:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Nous devons également faire attention aux espaces blancs: les valeurs d'indemnité dans le fichier XML peuvent produire des espaces indésirables dans la valeur, ou ajouter des nœuds de texte supplémentaires.
Une fois que nous avons analysé les données de l'objet XMLHTTPRequest, nous sommes libres de changer, de supprimer et de l'écrire sur notre page Web comme nous le voyons!
Afin de démontrer comment utiliser le protocole XMLHTTPRequest dans une application de script distante, j'ai créé un exemple simple d'une page. Il suppose que JavaScript et XMLHTTPRequest sont disponibles afin de rendre le code plus lisible, mais dans toute application réelle, vous devez toujours vérifier que XMLHTTPREQUEST est disponible et avoir un secours (c'est-à-dire une soumission de formulaire normale) où elle n'est pas.
L'exemple de l'application permettra à l'utilisateur d'envoyer une eCard gratuite à l'adresse e-mail d'un ami. Pour ce faire, l'utilisateur doit d'abord saisir un numéro de réception, qu'il a reçu lorsqu'il a acheté des marchandises auparavant, et qui a depuis été stocké dans la base de données d'Exampleco. Ensuite, l'utilisateur doit compléter les champs restants avant l'envoi de la ECARD, entrant dans l'adresse e-mail du destinataire, le message et l'image graphique qui sera utilisée pour la carte:
Les scripts à distance sont utilisés pour trois actions dans cet exemple, à:
Parallèlement à ces actions, l'exemple contient JavaScript, qui valide les autres champs de formulaire avant la soumission, et permet à l'utilisateur de sélectionner un graphique ECARD.
L'exemple a été créé dans deux versions distinctes. La première de ces versions démontre la mise en œuvre du protocole XMLHTTPRequest à l'intérieur d'une application, mais il contient plusieurs problèmes d'utilisabilité moins que désirables. Ces problèmes sont résolus dans le deuxième exemple, qui vise à mettre en évidence certains des problèmes qui peuvent être rencontrés lorsque vous passez d'un modèle d'application basé sur des pages vers un environnement plus dynamique et interactif.
Dans une application de serveur / client traditionnel, l'ensemble du formulaire ECARD devrait être soumis au serveur, vérifié et retourné au navigateur avant que le client ne puisse être informé de la validité de son numéro de réception ou non. Avec le modèle de script à distance, nous pouvons vérifier le numéro de réception dès que l'utilisateur a terminé de traiter avec ce champ. Ainsi, lorsqu'un utilisateur soumet le formulaire, le navigateur a déjà identifié si les données sont valides ou non.
La première étape de la vérification des données à distance consiste à savoir quand l'utilisateur a saisi une valeur dans le champ Numéro de réception. Cela peut être détecté à l'aide d'un gestionnaire d'événements Onchange pour le champ. Un «changement» sur un champ de texte est enregistré chaque fois que l'utilisateur modifie la valeur du champ de texte, puis «se brouille» loin de ce champ (c'est-à-dire qu'ils s'adaptent ou cliquent à l'extérieur). C'est normalement une bonne indication qu'un utilisateur a fini de remplir le champ et que les données qu'il contient peuvent être traitées. En capturant cet événement Onchange, nous pouvons dire à notre script de commencer à valider le contenu du champ:
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Vous pourriez reconnaître une partie de cette syntaxe de la première partie de cet article, à savoir la structure d'essai / capture fourchue, et les méthodes Open () et Send () qui contrôlent l'objet XMLHttpRequest.
La première instruction IF vérifie si un objet XMLHTTPRequest existe ou est déjà en cours d'exécution; Si c'est le cas, il abandonne cette connexion. Cela garantit qu'un certain nombre d'appels contradictoires XMLHTTPREQUEST ne sont pas exécutés simultanément, ce qui obstruerait le réseau. La fonction continue ensuite, pour créer un nouvel objet XMLHttpRequest et ouvrir une connexion au script de validation côté serveur, reçoip.php.
dans reçue.php, le reçu de variable CGI est vérifié et, si sa valeur est "1234567", certaines données XML sont renvoyées; Sinon, une chaîne de texte brut de "vide" est renvoyée, indiquant que le numéro de réception n'est pas valide:
var requester = new XMLHttpRequest();
Les valeurs et les données codées durs ont été utilisées dans cet exemple pour simplifier le code, mais dans le monde réel, ce script PHP vérifiera le numéro de réception par rapport à une base de données et renverra les données appropriées pour ce nombre.
Notez que si le numéro de réception n'est pas valide, l'en-tête de type contenu envoyé est "texte / plaine". Cela simplifie quelque peu le processus d'impression du message, mais cela signifie également que, du côté client, la propriété ResponseXML de l'objet XMLHTTPRequest ne contiendra rien. En tant que tel, vous devez toujours être conscient de ce que vos scripts côté serveur renvoient et gardez un œil sur ResponseXML ou ResponseText de manière appropriée.
En plus d'appeler le script côté serveur, OnChangereCeipt () attribue également OnReadyStateCherecePeipt () pour surveiller l'état de la connexion via l'événement OnReadyStateChange, et c'est cette fonction qui détermine quand la connexion est terminée et que des actions supplémentaires doivent être prises. Pour ce faire, nous utilisons la création d'emploi / état d'état précédemment discutée:
fonction onreadystatechangeceipt ()
{
/ * Si l'objet XMLHR a terminé la récupération des données * /
if (demandeur.readystate == 4)
{
/ * Si les données ont été récupérées avec succès * /
if (requistr.status == 200)
{
writedetails ();
}
/ * IE renvoie un code d'état de 0 à certaines occasions, alors ignorez ce cas * /
else if (requistr.status! = 0)
{
alert ("Il y a eu une erreur lors de la récupération de l'URL:" demandeur.Statustext);
}
}
Retour Vrai;
}
Lorsqu'un code d'état réussi est renvoyé, writedetails () est invoqué. C'est cette fonction qui analyse les données renvoyées et détermine ce qu'il faut faire à la page Web:
var requester = new XMLHttpRequest();
Cette fonction vérifie d'abord la propriété ResponseText de l'objet XMLHTTPRequest, pour voir si le numéro de réception était valide ou non. S'il est valide, les données seront au format XML et son premier caractère sera un support incliné d'ouverture (
L'exécution de writedetails () marque la fin du processus de script distant pour la validation du numéro de réception. Avec les propriétés valides étendues sur le terrain, le navigateur sait si les données sont correctes et peuvent alerter les utilisateurs de toute erreur lorsqu'ils essaient de soumettre le formulaire:
var requester = new ActiveXObject("Microsoft.XMLHTTP");S'il y a une erreur avec le formulaire, une boîte de dialogue alert () apparaît lorsque le bouton Soumettre est cliqué, demandant à l'utilisateur de corriger l'erreur avant la soumission du formulaire:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
requester.open("GET", "/feed.xml");Cela supprime le formulaire initial présenté à l'utilisateur et insère un message d'état final:
Bien que cette application réécrit presque toute la page, il est facile de voir comment des parties spécifiques du DOM pourraient être modifiées à l'aide de scripts distants, ce qui permettrait à des parties distinctes d'une interface d'application à mettre à jour indépendamment de la page Web elle-même.
Le modèle de script à distance est très différent de l'interaction basée sur des pages standard qui imprègne la plupart du Web, et avec cette différence vient de nouveaux pièges d'utilisation qui peuvent trop facilement être introduits dans vos projets. Ces pièges proviennent généralement de la manipulation dynamique de l'interface pendant que l'utilisateur y accéde, soit à partir de la nécessité d'accéder aux données externes à la page Web.
Exemple 1 a utilisé des scripts distants pour valider le numéro de réception et pour insérer automatiquement les données qui ont été récupérées à partir de la base de données; Cependant, aucune de ces informations n'a été particulièrement bien utilisée, et elle n'était pas évidente pour l'utilisateur ce qui se passait. L'exemple 2 vise à corriger cette carence et d'autres dans le premier exemple et à rendre l'expérience beaucoup plus rapide, plus facile et plus compréhensible pour l'utilisateur. Les cinq conseils ci-dessous expliquent certains des changements qui peuvent être utilisés pour transformer une mauvaise expérience en bonne.
Astuce n ° 1: Dites aux utilisateurs pourquoi ils attendent
Les scripts distants ne sont pas instantanés. Quelle que soit la vitesse de votre connexion Web, le temps de communication avec une source externe variera. Donc, alors que la communication avec un serveur se produit, il est impératif de dire à l'utilisateur pourquoi il attend. (L'exemple de scripts PHP utilise les appels Sleep () pour mettre en évidence les périodes d'attente qui peuvent être causées par le trafic réseau ou d'autres facteurs.)
Parce que les applications de script à distance ne font pas d'appels à l'aide de l'interface du navigateur normal, la barre d'état - qui informe normalement l'utilisateur de l'état et de l'activité de transfert - ne fonctionne pas comme il le fait normalement, donc, nous devons donc fournir des commentaires à l'utilisateur nous-mêmes.
Dans l'exemple 2, alors que le numéro de réception est en cours de vérification, une étiquette s'affiche à côté du champ Numéro de réception pour expliquer l'attente.
L'étiquette change pour indiquer l'achèvement une fois la connexion XMLHTTPRequest terminée.
Le message d'état est initialisé juste avant la connexion XMLHttpRequest, lorsque l'événement OnChange pour le champ de numéro de réception est déclenché:
var requester = new XMLHttpRequest();
Une fois l'opération de script à distance terminée, le message est mis à jour pour indiquer à l'utilisateur si le numéro de réception était valide ou non:
var requester = new ActiveXObject("Microsoft.XMLHTTP");La mise à jour du message pour indiquer l'achèvement est importante, car elle fournit une fermeture à l'utilisateur. Si le message de chargement a simplement disparu, les utilisateurs ne pouvaient pas être certain qu'il avait réussi.
Dans les deux échantillons de code ci-dessus, la fonction de message est une fonction personnalisée qui crée dynamiquement une étiquette d'état pour un élément de formulaire et positionne visuellement à côté de l'élément connexe. Il accepte également une classe pour l'étiquette d'état, qui permet aux styles CSS d'être appliqués différemment pour les messages de chargement, d'erreur et d'achèvement:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Alors que le processus XMLHttpRequest est en cours d'exécution, l'étiquette anime pour indiquer que l'action est en cours et toujours en vie. Dans l'exemple 2, cela est effectué via le style CSS avec un GIF animé, mais il pourrait également être effectué en utilisant l'animation JavaScript.
La même fonctionnalité est appliquée au bouton de soumission de formulaire. Encore une fois, cela alerte l'utilisateur selon lequel une action est entreprise et leur fait également savoir qu'il a cliqué sur le bouton, ce qui aidera à décourager les utilisateurs d'appuyer plus d'une fois sur le bouton:
Pour y parvenir, modifiez simplement la valeur et la classe CSS du bouton Soumettre:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Astuce # 2: n'interférez pas avec l'interaction de l'utilisateur
Les utilisateurs deviennent frustrés par les interfaces qui interfèrent avec l'achèvement de leur tâche. Dans l'exemple 1, une telle interférence peut se produire après que les utilisateurs ont entré un numéro de réception: s'ils commencent à remplir leurs noms et adresses e-mail avant la vérification du numéro de réception, ces détails seront écrasés une fois que leurs données utilisateur seront reçues du serveur.
Pour rectifier cela, l'exemple 2 vérifie si un utilisateur a modifié les valeurs des champs de texte avant que le script entre les données. Les valeurs par défaut des champs de texte peuvent être détectées lorsque la page se charge et enregistrée à l'aide de propriétés DOM personnalisées:
var requester = new XMLHttpRequest();
La valeur par défaut d'un champ peut ensuite être vérifiée par rapport à son contenu actuel avant que le script ne tente d'écrire des données:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Cela garantit que l'utilisateur - qui connaît probablement son propre nom mieux que nous - n'a aucune entrée écrasée par l'automatisation trop zélée.
Certains autres cas d'interférence courants que vous devriez éviter d'inclure le déplacement du curseur vers un champ pendant que l'utilisateur remplit un autre champ, et le verrouillage de l'utilisateur hors de l'interface (c'est pourquoi XMLHTTPREQUEST doit être utilisé de manière asynchrone).
Astuce n ° 3: Assister aux erreurs tôt, mais pas trop tôt
Il est préférable d'attraper des erreurs dès qu'ils se produisent. De nombreux formulaires qui apparaissent actuellement sur le Web reposent sur l'utilisateur pour soumettre le formulaire avant que les erreurs de formulaire soient affichées, soit en utilisant des scripts côté serveur, soit des alertes JavaScript inélégantes (comme l'exemple 1). Ces méthodes ont plusieurs inconvénients pour l'utilisateur:
Pour ces raisons, il vaut mieux informer les utilisateurs d'une erreur dès qu'ils l'ont fait. Dans l'exemple 2, si les utilisateurs saisissent une adresse e-mail non valide, l'application leur dit immédiatement. La notification est placée juste à côté du champ de messagerie, en utilisant la fonction Message () de l'astuce n ° 1:
Cependant, vous ne devriez pas vérifier la validité dès qu'un utilisateur commence à taper, car il est distrayant - sans parler de ennuyeux - à dire que vous avez fait une erreur avant même d'avoir fini de saisir les données. La vérification du champ ne doit être effectuée qu'une fois qu'un utilisateur a finalisé l'entrée, c'est-à-dire lorsqu'il s'éloigne de l'entrée. Pour les champs de texte, ce type d'action est mieux capturé en utilisant l'événement Onchange:
var requester = new XMLHttpRequest();
La fonction déclenchée par l'événement peut ensuite vérifier le champ et s'assurer que les données qu'il contient est valide pour ce type de données:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Astuce n ° 4: Faites savoir à l'utilisateur quand une erreur a été corrigée
Une fois qu'un champ a été jugé incorrect et que l'utilisateur a été alerté de l'erreur, il est tout aussi important de faire savoir à l'utilisateur quand il l'a changé pour être correct, sinon l'utilisateur sera piégé dans le cycle de soumission de formulaire.
Dans ces circonstances, il n'est pas assez bon d'attendre que l'événement Onchange du navigateur se déclenche, car cela ne se produit généralement que lorsque l'utilisateur défocalise un élément de formulaire. Par conséquent, il est préférable d'utiliser l'événement OnkeyUp pour vérifier l'exactitude d'un champ connu pour être incorrect:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
La fonction onkeyupemail () vérifie si le champ de messagerie a un message d'erreur affiché à côté avant de passer à la suite pour vérifier si le champ est correct. Ainsi, dès qu'un utilisateur apporte des corrections appropriées au champ, le message d'erreur disparaîtra; Cependant, si l'utilisateur tape dans le champ pour la première fois, aucun message n'apparaît:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Ces scénarios ne capturent pas le cas dans lequel les champs obligatoires ont été sautés, c'est donc une bonne idée de permettre à l'utilisateur de soumettre un formulaire incomplet, car cela permet au programme de mettre en évidence exactement ce qui doit être terminé, au lieu de rechercher des détails qui n'ont pas encore été remplis.
Astuce # 5: Fournir une rétroaction de l'interface
La création d'une application Web sans couture peut vous permettre d'explorer de nouvelles fonctionnalités qui n'ont pas déjà été vues dans un navigateur, mais ce faisant, nous devons encore nous souvenir des fondements de la conception d'interface utilisable. L'une de ces bases est la fourniture de commentaires d'interface: faire savoir à l'utilisateur ce qu'il peut faire et ce qu'il a fait.
Dans l'exemple 1, il n'est pas tout à fait clair que les utilisateurs peuvent cliquer sur les vignettes des graphiques ECARD. Ceci est facilement contrecarré si nous donnons un contour gris à l'image sur laquelle le curseur est positionné à tout moment.
La classe Pseudo: Hover Pseudo sera familière à tous ceux qui ont utilisé CSS. Il permet à un objet de changer son apparence lorsque le curseur est déplacé sur cet objet. Bien que les effets de la souris puissent théoriquement être obtenus via CSS seul, les versions actuelles d'Internet Explorer ne permettent pas: les effets de survol sur un élément sauf la balise d'ancrage. Ainsi, pour obtenir un effet de survol sur les éléments de l'image, l'exemple 2 attache les gestionnaires d'événements OnMouseOver et OnMouseout:
requester.open("GET", "/feed.xml");Ces gestionnaires d'événements peuvent ensuite modifier la classe de chaque image et nous permettre de fournir des commentaires visuels en utilisant CSS:
requester.send(null);
La modification du curseur pour indiquer sa «clickabilité» peut également aider à fournir des commentaires à l'utilisateur. Cela peut être fait en utilisant une règle simple dans CSS:
var requester = new XMLHttpRequest();
Après avoir apporté toutes ces modifications à l'exemple 1, l'exemple 2 devient une application beaucoup plus utile et utilisable.
Le thème commun parmi les conseils proposés ici est toujours de rendre l'utilisateur à l'aise et en contrôle. Si les utilisateurs ne possèdent pas les informations dont ils ont besoin pour comprendre ce qui se passe, ils afficheront votre application avec appréhension, et ses performances en souffriront en conséquence.
Bien que cet article se soit concentré principalement sur le processus de script à distance et ses problèmes d'utilisation, il existe également des points d'accessibilité qui devraient être pris en compte lorsque vous créez une application Web transparente. L'exemple 3 est une version beaucoup plus complexe de l'application ECARD, qui utilise des scripts plus puissants et se dégrade de manière accessible pour les utilisateurs sans JavaScript ou sans XMLHTTPRequest. Une fois que vous avez maîtrisé les techniques décrites ci-dessus, vous voudrez peut-être jeter un coup d'œil à cet exemple final et commencer à rendre vos applications vraiment robustes.
AJAX (JavaScript asynchrone et XML) et les scripts distants sont tous deux des techniques utilisées pour créer des applications Web interactives. La principale différence réside dans la façon dont ils gèrent les données. AJAX utilise XML pour envoyer et recevoir des données, tandis que les scripts à distance peuvent utiliser n'importe quel format de données, y compris XML, JSON ou Text brut. AJAX est une implémentation spécifique des scripts distants, qui est un concept plus large.
Les scripts à distance améliorent-ils l'expérience utilisateur en permettant aux pages Web de communiquer avec le serveur en arrière-plan, sans nécessiter de rechargement complet. Il en résulte des applications Web plus rapides, plus lisses et plus réactives, améliorant l'expérience utilisateur globale.
Oui, tandis que JavaScript est le langage le plus utilisé pour les scripts à distance en raison de son support universitaire de navigateur, d'autres langages comme VBScript peuvent également être utilisés. Cependant, le choix du langage dépend des capacités côté client du navigateur de l'utilisateur.
Comme toute technologie Web, les scripts distants peuvent être vulnérables à diverses menaces de sécurité, telles que le script inter-site (XSS) et le forgeron de demande croisée (CSRF). Par conséquent, il est crucial de mettre en œuvre des mesures de sécurité appropriées, comme la validation des entrées et le codage de sortie, pour se protéger contre ces menaces.
Le script à distance gère la transmission des données à l'aide des demandes HTTP. Il envoie une demande au serveur, qui traite la demande et renvoie une réponse. Cette réponse est ensuite traitée par le script côté client pour mettre à jour la page Web sans rechargement complet.
Ajax offre plusieurs avantages par rapport aux scripts à distance traditionnels. Il permet un échange de données asynchrones, ce qui signifie que l'utilisateur peut continuer à interagir avec la page pendant que le serveur traite la demande. AJAX prend également en charge le format de données XML, qui est plus structuré et plus facile à gérer que le texte brut.
Oui, les scripts à distance peuvent être utilisés pour les applications mobiles. Cependant, en raison de la puissance de traitement limitée et de la bande passante réseau des appareils mobiles, il est important d'optimiser les scripts pour les performances et l'efficacité.
Les scripts à distance sont couramment utilisés dans les applications Web qui nécessitent des mises à jour de données en temps réel, telles que les systèmes de chat en direct, les jeux en ligne et les macs interactifs. Il est également utilisé dans les applications qui doivent charger de grandes quantités de données sans rafraîchir la page, comme le défilement infini.
Le code de script à distance de débogage peut être difficile en raison de sa nature asynchrone. Cependant, les navigateurs Web modernes fournissent des outils de développeurs qui peuvent vous aider. Ces outils vous permettent d'inspecter les demandes de réseau, d'afficher les journaux de console et de parcourir le code pour identifier et résoudre les problèmes.
Certaines meilleures pratiques pour implémenter les scripts à distance incluent: l'utilisation d'un format de données bien structuré comme JSON ou XML; gérer les erreurs gracieusement; optimiser les scripts pour les performances; mettre en œuvre des mesures de sécurité appropriées; et tester les scripts dans divers navigateurs pour assurer la compatibilité.
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!
solution de réinitialisation de connexion
MySQL change la méthode du moteur de stockage d'une table
Explication détaillée de la commande nohup
Comment connecter le haut débit au serveur
Quels sont les caractères génériques Oracle ?
fonction système()
Utilisation de la classe de calendrier en Java
Comment ouvrir un fichier au format CSV
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
