Requête Ajax avec code source visible

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 14 Mars 2020.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    796
    J'aime reçus:
    9
    Salut à tous,

    J'utilise des requêtes Ajax sur mon site pour mon catalogue produits, c'est assez pratique pour l'utilisateur mais l'inconvénient c'est que le code qui résulte d'une requête Ajax n'est pas visible dans le code source, c'est pas top pour les crawlers et le référencement du site.

    J'ai vu sur un site qui utilise des requêtes XMLHttpRequest que le code source de leur catalogue produits même après une requête Ajax, quelle technique utilise-t-il ?

    Merci pour votre éclairage.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 445
    J'aime reçus:
    189
    Une fois que la requête est affichée, il faut faire :
    Code:
    window.history.pushState('', '', '/url.html');
    
    En précisant l'url qu'on invente pour l'occasion.
     
    #2 rick38, 14 Mars 2020
    Dernière édition: 14 Mars 2020
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    796
    J'aime reçus:
    9
    Merci rick38.

    J'ai essayé de placer ton code après ma requête ajax mais ça ne marche pas :(

    J'aimerai une fois ma requête ajax terminée et ma page complètement affichée que l'on puisse voir dans le code source html mes articles dans ce code source.

    J'ai des filtres, et lorsqu'on bouge un slider, mes articles en-dessous se mettent à jour automatiquement via une requête ajax mais lorsque je regarde le code source html qui est produit mes articles n'y sont pas.

    Voici le code de ma requête ajax :
    Code:
    var dataform = "prix_inf="+prix_inf+"&prix_sup="+prix_sup;
    $(document).ajaxStart(function() {
           var loader = "../images/ajax-loader-2.gif";
           $('#frame_produits').html('').html('<br><br><br><br><div style="text-align:center;"><img src="' + loader + '" alt="#"></div>');
    });
    $("#frame_produits").load("../scripts/ajax/ajaxProduits.php", dataform);
    window.history.pushState('', '', '../vente/produits.html');
    });
    
    J'ai placé ton code window.history.pushState juste après ma requête ajax mais ça ne marche pas.

    Mes produits s'affichent dans une div :
    Code:
    <div id="frame_produits"></div>
    Vois-tu quelque chose qui cloche ?
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    796
    J'aime reçus:
    9
    Merci spout.

    Si j'ai bien compris le layout HTML correspond à la page html du site,dans mon cas ce serait donc la page html de mon catalogue produits, mais comment faire pour mettre à jour la layout HTML en fonction de mes produits qui seront ajoutés (ou vendus) chaque jour ?

    T'aurais pas un bout de code pour ça ?
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 987
    J'aime reçus:
    281
    Code:
    $(function () {
        $(document).on('click', 'a.ajax', function (e) {
            e.preventDefault()
            $('#content').load($(this).attr('href'))
        })
    })
    + history.pushState/onPopState + ...

    Démo que j'avais fait à l'époque : https://spout.be/tmp/ajax-example/
    Même sans JS ça marche.
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    796
    J'aime reçus:
    9
    Merci spout.

    Que faut-il faire de history.pushState/onPopState dans ton exemple ? Ou faut-il placer ce code ?
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 987
    J'aime reçus:
    281
    Dans le même listener. Je n'ai pas d'exemple sous la main mais il y en a plein dans Google.
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    796
    J'aime reçus:
    9
    Est-il possible d'inclure history.pushState/onPopState dans ton exemple ?

    Si oui, quel serait le code exact à insérer et ou le placer dans le code de ton exemple ?

    J'ai du mal à voir comment fonctionne history.pushState et comment l'utiliser :(
     
Chargement...
Similar Threads - Requête Ajax code Forum Date
Requête AJAX et l'autocomplétion Développement d'un site Web ou d'une appli mobile 24 Juillet 2014
API Ajax Google : limite des requêtes Google : l'entreprise, les sites web, les services 19 Mars 2010
Comment se placer sur des requêtes inhabituelles dû au confinement Rédaction web et référencement 25 Mars 2020
Déclassement sur requêtes et pays spécifiques? Crawl et indexation Google, sitemaps 11 Janvier 2020
Résultats étranges pour la requête site: Problèmes de référencement spécifiques à vos sites 26 Août 2019
Qwant 20 milliards de requetes en 2018? 2 x plus que Google? Autres moteurs de recherche connus 2 Avril 2019
[Cas d'école] Requête clé instable depuis plus de 8 ans Référencement Google 11 Mars 2019
Résultat de recherche google sans méta-description en fonction de la requête Problèmes de référencement spécifiques à vos sites 8 Février 2019
marqueurs nommés vs marqueurs interrogatifs requête préparée Développement d'un site Web ou d'une appli mobile 16 Janvier 2019
Marqueur nommé ou interrogatif pour les requetes préparées ? Développement d'un site Web ou d'une appli mobile 30 Décembre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice