Améliorer l'expérience de demande de liste ajax basée sur l'historique h5

Cet article présente principalement les informations pertinentes sur l'amélioration de l'expérience de demande de liste ajax basée sur l'historique h5. Les amis qui en ont besoin peuvent s'y référer

Les sites Web contenant des informations riches sont généralement affichés en pagination. page", de nombreux sites Web utilisent des requêtes dynamiques pour éviter l'actualisation des pages. Bien que tout le monde soit ajax, vous pouvez toujours distinguer les avantages et les inconvénients à partir de quelques petits détails. Un petit détail est la possibilité de prendre en charge les touches « précédent » et « suivant » du navigateur. Cet article traite de deux méthodes qui permettent au navigateur d'avancer et d'avancer, ou de laisser à ajax la possibilité de revenir à la page précédente ou d'avancer vers la page suivante, tout comme la redirection vers une nouvelle page.

Le moyen le plus simple d'implémenter l'affichage des données par pagination est d'ajouter plusieurs numéros de page après l'URL. Lorsque vous cliquez sur "Page suivante", la page Web sera redirigée vers la nouvelle adresse de la page+1. Par exemple, le réseau d'information de Sina fait cela en changeant l'URL : index_1, index_2, index_3... Mais si cette liste n'est pas la partie principale de la page, ou s'il y a de nombreuses images et autres éléments riches dans d'autres parties de la page, par exemple, la navigation est un grand curseur, et si vous utilisez cette méthode, la page entière sera scintille violemment et de nombreuses ressources devront être rechargées. Utilisez donc la requête ajax pour modifier dynamiquement le DOM.

Mais les requêtes dynamiques ordinaires ne changeront pas l'URL. Lorsque l'utilisateur clique sur la page suivante, ou clique sur quelle page, et souhaite revenir à la page précédente, il peut cliquer sur le bouton de retour du navigateur. clé, cela entraînera le retour non pas à la page initialement consultée, mais à l'URL précédente. Par exemple, le réseau d’information de CCTV est comme ça. Commençons par la requête ajax et analysons-la avec un cas complet.

Réaliser une démo

Tout d'abord, rédigez une demande :

 //当前第几页
  var pageIndex = 0;
  //请求函数
  function makeRequest(pageIndex){
    var request = new XMLHttpRequest();
    request.onreadystatechange = stateChange;
    //请求传两个参数，一个是当前第几页，另一个是每页的数据条数
    request.open("GET", "/getBook?page=" + pageIndex + "&limit=4", true);
    request.send(null);
    function stateChange(){
      //状态码为4，表示loaded，请求完成
      if(request.readyState !== 4 ){
        return;
      }
      //请求成功
      if(request.status >= 200 && request.status < 300 || request.status === 304){
        var books = JSON.parse(request.responseText);
        renderPage(books); 
      }
    }
  }

Rendu après avoir obtenu les données :

  function renderPage(books){
    var bookHtml = 
      "<table>" +
      "  <tr>" +
      "    <th>书名</th>" +
      "    <th>作者</th>" +
      "    <th>版本</th>" +
      "  </tr>";
    for(var i in books){
      bookHtml += 
        "<tr>" +
        "  <td>" + books[i].book_name + "</td>" +
        "  <td>" + books[i].author + "</td>" +
        "  <td>" + books[i].edition + "</td>" +
        "</tr>";
    }
    bookHtml += "</table>";
    bookHtml += 
      "<button>上一页</button>" + 
      "<button onclick=&#39;nextPage();&#39;>下一页</button>";
    var section = document.createElement("section");
    section.innerHtml = bookHtml;
    document.getElementById("book").appendChild(section); 
  }

Une telle requête ajax de base est configurée, puis le bouton "page suivante" reçoit une réponse :

  function nextPage(){
    //将页面的index加1
    pageIndex++;
    //重新发请求和页面加载
    makeRequest(pageIndex);
  }

À ce stade, si aucun traitement n'est effectué, il ne pourra pas function La fonction des boutons retour et avant du navigateur.

Si vous pouvez détecter le moment où l'utilisateur clique sur les boutons Précédent et Suivant, vous pouvez écrire des articles. h5 ajoute un tel événement window.onpopstate. Cet événement sera déclenché lorsque l'utilisateur clique sur ces deux boutons. Mais il ne suffit pas de détecter cet événement. Il faut aussi pouvoir passer certains paramètres, c'est-à-dire qu'en revenant à la page précédente, il faut connaître le pageIndex de cette page. Cet objectif peut être atteint grâce à la méthode d'historique pushState. pushState(pageIndex) stocke le pageIndex de la page actuelle, puis obtient le pageIndex lors du retour à cette page. Les paramètres de pushState sont les suivants :

window.history.pushState(state, title, url);

Où state est un objet{}, utilisé pour stocker les données de la page actuelle , et le titre n'est pas très gros. Le rôle de l'url est l'url de la page actuelle. Une fois cette url modifiée, l'adresse dans la barre d'adresse du navigateur changera également en conséquence.

Ainsi, dans la fonction nextPage qui demande la page de données suivante, ajoutez une étape supplémentaire :

  function nextPage(){
    pageIndex++;
    makeRequest(pageIndex);
    //存放当前页面的数据
    window.history.pushState({page: pageIndex}, null, window.location.href); 
  }

Écoutez ensuite l'événement popstate :

  //如果用户点击返回或者前进按钮
  window.addEventListener("popstate", function(event){
    var page = 0;
    //由于第一页没有pushState，所以返回到第一页的时候是没有数据的，因此得做下判断
    if(event.state !== null){
      page = event.state.page;
    }
    makeRequest(page); 
    pageIndex = page;
  });

Les données d'état sont transmises. L'événement est transmis afin que le pageIndex puisse être obtenu.

Cependant, cette implémentation pose encore des problèmes. Si vous actualisez la page sur la deuxième page, une confusion se produira, comme indiqué ci-dessous : Tout d'abord, cliquez sur la page suivante pour y accéder. accédez à la deuxième page, puis actualisez la page, la première page apparaît, puis cliquez sur la page suivante et la deuxième page apparaît. Lorsque je clique sur Retour, un problème se produit toujours, pas celui attendu. première page. C'est la première page jusqu'à ce que je clique à nouveau sur Retour Page :

Dans la barre d'outils de droite, vous pouvez constater que la pageIndex obtenue lorsque vous cliquez sur Retour pour. la première fois est toujours 1. Pour cette situation, le modèle d'historique doit être analysé, comme indiqué ci-dessous :

peut être compris comme le fonctionnement de l'historique. Le navigateur dispose d'une file d'attente pour stocker les enregistrements d'accès. Y compris chaque URL visitée et les données d'état. Au début, le premier pointeur de la file d'attente pointe vers la position de page = 0. Lorsque vous cliquez sur la page suivante, pushState est exécuté, un élément est inséré dans la file d'attente et l'URL et les données d'état de cet élément sont enregistrées via l’opération pushState. On voit ici que la fonction la plus importante de l'opération pushState est d'insérer des éléments dans la file d'attente de l'historique afin que le bouton retour du navigateur ne soit pas grisé, suivi du stockage des données mentionnées ci-dessus. Lorsque vous cliquez en arrière, le pointeur de tête recule d'un pas pour pointer vers la position de page = 0, et lorsque vous cliquez en avant, il avance pour pointer vers la position de page = 1.

如果在page = 1的位置刷新页面，模型是这个样子的：

在第2步刷新的时候，页面的pageIndex又恢复成默认值0，所以page = 0，显示第一页数据，但是history所用的队列并没有改变。然后再点下一页时，又给这个队列push了一个元素，这个队列就有两个pageIndex 为1的元素，所以必须得两次返回才能回到page = 0的位置，也就是上面说的错乱的情况。

根据上面的分析，这样的实现是有问题的，一但用户不是在page = 0的位置刷新页面，就会出现需要点多次返回按钮才能够回到原先的页面。

所以得在刷新的时候，把当前页的state数据更新一下，用replaceState，替换队列队首指针的数据，也就是当前页的数据。方法是页面初始化时replace一下：

window.history.replaceState({page: pageIndex /*此处为0*/}, null, window.location.href);
这样模型就变成：

但其实用户刷新的时候更希望的是还是显示当前页，而不是回到第一页。一个解决办法是用当前页的window.history.state数据，这个属性浏览器支持得比较晚。在页面初始化时设置pageIndex时就从history.state取：

var pageIndex = window.history.state === null ? 0 : window.history.state.page;

safari里面的history.state是最近执行pushState传入的数据，因此这个办法在chrome/firefox里面行得通，但是safari行不通。

第二种办法是借助h5的localStorage存放当前页数：

 //页面初始化，取当前第几页先从localStorage取
  var pageIndex = window.localStorage.pageIndex || 0;

  function nextPage(){
    //将页面的index加1，同时存放在localStorage
    window.localStorage.pageIndex = ++pageIndex;
    //重新发请求和页面加载
    makeRequest(pageIndex);
    window.history.pushState({page: pageIndex}, null, window.location.href); 
  }

  window.addEventListener("popstate", function(event){
    var page = 0;
    if(event.state !== null){
      page = event.state.page;
    }
    makeRequest(page); 
    //点击返回或前进时，需要将page放到localStorage
    window.localStorage.pageIndex = page;
  });

将页面中所有改变pageIndex的地方，同时放到localStorage。这样刷新页面的时候就可以取到当前页的pageIndex。

上面的方法都是将pageIndex放到了state参数里，还有一种方法是把它放到第三个参数url里，也就是说通过改变当前页网址的办法。pageIndex从网址里面取：

 //当前第几页
   var pageIndex = window.location.search.replace("?page=", "") || ;
   function nextPage(){
     //将页面的index加
     ++pageIndex;
     //重新发请求和页面加载
     makeRequest(pageIndex);
     window.history.pushState(null, null, "?page=" + pageIndex);
   }

注意，一旦执行了第8行的pushState，当前网址的地址就会发生变化。

有一点需要注意的是，window.history.length虽然返回是的当前队列的元素个数，但不代表history本身就是那个队列，通过不同浏览器的对history[i]的输出：

可以看到history是一个数组，它的作用是让用户拿到history.length，当前的长度，但是填充的内容是不确定的。

除了使用history之外，还有借助hash的方法，网易新闻就是使用了这样的方法：

   //当前第几页
   var pageIndex = window.location.hash.replace("#page=", "") || ;
   function nextPage(){ 
     makeRequest(pageIndex);
     window.location.hash = "#page=" + pageIndex;
   }
   window.addEventListener("hashchange", function(){
     var page = window.location.hash.replace("#page=", "") || ;
     makeRequest(page);
   });

      关于支持性，参考caniuse网站：history IE10及以上支持，hashchange的支持性较好，IE8及以上都支持。

      虽然hashchange的支持性较好，但是history的优点是可以传数据。对一些复杂的应用可能会有很大的发挥作用，同时history支持back/go操作。

以上本文关于h5的history改善ajax列表请求体验，希望大家喜欢。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

AJAX XMLHttpRequest对象详解

编写轻量ajax组件第三篇实现

Ajax请求中async:false/true的作用分析

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!