Verbessern Sie die Erfahrung mit Ajax-Listenanfragen basierend auf dem H5-Verlauf

In diesem Artikel werden hauptsächlich relevante Informationen zur Verbesserung des Ajax-Listen-Anforderungserlebnisses basierend auf dem h5-Verlauf vorgestellt.

Websites mit umfangreichen Informationen werden normalerweise in Paginierung angezeigt. Seite“ verwenden viele Websites dynamische Anfragen, um Seitenaktualisierungen zu vermeiden. Obwohl jeder Ajax ist, können Sie die Vor- und Nachteile anhand einiger kleiner Details unterscheiden. Ein kleines Detail ist die Möglichkeit, die „Zurück“- und „Vor“-Tasten des Browsers zu unterstützen. In diesem Artikel werden zwei Methoden beschrieben, die es dem Browser ermöglichen, vor und zurück zu wechseln, oder Ajax die Möglichkeit geben, zur vorherigen Seite zurückzukehren oder zur nächsten Seite zu wechseln, genau wie bei der Umleitung auf eine neue Seite.

Der einfachste Weg, die Seitenanzeige von Daten zu implementieren, besteht darin, mehrere Seitenzahlen nach der URL hinzuzufügen. Wenn Sie auf „Nächste Seite“ klicken, wird die Webseite auf die neue Adresse von Seite+1 umgeleitet. Sinas Nachrichtennetzwerk tut dies beispielsweise, indem es die URL ändert: index_1, index_2, index_3... Wenn diese Liste jedoch nicht der Hauptteil der Seite ist oder sich beispielsweise viele Bilder und andere umfangreiche Elemente in anderen Teilen der Seite befinden, ist die Navigation ein großer Schieberegler, und wenn Sie diese Methode verwenden, wird dies auf der gesamten Seite angezeigt flackern heftig und viele Ressourcen müssen neu geladen werden. Verwenden Sie also eine Ajax-Anfrage, um das DOM dynamisch zu ändern.

Aber normale dynamische Anfragen ändern die URL nicht. Wenn der Benutzer auf die nächste Seite klickt oder auf welche Seite klickt und zur vorherigen Seite zurückkehren möchte, klickt er möglicherweise auf die Zurück-Schaltfläche des Browsers. Dadurch wird nicht zur ursprünglich angezeigten Seite, sondern zur vorherigen URL zurückgekehrt. Das Nachrichtennetzwerk von CCTV ist beispielsweise so. Beginnen wir mit der Ajax-Anfrage und analysieren sie anhand eines vollständigen Falls.

Demo erstellt

Schreiben Sie zunächst eine Anfrage:

 //当前第几页
  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); 
      }
    }
  }

Rendern Sie nach Erhalt der Daten:

  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); 
  }

Eine solche grundlegende Ajax-Anfrage wird eingerichtet und dann wird auf die Schaltfläche „Nächste Seite“ geantwortet:

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

Wenn zu diesem Zeitpunkt keine Verarbeitung erfolgt, können die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers nicht verwendet werden.

Wenn Sie erkennen können, wann der Benutzer auf die Schaltflächen „Zurück“ und „Vorwärts“ klickt, können Sie einige Artikel schreiben. h5 fügt ein solches Ereignis window.onpopstate hinzu. Dieses Ereignis wird ausgelöst, wenn der Benutzer auf diese beiden Schaltflächen klickt. Es reicht jedoch nicht aus, dieses Ereignis zu erkennen. Sie müssen auch einige Parameter übergeben können. Das heißt, wenn Sie zur vorherigen Seite zurückkehren, müssen Sie den Seitenindex dieser Seite kennen. Dieser Zweck kann durch die pushState-Methode des Verlaufs erreicht werden. pushState (pageIndex) speichert den Seitenindex der aktuellen Seite und ruft dann den Seitenindex ab, wenn er zu dieser Seite zurückkehrt. Die Parameter von pushState lauten wie folgt:

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

Wobei state ein Objekt{} ist, das zum Speichern der Daten der aktuellen Seite verwendet wird , und der Titel ist nicht sehr groß. Die Rolle der URL ist die URL der aktuellen Seite. Sobald diese URL geändert wird, ändert sich auch die Adresse in der Adressleiste des Browsers entsprechend.

Fügen Sie daher in der nextPage-Funktion, die die nächste Datenseite anfordert, einen weiteren Schritt hinzu:

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

und hören Sie dann auf das Popstate-Ereignis:

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

Die Statusdaten wird durch das Ereignis übergeben. Auf diese Weise können Sie den pageIndex erhalten.

Es gibt jedoch immer noch Probleme mit dieser Implementierung. Wenn Sie die Seite auf der zweiten Seite aktualisieren, kommt es zu Verwirrung, wie unten gezeigt: Klicken Sie zunächst auf die nächste Seite Gehen Sie zur zweiten Seite und aktualisieren Sie die Seite. Klicken Sie dann auf die nächste Seite. Wenn ich auf Zurück klicke, wird immer noch ein Problem angezeigt Erste Seite. Es ist die erste Seite, bis ich erneut auf „Zurück“ klicke. Seite:

In der Symbolleiste auf der rechten Seite finden Sie den Seitenindex, den Sie erhalten, wenn Sie auf „Zurück für“ klicken Das erste Mal ist immer noch 1. Für diese Situation muss das Verlaufsmodell wie unten gezeigt analysiert werden:

kann als Vorgang des Verlaufs verstanden werden. Der Browser verfügt über eine Warteschlange zum Speichern von Zugriffsdatensätzen. Einschließlich jeder besuchten URL und Statusdaten. Zu Beginn zeigt der erste Zeiger der Warteschlange auf die Position von Seite = 0. Wenn auf die nächste Seite geklickt wird, wird pushState ausgeführt, ein Element in die Warteschlange eingefügt und die URL- und Statusdaten dieses Elements werden aufgezeichnet die pushState-Operation. Hier ist ersichtlich, dass die wichtigste Funktion der pushState-Operation darin besteht, Elemente in die Verlaufswarteschlange einzufügen, damit die Zurück-Schaltfläche des Browsers nicht ausgegraut wird, und anschließend die oben erwähnten Daten zu speichern. Wenn Sie auf „Zurück“ klicken, bewegt sich der Kopfzeiger einen Schritt zurück, um auf die Position von Seite = 0 zu zeigen, und wenn Sie auf „Vorwärts“ klicken, bewegt er sich vorwärts, um auf die Position von Seite = 1 zu zeigen.

如果在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的作用分析

Das obige ist der detaillierte Inhalt vonVerbessern Sie die Erfahrung mit Ajax-Listenanfragen basierend auf dem H5-Verlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!