Widgets Web. Nous écrivons un widget intégré en utilisant javascript et php natifs. Allumez au bon moment

De nombreux propriétaires y installent divers informateurs ou widgets tiers pour améliorer leur site Web. Un informateur est un « informateur » conçu pour transmettre des informations supplémentaires au visiteur.

En règle générale, tous les CMS vous permettent de placer des informateurs sur votre site Internet.

Les informateurs sont de petits boutons ou blocs mettant à jour automatiquement le code dont vous installez sur votre site Web. Les capacités graphiques de l'informateur vous permettent de le personnaliser en fonction du style de votre ressource.

En règle générale, les informateurs sont fournis gratuitement en échange de l'installation d'un lien de retour. Le lien fait partie de l'informateur.

Les informateurs remplissent deux fonctions principales sur le site. Premièrement, ils permettent de diversifier le contenu textuel du site, il devient plus dynamique et pratique. La deuxième fonction est que sur de nombreux sites, les informations sont très rarement mises à jour et les widgets se mettront automatiquement à jour, fournissant au visiteur du site des informations fraîches et utiles susceptibles de l'intéresser.
Pour installer l'informateur sur une ressource Web, vous devez le sélectionner à partir d'une source fiable, le configurer en fonction de vos besoins et de la conception du site, enregistrer le code html proposé et le coller dans la page du site.

Règles d'installation de l'informateur :

Il est souhaitable que l'informateur coïncide avec le thème du site et le complète, plutôt que de « l'interrompre ». Par exemple, si vous vendez des produits importés, il conviendrait de placer un indicateur « taux de change », et si vous êtes un centre touristique ou un hôtel, alors un indicateur météo sur le site ne ferait pas de mal.

Ne faites confiance qu'à des sources d'informateurs fiables, car les informateurs provenant de sources non vérifiées peuvent contenir des virus.

Ne surchargez pas votre site avec des informateurs - vous risquez de détourner l'attention des visiteurs et de les distraire des informations principales. Une surabondance d’informateurs peut ralentir le chargement du contenu principal.

Types d'informateurs :

Les thèmes des widgets sont très divers : compteur de visiteurs du site, date et heure, consultant en ligne, embouteillages, fils d'actualité, guides des programmes, widget taux de change, météo, etc. Lorsque vous choisissez un widget d'information pour votre ressource web, n'oubliez pas qu'il , peut affecter la popularité de votre site auprès de certains visiteurs qui seront intéressés par ces informations.

Informateurs et widgets de taux de change

L'indicateur de taux de change sera utile aux entreprises dont les prix des services ou des biens sont liés au taux de change. Ces widgets peuvent fournir des informations sur les cotations boursières et les fluctuations de prix. Des informateurs sur les devises peuvent être obtenus auprès d'investing.com, d'ExDex ou de forex-informateurs.

Informateurs et widgets météo

L'indicateur météo devrait être placé sur le site Internet par les entreprises qui fournissent des services de tourisme, de pêche, de chasse et d'hébergement, comme les campings, les maisons d'hôtes et les hôtels. Peut-être que ces informateurs conviendront également aux magasins vendant des articles saisonniers, comme des équipements pour les sports d'hiver. Vous pouvez utiliser les services Gismeteo ou Yandex.Weather. Gismeteo. Ils sont détaillés et courts. Ils fournissent des informations sur la météo actuelle et des prévisions sur plusieurs jours.

Informateurs et widgets d'actualités

L'informateur d'actualités du site sera utile pour les sites thématiques, même si vous ne devez publier que des fils d'actualité sur des sujets identiques ou similaires à ceux de votre site. Presque tous les widgets d'actualités permettent de publier des actualités de certaines catégories : politique, finance, culture, sport, etc. Vous pouvez facilement trouver un informateur d’actualité adapté au thème de votre site. Par exemple, Yandex.News ou New2world.

Informateur Yandex.Horaires

Informateurs et widgets de calendrier

L'informateur de calendrier du site sera pratique pour les visiteurs du site s'ils ont besoin de voir certaines dates, par exemple le début d'une visite, d'une excursion ou le début/fin de l'acceptation de documents. Très pratique service de calendrier suggère Google. ils décrivent les instructions pour placer un informateur de calendrier sur le site. Il existe également les services suivants : chasikov.net.ru, calendrier.yuretz.ru.

Indicateurs de présence

Les compteurs de trafic ont également des informateurs, ils reflètent les données sur le trafic du site, ils sont généralement situés dans les colonnes latérales du site ou dans le pied de page.

Le plus souvent, ils sont installés pour les annonceurs potentiels afin qu'ils puissent voir des informations sur le nombre de visiteurs du site et les pages vues. Les widgets d'indicateurs TIC et PR sont également courants, qui informent sur la popularité et la citation d'une ressource. Il faut comprendre qu’en ouvrant ces données à tout le monde, vos concurrents les verront également.

Informateurs et widgets pour les réseaux sociaux

Les widgets pour groupes sociaux et communautés informent les visiteurs du site que vous avez une communauté et que vous communiquez avec les visiteurs au sein des réseaux sociaux ; cela peut également être utile pour les entreprises, car si un visiteur voit ses amis parmi les membres du groupe, sa confiance dans votre site et dans le l'entreprise s'améliorera et il sera plus disposé à devenir votre client.

Un widget est un petit utilitaire qui remplit une fonction spécifique.

Les widgets modernes peuvent fournir n'importe quelle information, compléter le bureau et fournir des messages. Pour comprendre ce qu'est un widget, pensez au signal qui indique que vous avez reçu une autre lettre. Il s’agit de l’exemple le plus courant de widget.

Voyons ce que sont les widgets et comment les utiliser. D'un point de vue formel, un widget est une petite application conçue pour la mise en œuvre d'une tâche utile. Il n'est pas tout à fait facile de comprendre ce que signifie le mot « widget », car pendant longtemps, divers gadgets ont été appelés ainsi, mais plus. Au cours des 20 dernières années, des applications spéciales sont apparues, écrites en HTML ou en JavaScript et remplissant une fonction spécifique.

Le widget peut afficher la météo sur l'écran d'accueil d'un téléphone mobile ou une grande horloge sur un ordinateur. Mais on entend souvent une autre description, plus généralisée. Il s'agit d'une icône (symbole graphique ou textuel) qui lance le programme lui-même.

Aujourd'hui, la plupart des widgets sont utilisés sur le système d'exploitation Android, les réseaux sociaux et presque tous les navigateurs Opera, Yandex, Chrome, etc.

Classification

Par apparence

Les widgets sont classés par apparence, fonctionnalité et emplacement d'installation. En fonction de leur apparence, on distingue les types de programmes suivants :

1. Toppers situés en haut de l’écran et ressemblent à une bande avec un champ et un bouton. Ils remplissent une fonction informative, informant sur les promotions et les remises, et peuvent également être utilisés pour collecter des contacts.
2. La fleur remplit les mêmes fonctions que la décoration, mais est située en bas de l'écran.
3. Fenêtres pop-up qui chevauchent une page de site Web. Ils sont utilisés pour des messages concernant divers types de promotions ou pour des offres permettant de laisser des informations de contact.
4. Les raccourcis sont situés sur le côté de l'écran et sont utilisés pour recevoir les commentaires des visiteurs du site.
5. Widgets intégrables.

Tous les widgets peuvent également être divisés en groupes pour le bureau (widgets de bureau) et . Les développeurs peuvent placer une variété de programmes visuels et textuels sur les pages du site Web. L'utilisateur ne peut interagir qu'avec eux.

Selon le lieu d'installation

Widgets Web

Ce type de widget est intégré à un site Web. Pour comprendre ce qu'est un widget sur un site Web, il faut tenir compte du fait que les programmeurs ont divisé ce type d'application en :

• interactifs – ceux avec lesquels vous pouvez interagir ;
• non interactif, fonctionnant de manière autonome, quels que soient les souhaits du consommateur.

Un nom plus précis pour le deuxième type est informateur. Un exemple classique consiste à afficher des prévisions météorologiques ou à afficher les changements de taux de change.

Des exemples de widgets interactifs incluent les widgets de réseaux sociaux et les widgets de messages. Les widgets de réseaux sociaux sont des boutons familiers avec les logos Facebook,

Aujourd'hui, un autre service avec des widgets pour le site est sous la loupe. Pourquoi un autre ? – Ils sont même trop nombreux, il y a à eux seuls une cinquantaine de rappels. Mais nous ne regardons pas tout. Si le sujet du test s'est retrouvé sur ce blog, alors il contient quelque chose d'intéressant.

Donc, aujourd'hui, c'est un service avec des widgets MoClients. Au moment de la rédaction, il contient 6 outils hautement personnalisables. Ces gars-là se positionnent comme des widgets gratuits pour le site, mais ce n'est qu'en partie vrai. Vous ne pouvez recevoir gratuitement que 10 candidatures par mois à partir du widget. Cependant, cela suffit pour tester. +B A la fin, vous trouverez un code promotionnel pour un montant supplémentaire pour les tests.

Revue vidéo des widgets MoClients :

Liste des widgets

Sur la page principale du site, sur le côté droit, on voit immédiatement un bloc de widgets (on peut jouer et cliquer sur ses différentes parties). Le deuxième écran décrit chacun d’eux en détail.

• Calculateur en ligne. Ce widget fait l'objet d'une attention particulière dans l'article. Nous examinerons ensuite un exemple d'édition et des cas d'utilisation.
  Une calculatrice ordinaire, lorsque vous entrez des chiffres (par exemple, lors du calcul d'un prêt) et par conséquent un chiffre sec est donné. Cela peut paraître trop gros et le client partira. Si de tels calculateurs vous intéressent, vous pouvez consulter un aperçu de tous les services ici. MoClients a un modèle différent. Vous remplissez le formulaire du calculateur étape par étape, et à la fin il vous est demandé de saisir un email ou un numéro de téléphone par lequel le responsable vous contactera. Il s'agit d'un mur de contact : vous avez passé du temps à remplir les paramètres et souhaitez obtenir le résultat. Le taux de conversion des formulaires remplis à partir du calculateur est beaucoup plus élevé que celui des autres formulaires de candidature standard. Le gestionnaire contacte le client, complète le prix avec des objets de valeur et traite les objections. Les chiffres des coûts prennent alors une signification différente et pleine.
• Bon de commande. Un formulaire simple qui collecte les coordonnées des personnes et vous les envoie.
• Lien vers la page souhaitée. Dans ce widget, vous pouvez mettre un lien vers une page importante.
• Fenêtre contextuelle de promotion. Lorsque vous quittez le site ou après un certain temps (les paramètres sont configurés dans le panneau d'administration), une fenêtre apparaît, vous saisissez votre email et bénéficiez d'une réduction.
• Catalogue de photographies de produits. Widget pour publier un portfolio, un catalogue de produits, etc. avec la possibilité de laisser une demande.
• Abonnez-vous à la newsletter. Un widget standard qui vous permet de collecter une base de données de courrier électronique pour d'autres mailings.

Exemple de fonctionnement de la calculatrice

Le vrai jus est la calculatrice. Voyons comment cela fonctionne en utilisant l'exemple de ce site :

Sur la droite, vous verrez un bloc avec deux éléments :

Panneau d'administration MoClients :

Sur la page principale du panneau d'administration, nous voyons immédiatement un exemple de liste de widgets pour le site. Par défaut, tous les widgets sont activés.

C'est ici qu'un nouveau widget est créé.

Ajout d'un widget

Après avoir cliqué sur le bouton « Ajouter un widget », nous sommes redirigés vers une page permettant de sélectionner le type de widget que nous souhaitons installer. Pendant que nous écrivions l'article, nous avons ajouté un septième widget de VKontakte.

Même la description indique que ce widget est uniquement imite calculatrice. Et cela peut être bien plus efficace que de véritables calculs complexes en ligne.

La configuration est très simple. Vous devez écrire le titre du widget, sélectionner une icône, le texte de la question à laquelle vous pouvez ajouter une image et le texte de la demande de coordonnées.

Il y a une info-bulle graphique à la fin montrant comment les données complétées seront affichées.

Nous enregistrons les paramètres, et maintenant une calculatrice sera ajoutée à la barre latérale du site connecté.

Installation de MoClients sur le site

Pour que tous les widgets ajoutés apparaissent et fonctionnent sur le site, vous devez installer le code. Cela peut être fait tout en bas de l'onglet de menu « Widgets » ou dans l'onglet « Installation sur site ». Il existe trois options d'installation :

• Commandez une installation gratuite
• Envoyer les instructions par email
• Installez vous-même

L’installer vous-même avec une seule ligne de code est très simple. Ajoutez-le simplement avant la balise body de fermeture sur toutes les pages de votre site.

Dans les paramètres du site, vous pouvez ajouter un e-mail pour les notifications, un numéro de téléphone pour les SMS, etc. Vous serez invité à ajouter un site lors de votre inscription au service.

Plus d'exemples

Dans le panneau d'administration, vous pouvez voir un exemple d'utilisation de widgets en cliquant sur la barre latérale à droite. En guise de calculatrice, voici comment calculer le coût d’un prêt hypothécaire en quatre étapes. Vous pouvez sélectionner plusieurs options de réponse. Après avoir rempli, vous êtes invité à saisir un numéro de téléphone pour recevoir les résultats du calcul.

Formulaire de contact sous forme de widget « Posez-nous une question ».

Il existe une version de base gratuite, mais nous n'en tenons pas compte, elle est limitée à 10 applications par mois. Vous pouvez tester pendant les deux premières semaines et au tarif plein, tout en recevant des notifications illimitées sur les nouvelles applications aussi bien par e-mail que par SMS, et sans vous soucier des restrictions sur le nombre d'applications.

Code promo Moclients

Lorsque vous vous inscrivez en utilisant ce code promotionnel, vous disposerez de 800 roubles sur votre compte pour les tests. Valable jusqu'au 13 novembre !

Mon avis sur Moclients

La calculatrice est une chose très cool, je l'ai installée sur plusieurs de mes sites. Une autre situation dans laquelle vous avez absolument besoin de ce service est un très vieux site Web. Si c'est ce que vous avez, installez un ensemble complet de widgets, avec un portfolio, un formulaire de candidature, etc. Cet ensemble est un site Web séparé presque complet qui attirera l'attention des visiteurs et les convertira en applications.

Parfois, vous avez besoin d'évaluer et de connaître l'attitude des visiteurs de votre site Web à l'égard d'un sujet spécifique, de connaître l'opinion générale des lecteurs ou vous avez simplement besoin de conseils sur quelque chose. Tout cela peut être découvert grâce à une enquête que vous pouvez facilement placer sur votre page. Les enquêtes sont utilisées non seulement comme source de données sur les opinions des visiteurs, elles jouent également un rôle important dans l'augmentation du niveau d'interaction, ce qui a un effet positif sur les lecteurs en leur permettant d'exprimer leurs opinions.

Vous pouvez facilement placer une enquête sur une page avec un peu de connaissances en programmation et en utilisant les services disponibles qui vous permettent aujourd'hui de développer des enquêtes dans le style souhaité qui correspond à l'apparence générale de votre site. Dans cet article, nous avons rassemblé 10 services en ligne qui vous aideront à créer et à intégrer des enquêtes gratuites dans votre site Web ou votre blog.

En utilisant Code de sondage Vous pouvez créer vos propres enquêtes sans même vous inscrire, mais si vous avez besoin de certaines fonctionnalités spéciales de l'enquête, le processus d'inscription ne prendra pas plus de quelques secondes. Le service vous permet de modifier l'apparence (vous pouvez choisir la police, les couleurs et le design souhaités) afin qu'elle corresponde au modèle de votre site Web.
L'utilisation du service est entièrement gratuite, mais la condition d'utilisation est que des publicités soient affichées dans les résultats de votre enquête (visibles uniquement après qu'une personne ait voté ou consulté les résultats de l'enquête). Il n'y aura pas une seule annonce publiée sur le site Web lui-même, juste un lien vers Pollcode.com.

Profs Professionnels présente la possibilité de créer des questionnaires simples. La version gratuite vous permet de créer un nombre illimité d'enquêtes, mais au bout de 7 jours, des publicités y apparaîtront. Grâce à ce service, vous pouvez facilement créer et modifier des enquêtes, ainsi que les remplir de fonctions uniques. Ces fonctionnalités vous aideront à éviter la fraude aux évaluations (la vérification peut même être effectuée en fonction de la localisation géographique de chaque électeur), et vous aurez également la possibilité de publier des images ou des fichiers vidéo et d'intégrer l'enquête avec MySpace, Facebook et d'autres réseaux sociaux. réseaux.

Sondage instantané offre la possibilité de créer facilement et rapidement des enquêtes. Vous ne consacrerez pas plus de quelques minutes à l'installation. Vous avez la possibilité de modifier la couleur, la mise en page et l'apparence de l'enquête pour qu'elle corresponde au modèle de votre site Web. Vous n'êtes pas obligé de vous inscrire ni de verser une contribution financière - l'application est absolument gratuite. Le seul aspect de cet accord bidirectionnel est que vous ne tenterez pas d’éviter l’affichage de publicités.

Service gratuit (backlink requis) Modpol a déjà été utilisé pour créer des questionnaires sur des sites tels que marieclaire.com, facebook.com, huffingtonpost.com, ning.com et blogger.com. Vous pouvez créer autant d’enquêtes que nécessaire, puis les ajouter à votre blog ou aux pages de votre propre site Web. Il est également possible de publier une enquête sur les réseaux sociaux populaires tels que Twitter, Facebook, MySpace, FriendFeed, Digg, Gmail, AOL Mail, Yahoo Mail, Hotmail, Blogger, Tumblr, TypePad, LiveJournal, AIM, Yahoo Messenger et bien d'autres.

Micro-sondage offre l'opportunité la plus simple de créer des enquêtes en ligne. Grâce aux outils ultra-simples de cette application, vous pouvez facilement concevoir votre enquête exactement comme vous le souhaitez. Il est possible de créer une enquête avec des boutons radio, des cases à cocher ou des menus déroulants, et il existe également une vaste sélection de thèmes de conception prédéfinis.

En utilisant Vizu, les utilisateurs peuvent créer des enquêtes en quelques minutes seulement. L'outil vous permet de surveiller l'état actuel de l'enquête, de recevoir des notifications par e-mail et les utilisateurs peuvent laisser des commentaires directement sur l'enquête.
Le service est absolument gratuit, mais tout ce que vous avez à faire est de publier un lien vers Vizu.

BlogSondages permet aux utilisateurs de concevoir des enquêtes qui correspondent à l’apparence de leur site Web. Le service est gratuit, mais vous devez publier un lien vers BlogPolls.

Formulaire de questions est un puissant outil de création d'enquêtes doté d'une interface de type ordinateur de bureau. Vous pouvez simplement glisser et déposer des questions pour les créer ou les modifier. Le service propose également de nombreuses fonctionnalités différentes, telles que : le suivi des réponses répétées via des cookies, des alertes en temps réel, l'exportation de données vers Microsoft Excel, XML ou tout autre type de document (CSV ou TSV).
QuestionForm est payant, mais vous avez la possibilité de créer deux enquêtes gratuites.

09.
SondagePapa– c’est probablement le service de création d’enquêtes le plus puissant et le plus professionnel présenté dans notre sélection. Un service de création d'enquêtes en ligne collecte toutes vos informations et les transforme en un système de reporting complet, vous permettant de créer une enquête plus réfléchie. Vous pouvez également utiliser vos propres modèles de conception et CSS, changer de langue, exporter des données au format XML, CSV et recevoir les résultats par e-mail ou RSS. Vous avez le choix entre 11 types de questions.
PollDaddy est également un service payant avec des options gratuites, notamment la possibilité de créer des sondages avec 10 options de réponse, 100 votes par sondage et un lien vers PollDaddy.

21 mai , 2016

Chaque fois que je connecte une solution prête à l'emploi de services comme disqus ou Google Analytics à mes sites Web, je suis étonné par la facilité d'intégration de fonctionnalités assez complexes. J'ai mis 3 lignes de code javascript dans le code - et vous avez déjà un bloc avec des commentaires. 2 lignes supplémentaires - et des analyses de Google ou Yandex sont disponibles. Bien sûr, aucune magie ne se produit ; ces mêmes 3 lignes de code extraient tout le code nécessaire du serveur distant et déploient essentiellement une petite application Web sur les pages de votre site. Mais comment cela fonctionne-t-il à l’intérieur et comment pouvez-vous le faire vous-même ? C'était assez intéressant de comprendre cela, et à la fin, j'ai obtenu un petit widget qui fonctionne exactement selon ce schéma d'intégration simple et fait en même temps des choses utiles. Plus de détails.

Pourquoi avons-nous besoin de widgets ?

Les iframes sont bien adaptés à cet effet.

Il s'agit en fait de pages HTML distinctes qui sont intégrées dans d'autres pages sans avoir accès à leur « parent ».

Autrement dit, nous pouvons intégrer notre application Web dans une iframe, qui fera tranquillement son travail sans interférer avec le site principal.

Nous allons créer un widget qui dessine une forme avec les prévisions météo pour demain.

Prenons comme exemple uniquement la température, mais comme vous le verrez plus loin, il sera facile d'ajouter d'autres données.

Le widget contiendra des informations sur la température de demain, une liste déroulante avec la possibilité de sélectionner une ville.

Le bouton Mettre à jour enverra une requête au serveur, qui contactera à son tour un service tiers pour déterminer la météo et nous renverra les informations nécessaires. Nous traitons ces données et les renvoyons au navigateur du client.

Où la partie client du widget intercepte les informations et les affiche à l'utilisateur.

Ici, nous voyons une page où il est dit que nous sommes censés savoir comment déterminer la météo.

Et nous montrons à nos visiteurs un formulaire afin qu'ils puissent être convaincus que la météo peut vraiment être consultée ici même.

Je ne me suis pas amusé avec la mise en page du formulaire, ce n'est pas le but de l'article.

Dans le monde réel, bien sûr, nous créerions une forme mignonne qui attirerait l’attention.

Alors revenons en arrière. Les gens consultent la météo, peut-être même sans se rendre compte qu’ils utilisent en réalité un autre service.

Dans la section corps comme ceci :

Qu'est-ce qui est intéressant ici ? Nous stockerons les styles de la page (pas du widget !) dans le fichier css/style.css.

Et au bon endroit, nous créons un iframe..html.

Nous supprimons sa bordure et la possibilité de faire défiler et de définir manuellement les dimensions du widget.

Bien sûr, il est plus intéressant d’en créer un adaptatif, mais nous y reviendrons plus tard.

Styles pour la page, sans fioritures particulières :

Corps ( famille de polices : Arial ; taille de police : 14px ; ) .wrapper ( largeur : 960px ; marge : 0 auto ; ) .weather-widget-container ( marge : 30px 0; )

Vide pour le widget

Le widget est un document HTML classique.

Quelle est la différence ? Premièrement, nous ne nous embêterons pas avec des balises méta inutiles, car les moteurs de recherche n’ont pas besoin de notre widget.

Et deuxièmement, nous écrirons les styles et le code js directement dans le code de la page html. Nous en avons besoin pour que le widget se charge le plus rapidement possible, et réduire le nombre de requêtes adressées au serveur Web nous y aidera.

Nous téléchargerons tout ce dont vous avez besoin dans un seul fichier.

Dans la section head, nous aurons le code suivant :

Dans la partie corps :

Examinons ces blocs plus en détail.

Balisage des widgets

Température pour demain °C

Var WeatherWidget = (function() ( // Pour effectuer des requêtes ajax var XHR = ("onload" dans le nouveau XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Fonction du constructeur de widget Widget() ( this..php"; this. ui = ( updateBtn: null, citySelect: null, temperatureSpan: null ); this.init(); // Mettre à jour les données météo Widget.prototype._updateData = function(e) ( // Envoyer une requête ajax au serveur ) / / Initialisation composants de l'interface utilisateur Widget.prototype._initUI = function() ( this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city" ); this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); // Lier les événements Widget.prototype._bindHandlers = function() ( this.ui.updateBtn.addEventListener("click", Widget. prototype._updateData .bind(this)); ) // Initialise le widget Widget.prototype.init = function() ( this._initUI(); this._bindHandlers(); this._updateData(); ) // Renvoie la classe du widget return Widget ;

))();

nouveau WeatherWidget();

Que se passe-t-il ici ?

Nous créons un module basé sur la fermeture WeatherWidget, à l'intérieur nous écrivons la classe Widget, dans le prototype de laquelle nous ajoutons les méthodes nécessaires et la renvoyons de la fermeture.

// Mettre à jour les données météo Widget.prototype._updateData = function(e) ( e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan , data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); .send(data); xhr.onreadystatechange = function() ( if (this.readyState != 4) return; if (this.status != 200) ( console.log("Erreur de demande"); return; ) resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature)

Veuillez noter que nous transmettons la propriété e (event) aux paramètres de la méthode.
Il est nécessaire de faire PreventDefault au tout début, afin de ne pas recharger notre widget (sinon la soumission du formulaire fonctionnera).
Mais nous le faisons avec cette ligne
e && e.preventDefault();

Cette vérification supplémentaire de la présence du paramètre e est nécessaire car lorsque nous appellerons this._updateData(), le paramètre e sera indéfini et, par conséquent, e.preventDefault() lèvera une exception.

Après cela, nous créons les variables nécessaires, un objet pour la requête Ajax, la ville sélectionnée et un élément DOM dans lequel nous affichons la valeur de température reçue du serveur.

les données seront envoyées dans une requête ajax, resp est la réponse du serveur.

Ensuite, nous ouvrons la connexion et envoyons les données au serveur.

Il est déjà clair comment récupérer les données, l'algorithme est simple : nous extrayons le paramètre city de $_POST - la ville sélectionnée, et créons une chaîne comme http://xml.meteoservice.ru/export/gismeteo/point/$ cityId.xml.

C'est le chemin d'accès au fichier météo. Nous lui envoyons une requête get en utilisant curl.

Nous analysons la réponse reçue et en extrayons les paramètres nécessaires : températures minimales et maximales.
Nous renvoyons les nombres résultants dans un objet json au navigateur.
$cityId = (int)$_POST["ville"];

$url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml";

$température = "";

if ($curl = curl_init()) ( curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string ($result); $object = $xml->TOWN->PREVISION->TEMPERATURE; $temperature = $object["min"] $object["max"]; "température" => $température));