хорошая практика, чтобы изменить страницу без перезагрузки

Question

Я пытаюсь сменить страницу, но без перезагрузки вот что я делаю: AJAX:

 app.ajax.client.request = function(headers, path, method, queryObj, payload, cb) {
    // Set defaults
    headers = typeof(headers) == 'object' && headers !== null ? headers : {};
    path = typeof(path) == 'string' ? path : '/';
    method = typeof(method) == 'string' && ['POST','PUT','DELETE','GET'].indexOf(method.toUpperCase()) > -1 ? method.toUpperCase() : 'GET';
    queryObj = typeof(queryObj) == 'object' && queryObj !== null ? queryObj : {};
    payload = typeof(payload) == 'object' && payload !== null ? payload : {};
    cb = typeof(cb) == 'function' ? cb : false;
    // For each query string parameter sent, add it to the path
    let requestUrl = path + '?';
    let counter = 0;
    // Set the request url based on the query object
    for (let i in queryObj) {
      if (queryObj.hasOwnProperty(i)) {
        counter++
        if (counter > 1) {
          requestUrl += '&';
        }
        requestUrl += i + '=' + queryObj[i];
      }
    }
    // Form the http request as a JSON type
    let xhr = new XMLHttpRequest();

    xhr.open(method, requestUrl, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    // For each header sent, add it to the request
    for (let i in headers) {
      if (headers.hasOwnProperty(i)) {
        xhr.setRequestHeader(i, headers[i]);
      }
    }

    // When the request comes back, handle the response
    xhr.onreadystatechange = function() {
      // Set the parameters that will be called back
      let readyState = xhr.readyState;
      let statusCode = xhr.status;
      let responseReturned = xhr.responseText;
      // Parse the response
      let parsedResponse = app.isJsonString(responseReturned);

      if (parsedResponse) { // If the response text is a JSON, callback parsedResponse, if not, callback the not parsed response instead
        cb(readyState, statusCode, parsedResponse);
      } else {
        cb(readyState, statusCode, responseReturned);
      }
    }
    // Send the payload as JSON
    let payloadString = JSON.stringify(payload);
    xhr.send(payloadString);
}

Клиентские запросы:

app.changeToIndexPage = function(e) {
 e.preventDefault();
 if (!app.mainContainer.hasClass('index')) { 
  app.closePage(); // show a loading screen
  history.pushState({}, '', '/'); //Set the url to the index's url
  setTimeout(function() {
    app.ajax.client.request(undefined, 'public/request/index.txt', 'GET', undefined, undefined, function(readyState, statusCode, response) { // Get the request
      console.log(readyState);
      if (readyState < 3) { 
        app.preloader.addClass('loading');
      } else if (readyState == 4 && statusCode == 200) {
        app.navContainer.attr('class', app.navContainer.attr('class').replace(/index|project|about|contact/g, 'index'));
        setTimeout(function() {
          app.mainContainer.html(response);
        }, 500);
      }
    });
  }, 100);
}

}

Итак,Например: если я не на странице индекса и хочу перейти на страницу индекса, я могу запустить функцию changeToIndexPage, и ajax запросит нужный файл и изменит элемент html в зависимости от необходимого действия.Единственная проблема, которая у меня возникла - есть ли лучшее решение ??

Answer 1

Если вы собираетесь извлекать страницы с помощью AJAX и вставлять их в документ, что я не рекомендовал бы в первую очередь, у вас должна быть обобщенная функция для этого.

Эта функция должна иметь подпись типа function navigate(path) { ... }.Он должен добавить запись в историю, извлечь соответствующий документ и вставить его на страницу.

Затем вам нужно будет подключить прослушиватель событий для перехвата popState событий, поэтому, когда пользователь нажимает кнопку возвратаВы извлекаете путь из записи истории, которая была извлечена, и передаете его в navigate().

Опять же, если вы хотите создать SPA, я бы не рекомендовал создавать его таким образом.Одним из основных преимуществ SPA является повышение производительности от рендеринга ваших документов на клиенте, которое этот подход не использует.Подумайте об использовании основанной на компонентах клиентской библиотеки рендеринга, такой как React или Angular.