PushState + Ajax obtenir une simple application d'une page SPA

Source de l'article

l'application d'une seule page (page unique application) appelée SPA, les avantages de l'application de l'utilisation de SPA a construit une bonne expérience utilisateur, rapide, n'a pas besoin de modifier le contenu de la page entière reload, sauter et éviter le rendu des répétitions inutiles, réduisant ainsi le rapport le stress du serveur, SPA dans le terminal mobile WEB est largement utilisé.

Nous réalisons des itinéraires frontaux simples routage frontal Javascript mentionné dans l'article précédent, peut, sans rafraîchir la page entière, chargement de la page partielle est obtenue par la barre d'adresse de transformation de hachage.

Aujourd'hui, je vous donne est sur l'utilisation de pushState HTML5 + ajax mise en œuvre ne rafraîchissez pas la page entière, tandis que la barre d'adresse, de transformation, effet de rafraîchissement de page partielle, avant et technologie de back-end intégré pour réaliser une simple page de SPA. Nous commençons à comprendre certains points de connaissances.

API HTML5 Histoire

Histoire HTML5 une augmentation de la méthode pushState, qui sera ajouté à l'historique des URL en cours et modifier l'URL en cours à une nouvelle URL. Bien sûr, cette méthode ne modifiera l'affichage de la barre d'adresse URL, mais n'a pas émis aucune demande. Nous pouvons donc utiliser cette méthode en conjonction avec est pushState + Ajax, ajax SPA d'application unique page, appelée Pjax.

utilisation pushState:

history.pushState (état, titre, url)

Etat: vous pouvez mettre les données que vous voulez mettre, il attacher à la nouvelle URL, en complément de la page d'information.

Titre: Comme son nom l' indique, est document.title.

url: nouvelle URL, qui est, vous voulez afficher sur l'URL dans la barre d'adresse.

history.replaceState (état, titre, url)

méthodes replaceState et pushState la même, seule différence est que le pushState url actuel ajouter au dossier historique, puis modifier votre URL et replaceState simplement modifier url, ne pas ajouter le dossier historique.

window.onpopstate

En général, chaque fois que l'URL change, événement popstate sera déclenché. Mais si l'appel pushState à modifier l'URL, l'événement ne se déclenche pas, afin que nous puissions l'utiliser comme un navigateur d'événements avant-arrière. L'événement a un paramètre, le premier état de paramètre pushState méthode ci-dessus.

Qu'est-ce que Pjax

Pjax est une excellente solution qui peut être fait:

Une transition en douceur peut passer entre les pages, augmenter l'animation de chargement.
Peut transmettre des données entre les pages, ne comptez pas l'URL.
Peut contenir de manière sélective, comme site de musique, vous ne serez pas arrêter de jouer la chanson lors du passage des pages.
Toutes les balises peuvent être utilisées pour sauter, juste une étiquette.
JS éviter répétée du public, ce qui réduit le volume des demandes, le trafic de sauvegarde, accélérer les temps de réponse des pages.
Pour SEO pas non plus être affecté, qui ne prennent pas en charge HTML5 navigateurs et robots de recherche, vous pouvez sauter la page réelle.
Visionneur vers l'avant et les boutons arrière.

le principe

1. intercepter une opération de saut de balise par défaut.

2. Ajax demande une nouvelle page.

3. Remplacez Html retourné à la page.

4. Utilisation de l'API HTML5 History ou l'URL Url Hash modifiée.

code mise en œuvre

HTML

Nous avons créé un #nav de menu, par un lien dans le menu, charge les pages liées correspondant au contenu du résultat div #.

<ul id = "nav">   
    <li> <a href="home.html">首页</a> </ li>   
    <li> <a href="product.html">产品</a> </ li>   
    <li> <a href="server.php" title="服务">服务</a> </ li>   
</ ul> 
<div id = "résultat"> </ div>

pjax.js

Tout d'abord, il est déterminé dans le cas pjax.js visionneur html5 définir alors un cache d'objets de cache: cache {}, le cache du jeu de définition et la méthode d'acquisition de cache. Définissez ensuite objet événement de l'événement: événement {}, popstate obligatoire et hashchange et cliquez sur l'événement, cliquez sur l'événement déclenchera un objet pajax d'appel demande de contenu de la page. code objet de cache de cache cet événement et l'objet de l'événement, vous pouvez télécharger la vue du code source, ce document pour des raisons d'espace, seul le code objet pjax noyau {} bâton out.

pjax = {var 
    // avant et à l'arrière, indique si l'opération en cours est déclenchée par l'avance et se rétractent 
    FNB: false, 
    // afficher un nouveau contenu de la page 
    Afficher: function (titre, HTML) { 
        document.title = title; 
        document.querySelector ( « # résultat « ) = le innerHTML HTML ;. 
    }, 
 
    // passer à une page spécifique 
    Jump: function (URL, les données, le rappel) { 
         
        // si elle est déclenchée par l' avant et vers l' arrière, puis essayer d'obtenir les données du cache 
        si (pjax.fnb ) { 
            var value = cache.get (URL); 
            IF (valeur == null) {! 
                pjax.show (value.title, value.html); 
                retour; 
            } 
        } 
        var XHR = new XMLHttpRequest () ;
 
  
        document.querySelector ( '# Résultat') = le innerHTML. 'chargement en cours ...';
        // ajax请求发送
 
        xhr.open ( "GET", url, true); 
        xhr.setRequestHeader ( "X-PJAX", "vrai"); 
        xhr.setRequestHeader ( "X-PJAX-TITLE", des données); 
        xhr.setRequestHeader ( "X-Requested-With", "XMLHttpRequest"); 
        xhr.onreadystatechange = function () { 
            if (xhr.readyState === 4) { 
                if (xhr.status> = 200 && xhr.status <300 || xhr.status === 304) {// 304是缓存
                    var html = xhr.responseText, 
                        title = xhr.getResponseHeader ( "X-PJAX-tITLE"); 
                    if (titre == null) { 
                        title = document.title;
                        title = decodeURI (titre); 
                    //console.log(title); 
                     
                    // afficher la nouvelle page 
                    pjax.show (titre, HTML); 
 
                    // au lieu de l' avant et les boutons arrière déclenchent 
                    IF (pjax.fnb) {! 
                        // modifier l'URL , barre d'adresse URL transformera 
                        IF (soutien === 'HTML5') { 
                            history.pushState (null, null, URL); 
                        } else {le 
                            chemin var = url.replace (location.protocol + "//" + location.host , ""); 
                            la location.hash = chemin; 
                        } 
                        // ajouté au cache 
                        cache.set (URL, { 
                            title: titre,
                            HTML: HTML 
                        }); 
                    } 
 
                } {l'autre 
                    le console.log ( 'échec de la demande!); 
                } 
                Pjax.fnb = true; 
            } 
        }; 
        xhr.send (); 
    }, 
 
    init: function () { 
        event.bindEvent () ; 
    } 
};

On peut voir que la partie centrale pjax ajax requête asynchrone, la méthode appel html5 history.pushState (), les informations de la page de cache, le résultat du traitement a été renvoyé de la requête asynchrone.

Dernier appel:

pjax.init ();