Альтернатива загрузки страницы на чистом HTML-сайте AJAX

Ответ 1

Является ли моя цель невозможной или существует зрелый подход?

В последнее время существует хорошая часть инфраструктур JavaScript, разработанных по этой самой концепции (одностраничное приложение), с загрузкой страницы без каких-либо предварительно загруженных в нее данных и доступа ко всем данным через AJAX. Некоторыми примерами таких структур являются AngularJS, Backbone.js, Ember.js и Knockout. Нет, это совсем не возможно. Я рекомендую узнать об этих структурах и других, чтобы найти тот, который кажется правильным для сайта, который вы создаете.

Идея состоит в том, чтобы прочитать параметры URL с помощью JS (после загрузки страницы), а затем выполнить запрос AJAX, а затем извлечь данные и показать их на странице.

Это звучит неплохо.
Здесь приведен пример того, как вы можете использовать JavaScript для извлечения параметров запроса из текущего URL-адреса страницы.

Я знаю, что вместо 1 запроса на сервер (Web Forms) у нас теперь есть 2 запроса, первый запрос на получение страницы, а второй запрос - запрос AJAX. И, конечно, у этого есть много задержек, так как страница будет загружена в начале без фактических данных, которые мне нужны внутри.

Вот почему вы не должны беспокоиться об этом:

• Пользовательский браузер обычно кэширует файл HTML и связанные с ним файлы JavaScript, поэтому во второй раз, когда они посещают ваш сайт, браузер отправляет запросы на проверку, были ли файлы изменены. Если нет, сервер отправит короткое сообщение, просто сказав, что они не были изменены, и файлы не нужно будет передавать снова.
• Ответ AJAX будет содержать только те данные, которые нужны странице, и ни одна из разметки. Поэтому получение страницы, сгенерированной на сервере, будет связано с большей передачей данных, чем с подходом, который объединяет кешируемый .html файл и запрос AJAX.
• Таким образом, общее время загрузки должно быть меньше, даже если вы делаете два запроса вместо одного. Если вы обеспокоены тем, что пользователь увидит страницу без содержимого во время загрузки данных AJAX, вы можете (a) полностью очистить страницу во время загрузки данных (если она не слишком медленная, это не должно быть проблема), или (б) Бросьте заставку, чтобы сообщить пользователю, что страница загружается. Опять же, пользователи, как правило, не имеют проблемы с небольшим количеством времени загрузки в начале, если после этого страница будет быстрой.

Ответ 2

Я думаю, вы переусердствовали. Я бы поспорил, что объединенные два звонка, о которых вы беспокоитесь, будут работать примерно в то же время, что и одиночные webforms page_load, если вы закодировали иначе - только разница в том, что начальная загрузка страницы будет действительно быстро (потому что вы загружаете только небольшую страницу html/css/images без замедления для запуска любого кода сервера.

Общим решением было бы иметь "spinner" или какой-то вид (анимированный GIF), который дает пользователю визуальную индикацию того, что страница не была загружена, пока ваши вызовы ajax ждут завершения.

Наблюдайте за типичной загрузкой страницы, сделанной практически с любого крупного веб-сайта на любом языке, вы увидите много и много запросов, которые составляют одну загружаемую страницу, если она будет тянуть css/images из CDN, js из CDN, загрузку аналитики Google, рекламные объявления из рекламных сетей и т.д. Попытка получить 100% вашей страницы для загрузки в одном звонке не является целью, о которой вы должны беспокоиться.

Ответ 3

Я не думаю, что 2-запросы - это "плохая идея". На самом деле нет другого решения, если вы хотите использовать только статический HTML + AJAX (то есть moderm-подход к веб-разработке, поскольку это позволяет повторно использовать запрос AJAX для других не-HTML-клиентов, таких как приложения для Android или iOS). Также производительность очень относительна. Если ваш клиент может кэшировать первый статический HTML, он будет намного быстрее по сравнению с серверным подходом, даже если нужны два запроса. Просто используйте профилировщик сети, чтобы убедить себя.

Что вы можете сделать, если не хотите, чтобы пользователь заметил задержку в графическом интерфейсе, это использовать общий script, который показывает всплывающее окно, скрывающее/блокирующее все полное окно (возможно, с "пожалуйста, подождите" ) пока не будет получен второй запрос с AJAX, и в обратном вызове AJAX будет инициировано событие (полученное) (или подобное).

EDIT: Я думаю, что, вероятно, вам нужно преобразовать ваш веб-сайт в webapp, используя манифест, чтобы просмотреть "кешируемый" статический контент. Затем запросите свой сервер только для динамических (AJAX) данных: http://diveintohtml5.info/offline.html (IE 10+ также поддерживает манифесты Webapp)

Модерные браузеры прочитают манифест, чтобы узнать, нужно ли им перезагружать статический контент или нет. Использование манифеста webapp также позволит интегрировать ваш веб-сайт в ОС. Например, на Android он будет указан в списке недавних задач (в противном случае отображается только ваш браузер, а не ваше приложение), и пользователь может добавить shorcut на рабочий стол.

Ответ 4

Итак, у вас есть статические HTML и код пользователя на стороне сервера только в обработчиках? Почему у вас не может быть одной ASP.Net-страницы (сгенерированной на стороне сервера) для загрузки исходных данных, и все остальные данные будут обрабатываться с использованием запросов AJAX?

Ответ 5

если его можно использовать любую логику с поддержкой, чтобы определить, что загрузить на стороне сервера, что будет легко получить данные.

скажем, например, если вы загрузите json a int he page cc.php, вызвав страницу cc.php? json = a, вы можете определить из кода PHP, чтобы поставить json на страницу сам и использовать в качестве объекта на странице HTML

если вы используете строку запроса для чтения и определения, что нужно загрузить, вам нужно сделать два вызова.

Ответ 6

Основное, что вам кажется нужным, это то, что известно как маршрутизатор.

Поскольку вы, похоже, хотите сохранить вещи довольно гладко, традиционный ответ будет Backbone.js. Если вы хотите еще быстрее и компактнее, то оптимизированная вилка Backbone ExoSkeleton может быть только билетом, но у нее нет следующего, что у самой магистрали. Конечно, лучше, чем готовить свою собственную вещь.

Есть несколько тонких фреймворков вокруг, таких как Ember и Angular, которые имеют большие пользовательские базы. Я недавно использовал Ember для довольно сложного приложения, так как у него очень сложный маршрутизатор, но на основе моих опытов я больше сравнялся с архитектурой, доступной сегодня в React/Flux (а не только с реакцией, но с архитектурным шаблоном Flux).

React/Flux с одним из дополнительных компонентов маршрутизатора доставит вас очень далеко (Facebook/Instrgram) и, на мой взгляд, предлагает превосходную архитектуру для веб-приложений, чем традиционный MVC; в настоящее время это самая быстрая структура для обновления DOM, а также позволяет изоморфные приложения (выполняемые как на клиенте, так и на сервере). Это представляет собой так называемый "святой грааль" веб-приложений, поскольку он отправляет исходную визуализированную страницу с сервера и избегает любых задержек из-за загрузки структуры, последующие взаимодействия затем используют ajax.

Прежде всего, проверьте некоторые из фреймворков и найдите то, что лучше всего подходит для вас. Вы можете найти какое-то значение для сравнения реализаций фреймов на TodoMVC, но, на мой взгляд, приложение Todo слишком простое и надуманное, чтобы действительно показать, как различные рамки сияют.

Моя собственная эволюция была jQuery → Backbone → Backbone + Marionette → Ember → React/Flux, поэтому не ожидайте, что получите хорошую информацию о том, что для вас важно, до тех пор, пока вы не используете несколько фреймов в гневе.

Ответ 7

Основная проблема - с точки зрения UX/UI.

Как только вы получите данные с сервера (в Ajax) после, страница загружена - вы получите "мерцающее" поведение, как только данные будут введены на страницу.

Вы можете решить эту проблему, представив страницу только после того, как данные прибыли, или используйте какой-либо предварительный загрузчик - чтобы пользователь знал, что страница все еще получает свои данные, но тогда у вас будет производительность как вы уже упоминали.

Идеальное решение в этом случае состоит в том, чтобы получить "базовые" данные, необходимые этой странице (по первому запросу на сервер), и манипулировать им через клиента - таким образом, легкость в "мерцающем" поведении.

Это соображение между показателями производительности и "мерцания" /предварительной загрузки.

Самая популярная библиотека для этой страницы SPA (одностраничное приложение) - angularJS

Ответ 8

Если я правильно понимаю ваш запрос. Возможно, вам захочется больше узнать:

1) window.location.hash

Вместо использования "?" вы можете использовать "#" для управления своей страницей на основе строки запроса.

Ссылка: Как изменить запрос на одной странице без обратной передачи

2) событие hashchange

Это событие срабатывает всякий раз, когда в фрагменте/хеше ( "#" ) URL-адреса изменяется. Кроме того, вы можете отслеживать хэш для сравнения между предыдущим значением хэша и текущим значением хеша.

например.

$(window).on('hashchange', function () {

    //your manipulation for query string goes here...

    prevHash = location.hash;

});

var prevHash = location.hash; //For tracking the previous hash.

Ссылка: Вкл - window.location.hash - Изменить?

3) Для точки входа на стороне клиента или аналогичного серверного PageLoad вы можете использовать это,

например.

/* Appends a method - to be called after the page(from server) has been loaded. */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function YourPage_PageLoad()
{
   //your code goes here...

}

//Client entry-point
addLoadEvent(YourPage_PageLoad);

Поскольку вы делаете чистый ajax, преимущество этого метода заключается в том, что вы сможете легко обрабатывать предыдущие/следующие события нажатия кнопки из браузера и предоставлять пользователю правильные данные/страницу.

Ответ 9

Я бы предпочел AngularJS. Это будет хорошая технология, и вы можете сделать разбиение на страницы одним HTML. Поэтому я думаю, что это будет хорошей основой для вас, поскольку вы используете статический контент. В концепции AngularJS MVC читайте AngularJS Tutorial. Таким образом, эта структура будет стоить вашего нового проекта. Счастливое кодирование