IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Rafraîchissement automatique de données sans recharge de la page


Sujet :

AJAX

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    749
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 749
    Par défaut Rafraîchissement automatique de données sans recharge de la page
    Bonjour

    Je voudrais rafraichir automatiquement l’affichage de données dynamiques au fur et à mesure qu’elles changent sans avoir à recharger la page d’un site. Comment fait-on ça ?

    C’est pour afficher les informations de ce qui est diffusé sur une radio web : Titre, Artiste, Jaquette du CD…

    Comme source j’ai une URL qui renvoie des données json comme celles-ci :
    {"artist":"The National","title":"Nobody Else Will Be There","album":"Sleep Well Beast","cover":"https:\/\/d1taocs3kfk7z6.cloudfront.net\/track\/cover\/7f25eebb-984c-4dc0-9d88-a15356113401","buy_link":"https:\/\/itunes.apple.com\/us\/album\/nobody-else-will-be-there\/1233837225?i=1233837649","started_at":"2018-05-28T03:43:06+0000","end_at":"2018-05-28T03:47:40+0000","duration":262.6}
    Elles sont exploitables, d'autant plus que je sais ici quand je dois relancer le script pour récupérer les données suivantes : "end_at":"2018-05-28T03:47:40+0000"

    Ça c’est pour le côté récupération de données…

    Mais je ne sais pas comment rendre l'affichage dynamique sans reload de la page...

    Comment faire ça ?

    Merci pour vos informations
    PAul

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 665
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 665
    Par défaut
    vous pouvez faire cela avec AJAX par exemple, regardez les articles suivants :
    https://ajax.developpez.com/cours/

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    749
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 749
    Par défaut
    Merci.
    Je vais peut-être enfin comprendre ce qui est derrière ce nom "AJAX"



    Là il faudrait :
    - Mettre à jour régulière du json
    On le rafraîchirait à chaque début d'un nouveau morceau,
    grâce à la variable "end_at":"2018-05-28T03:47:40+0000")
    et à un script php avec set_time_limit (?)
    - Et puis pour la mise à jour dynamique de la page on utiliserait une requête XMLHttpRequest : xmlhttp.onreadystatechange


    C'est bien ça ?



    A moins qu'on puisse utiliser directement une autre requête xmlhttp (?) qui interrogerait l'URL qui produit le json (sans l'écrire). Récupérer les variables et puis les "pusher" en AJAX ?

  4. #4
    Modératrice
    Avatar de Celira
    Femme Profil pro
    Développeuse PHP/Java
    Inscrit en
    Avril 2007
    Messages
    8 633
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 40
    Localisation : France

    Informations professionnelles :
    Activité : Développeuse PHP/Java
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2007
    Messages : 8 633
    Par défaut
    Littéralement AJAX ça veut dire "Javascript et XML asynchrones" (une fois traduit en français). Grosso modo, ça signifie qu'on utilise Javascript pour demande des informations au serveur, qu'on traitera quand on obtiendra la réponse (contrairement à un chargement de page classique où on attend d'avoir la réponse pour faire quoi que ce soit)

    Donc ce que tu dois faire, c'est un script JS qui appel régulièrement l'url qui te donne ces informations et qui modifie l'affichage une fois les informations récupérées.

    Bref, on va laisser faire nos amis du forum JS
    Modératrice PHP
    Aucun navigateur ne propose d'extension boule-de-cristal : postez votre code et vos messages d'erreurs. (Rappel : "ça ne marche pas" n'est pas un message d'erreur)
    Cherchez un peu avant poser votre question : Cours et Tutoriels PHP - FAQ PHP - PDO une soupe et au lit !.

    Affichez votre code en couleurs : [CODE=php][/CODE] (bouton # de l'éditeur) et [C=php][/C]

  5. #5
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Par défaut
    Bonjour,
    Pour que la requête ajax() soit lancée selon de facon réguliere sans toucher a quoi que ce soit, il faut utiliser la function Settimeout()

Discussions similaires

  1. Rafraîchissement Automatique des données
    Par Tofidou dans le forum QlikView
    Réponses: 3
    Dernier message: 14/05/2013, 08h51
  2. Popup, récupération données sans recharger la page
    Par Devilju69 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/10/2010, 15h22
  3. [MySQL] Insertion dans une base de donnée sans recharger la page?
    Par nadia lydia dans le forum PHP & Base de données
    Réponses: 11
    Dernier message: 02/10/2009, 17h43
  4. Formulaire + Popup et transmission de données sans rechargement
    Par softmen dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 09/12/2006, 13h56
  5. Rafraîchissement de l'image sans rafraîchir toute la page?
    Par Ravarin dans le forum Général JavaScript
    Réponses: 26
    Dernier message: 08/03/2006, 15h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo