Requête Ajax avec code source visible

[poupilou]

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.

 

[rick38]

Une fois que la requête est affichée, il faut faire :

window.history.pushState('', '', '/url.html');

En précisant l'url qu'on invente pour l'occasion.

 

[poupilou]

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 :

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 :

<div id="frame_produits"></div>

Vois-tu quelque chose qui cloche ?

 

[spout]

https://www.webrankinfo.com/forum/t/passer-en-ajax-pour-des-liens-possible.119439/#post-1139992

 

[poupilou]

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 ?

Mettre un listener en JS sur les liens qui appellera la page AJAX.

T'aurais pas un bout de code pour ça ?

 

[spout]

$(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.

 

[poupilou]

Merci spout.

Que faut-il faire de history.pushState/onPopState dans ton exemple ? Ou faut-il placer ce code ?

 

[spout]

Dans le même listener. Je n'ai pas d'exemple sous la main mais il y en a plein dans Google.

 

[poupilou]

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

 

[spout]

https://stackoverflow.com/questions/35141973/using-history-pushstate-on-jquery-ajax