11497 sujets

JavaScript, DOM et API Web HTML5

Remplacer window.location.href en ajax

coucou

Est ce qu'il est possible de rediriger une page, non pas avec window.location.href; c'est à dire rechargement de la page, mais en ajax, sans rechargement de la page.


url = "google.com"; 

// Au lieu de recharger la page avec ça, y a t il une écriture en ajax pour ne pas recharger la page? [sweatdrop]

window.location.href = url;


Merci et bonne journée!!
Bonjour nacyAlex,

Vous pouvez vous diriger vers la fonction jQuery $.load() par exemple.

page-1.html
<div id="page">
  <h1>Page 1</h1>
  <p>Contenu de ma page 1. Contenu de ma page 1. Contenu de ma page 1.</p>
  <button>Appeler Page 2</button>
</div>
jQuery(function($){
  $('button').click(function(){
    var url = 'page-2.html';
    $('#page').load(url + ' #page');
  });
});

page-2.html
<div id="page">
  <h1>Page 2</h1>
  <p>Contenu de ma page 2. Contenu de ma page 2. Contenu de ma page 2.</p>
</div>

Petit détail : mettez votre contenu dans une <div#page /> et non dans le <body /> directement.

Par défaut, $.load() vous retourne toute la page HTML, en conservant les <link /> et <style />, mais sans <head />, sans <body />, sans <script />, et tout ce qui se trouve dans le <head /> et le <body /> est regroupé. C'est une matière difficilement exploitable Smiley murf

Dernier point : vous ne pourrez pas faire un appel vers www.google.fr (ou autre lien en dehors de votre domaine).

Cela vous retournera une erreur de type No Access-Control-Allow-Origin : l'accès par ajax à une page en dehors du domaine de la page d'origine doit être explicitement autorisé dans le header de la page appelée.

Exemple avec la fonction PHP header() :
header('Access-Control-Allow-Origin: *')

Espérant que cette petite solution vous convienne.
Bon code...
Modifié par Guiwint (05 Mar 2014 - 11:40)
Voilà typiquement le genre de truc qui me fait glousser.

Quelqu'un peut-il m'expliquer l'intérêt qu'il y a à vouloir remplacer intégralement le contenu d'une page par une autre en utilisant AJAX et en modifiant l'historique manuellement; bref, en se compliquant la vie pareillement alors que window.location.href fait très bien son travail, en une seule ligne, sans avoir à toucher manuellement à l'historique, et sans avoir à gérer spécialement les scripts/styles/etc. de la page cible ?

ON ne parle même pas de placer un bout de page dans une div, ni même de contenu généré dynamiquement, mais on parle carrément de remplacer la page entière. Franchement, je n'en vois absolument pas l'intérêt à part se compliquer inutilement le travail.

Promis, si on me donne une vraie bonne raison, j'essaie d'arrêter pour un temps.
@QuentinC :

Bon déjà petit 1 : Ta réponse est hors sujet....

Petit 2 : Réponse à ton questionnement...
QuentinC a écrit :
Quelqu'un peut-il m'expliquer l'intérêt qu'il y a à vouloir remplacer intégralement le contenu d'une page par une autre en utilisant AJAX et en modifiant l'historique manuellement;...
Les remplacements dynamiques de contenus en ajax ça ne date pas d'aujourd'hui. Tu as juste de tous petits exemples comme jQuery Mobile, Chocolate Chip UI qui chargent dynamiquement les pages suivantes dans le DOM, puis font de belles transitions avec le nouveau standard qu'on appelle ... CSS3

Au niveau de l'historique, pas besoin d'intervention manuelle avec ces Touch-Optimized Web Frameworks, tout est automatique, au pire sur un dev ad hoc on peut utiliser des libs qui feront office de routeur (équivalent PHP avec Symfony, Zend ou autre). On peut utiliser Backbone JS, ou encore Angular JS... de Google.

Tous ces développeurs de talent ont déjà pensé et créé des solutions à ce genre de trucs qui te font glousser...

Et pour finir sur un dernier point concret, il y a un système qui raffole de tous ces trucs qui te font glousser... un petit PhoneGap, qui appartient juste à Adobe.

Pardon mais je n'ai pas dû trouver l'information : à combien de milliards ton chiffre d'affaire par an culmine, pour être aussi critique sur l'intérêt du JavaScript et influent sur les nouvelles tendances du Web ?

Bon, l'étudiant... Il va falloir aller réviser tes fiches... Smiley langue

Voilàaaa... J'espère que ces petites informations permettront d'éclairer un peu le sujet Smiley murf
Bonne soirée à tous et bon code...
Modifié par Guiwint (05 Mar 2014 - 22:51)
J'ai pas le droit de poser des questions ?

On n'a pas besoin de dépenser un centime pour avoir un point de vue ou donner son avis, en tout cas pas dans nos contrées il me semble. Je crois que ça doit aussi être ça le web: chacun peut avoir son mot à dire, petit ou grand, et rien n'est totalement ininterressant.

Malheureusement, j'essaie de fournir des réponses critiques au lieu de simplement des réponses qui marchent. Apparament ça ne plaît pas à tout le monde.

Merci quand même pour la réponse, et effectivement on s'es bien écarté du sujet de départ. Désolé pour le pourrissage, je ne pensais pas que ça tournerait aussi sec.
Modifié par QuentinC (05 Mar 2014 - 23:18)
Coucou,

Merci pour toutes les réponses et les remarques. Je vais tenter la solution donnée par Guiwint au tout début, avec $.load(). On dirait que ça marche bien avec le test que j'ai fait.

Il suffit juste que je l'intègre dans mon code et le tour est joué, ..enfin!J'espère!

MERCI BEAUCOUP et bonne journée tout le monde Smiley cligne
je dois avouer que j'ai bien aimé votre petit débat sur Les remplacements dynamiques de contenus en ajax, mais une question à échappé au débat, quand est il du référencement de page au contenu modifié dynamiquement ? moi je penses effectivement que cette méthode peux être judicieuse pour une navigation sur mobile mais beaucoup moins si il s'agit de vouloir créer de la visibilité pour un site internet. Car le contenu d'un .load ( par exemple ) pourra très difficilement être référencé par un moteur de recherche
a écrit :
je dois avouer que j'ai bien aimé votre petit débat sur Les remplacements dynamiques de contenus en ajax, mais une question à échappé au débat, quand est il du référencement de page au contenu modifié dynamiquement ? moi je penses effectivement que cette méthode peux être judicieuse pour une navigation sur mobile mais beaucoup moins si il s'agit de vouloir créer de la visibilité pour un site internet. Car le contenu d'un .load ( par exemple ) pourra très difficilement être référencé par un moteur
de recherche

IL semblerait qu'il y a des techniques... mais pour le référencement, rien ne vaudra jamais un site avec des vraies pages sans contenu dynamique auxquelles on peut accéder directement par une URL.
Sujet clos
Aller à