Comment afficher les requêtes Ajax dans l'URL?

Question

Ce que je veux, c'est avoir des liens qui changent une partie de la page , et une URL dynamique, où je peux spécifier des variables telles que #calendar=10_2010tabview=tab2

Check this for an exact example: CLIQUEZ ICI POUR CONNAÎTRE LES DÉMO

Voici donc le lien de format ce dont j'ai besoin:

#calendar=10_2010&tabview=tab2

J'ai besoin d'avoir des variables dans les liens comme calendar et tabview je peux donc changer plusieurs choses sur une seule page sans realoading.

---

Ou d'un autre format, comme sur http://www.wbhomes.com.au , c'est exactement ce que je veux, cependant, le premier format est bon aussi, mais c'est beaucoup plus beau.

• http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

---

Exigences

• Doit être accessible à partir de n'importe où à partir de l'exemple d'un mail, ou si j'ai juste écrire dans la barre d'url.

• Le lien doit être dans l'histoire, donc si Si j'appuie sur le bouton précédent ou suivant, la page doit être accessible.

• Actualisation de la Page a besoin de travailler trop.

---

Quelques ressources:

Exemples:

• www.developer.yahoo.com/

• www.facebook.com - la barre latérale des liens sur votre page de profil

• www.wbhomes.com.au/ - 100% proche de ce que je veux

• www.flickr.com/

• www.youtube.com

Quelques Tutoriels:

• www.ajaxpatterns.org/

• www.contentwithstyle.co.uk/

---

S'il vous plaît aidez-moi! Je n'ai jamais trouvé de solution pour faire cela, mais je ne veux pas utiliser jquery ou une API, ou de n'importe quelle bibliothèque, je veux avoir un travail Javascript/AJAX et PHP script.

Answer 1

Pour la démo, liés à votre question, la réalisation de cette fonctionnalité est vraiment très simple car elle ne permet pas l'utilisation d'AJAX à tous (quand vous commencez à ajouter de l'AJAX pour le mix, c'est plus difficile, a expliqué plus tard). Pour obtenir cette fonctionnalité; la mise à niveau de vos liens à l'utilisation de tables de hachage, puis se lient dans l'hashchange événement. Malheureusement, le hashchange événement n'est pas compatible avec tous les navigateurs, mais heureusement, il y a beaucoup de "l'histoire à distance/plugins" disponible - notre préféré au fil des ans s'est avéré être jQuery Histoire, c'est open-source, a obtenu un grand soutien et est activement développé :-).

Bien que, quand il s'agit de l'ajout de la fonctionnalité AJAX pour le mélange comme pour les sites tels que Facebook, WBHomes et Balupton.com ensuite, vous allez commencer à faire face à toute une série de sérieux problèmes difficiles! (Je sais que j'ai été l'architecte en chef pour les deux derniers sites!). Certains de ces problèmes sont les suivants:

• Comment gracieusement et facilement mise à niveau de certains liens internes à l'utilisation de l'Histoire et de la fonctionnalité AJAX, et de détecter lorsque la valeur de hachage a changé? tout en gardant d'autres liens à travailler comme avant.
• Comment rediriger "www.yoursite.com/myapp/a/b/c" pour "www.yoursite.com/myapp/#/a/b/c"? et de toujours garder l'expérience lisse pour l'utilisateur, telles que le 3 redirection nécessaires sont aussi lisse que possible.
• Comment soumettre un formulaire de valeurs et les données à l'aide d'AJAX et de mise à jour de la table de hachage? et vice versa, si elles ne prennent pas en charge Javascript.
• Comment détecter le domaine particulier de la page de la requête AJAX est de le vouloir? Tels que les sous-pages sont affichées avec la bonne page.
• Comment modifier le titre de la page lors de l'AJAX changements d'état? et d'autres non-contenu de la page.
• Comment effectuer belle intro/outro effets alors que l'AJAX état des charges et des changements? telle que l'utilisateur n'est pas à gauche dans l'obscurité.
• Comment mettre à jour la barre latérale informations de connexion lorsque nous connecter via AJAX? Comme il est évident que nous ne voulons pas que le bouton de connexion en haut à gauche pour être plus là.
• Comment encore soutenir le site web pour les utilisateurs qui n'ont pas JS activé? Tel qu'il dégrade gracieusement et est toujours à plaquettes indexables par les Moteurs de Recherche.

Le seul open-source et projet fiable, je sais de qui tente de résoudre toutes les personnes extrêmement difficiles problèmes mentionnés s'est avéré être jQuery Ajaxy. C'est en effet une extension de jQuery Histoire du projet mentionné avant, offrant un joli élégante interface de haut niveau pour ajouter des fonctionnalités AJAX pour le mélanger à prendre soin de ces problèmes difficiles en coulisses afin de ne pas avoir à vous en soucier. C'est aussi la solution choisie utilisé dans le dernier quelques sites commerciaux mentionné plus tôt.

Bonne chance, et si vous avez d'autres questions, alors il vous suffit de poster un commentaire sur cette réponse et je vais l'obtenir le plus vite possible :-)

Mise à jour: Il y a maintenant le HTML5 Histoire de l'API (pushState, popState) qui dénonçait le HTML4 hashchange fonctionnalités. History.js est maintenant le sucessor de jQuery Histoire et offre la compatibilité inter-navigateur pour le HTML5 Histoire de l'API et un facultatif hashchange de secours pour HTML4 navigateurs. jQuery Ajaxy seront mis à niveau pour History.js

Answer 2

Szevasz .. :)

HTML

 <a href="http://stackoverflow.com/bye.php?user=abc&page=messages" 
   onclick="return goToWithAjax(this);">bye</a> 
 

Javascript

 function goToWithAjax(hash) {
  hash = hash.href ? hash.getAttribute("href", 2) : hash;
  ajax( hash, function( response ) {
    document.getElementById("content").innerHTML = response;
  });
  hash = ("#!/" + hash).replace("//","/");
  window.location.hash = hash;
  return false;
}

//////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

function ajax(url, onSuccess, onError) {
    var xmlHttp = getXmlHttpObject();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            // onError
            if (this.status != 200) {
                if (typeof onError == 'function') {
                    onError(this.responseText);
                }
            }
            // onSuccess
            else if (typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}​
 

Answer 3

Je pense que vous pouvez le faire très facilement à l'aide de la onHashChange événement présent dans le HTML5 ou à l'aide d'une bibliothèque JavaScript qui émule que le "hachage" comportement dans les navigateurs qui n'ont pas le plein support de HTML 5. Une telle bibliothèque peut être MooTools onhashchange, mais il ya beaucoup d'autres aussi.

Que si vous avez un HTML 5 conscients du navigateur, ou telle bibliothèque qui émule le comportement suffit d'utiliser:

de la fenêtre.sethash("#newsection");

changer pour quelque chose de nouveau à partir de javascript, et/ou un rappel pour que onHashChange événement à l'intercepter, en fonction de vos scénarios de cas d'utilisation.

Answer 4

CorMVC Jquery Framework se fait de cette manière, c'est un logiciel open source que vous pouvez creuser dans la source et en obtenir la logique.

Et en fait, c'est assez simple. Le créateur le raconte bien sur cette vidéo ci-dessous.

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

PS désolé ne peut pas poster le deuxième lien bc je suis un nouvel utilisateur.

Answer 5

C'est quelque chose qui échappe à la plupart des nouveaux AJAXian développeurs. C'est bien plutôt une question simple à résoudre.

la première chose que vous aurez besoin est la base jQuery qui est gratuit jquery.com

ensuite, vous aurez besoin de jQuery hachage changer même plugin par Ben Alman que vous pouvez trouver ici: http://benalman.com/projects/jquery-hashchange-plugin/ Vous n'aurez pas besoin de cela pour des versions plus récentes des navigateurs qui prennent en charge le html5 hashchange événement, mais vous allez pour les anciennes versions de navigateurs. vous n'avez pas à faire quelque chose, mais inclure ce script dans votre page, il se charge du reste.

maintenant pour vos liens, vous aurez besoin de les construire dans une chaîne de requête de mode de la sorte:

<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>

maintenant, vous avez les liens qui renvoient vers les pages et peut être géré en php dans le cas où le javascript est désactivé. tout ce que vous avez à faire est d'utiliser le super global $_GET et d'analyser la chaîne de requête pour gérer le contenu de la page.

maintenant, dans votre javascript sur la page, vous aurez besoin de faire vos liens de déclenchement hashchange. Vous pouvez le faire par le remplacement de l' ?q= avec un # de tel.

$(".dynlnk").each(function(){
    $(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});

maintenant vos liens de déclencher la hashchange, la seule chose qui reste à faire est de lier la hashchange à une fonction qui n'quelque chose. Cela peut être fait très simplement avec jQuery comme ceci:

$(window).bind( 'hashchange', function(e){

    //this splits the part after the hash so you can handle the parts individually.
    //to handle them as one just use location.hash
    pageparts = location.hash.split("/");

});

Maintenant il suffit d'ajouter ce code vous pour gérer votre ajax et le contenu.

maintenant, vous avez juste besoin d'un dernier peu de javascript pour déclencher la hashchange dans le cas où la page a été chargée avec une valeur de hachage pour commencer, donc vous suffit d'appeler le windows la fonction de déclenchement lorsque le chargement de la page

$(window).trigger( 'hashchange' );

J'espère que c'est assez clair, sinon, n'hésitez pas à me contacter pour demander plus de questions.