AJAX – SPA приложение презентация

Сохранение состояния AJAX-прил.

Сохранение состояния AJAX-прил.
Один из возможных способов хранить состояния AJAX-приложения являются URL-адреса.
Структура URL имеет следующий (сокращенный) вид:
<схема>://<хост>/
<#якорь>
- строка запроса с передаваемыми на сервер методом GET параметрами. Начинается с символа ?, разделитель параметров — знак &. Пример: ?параметр_1=значение_1&параметр_2=значение_2
<#якорь> идентификатор «якоря» с предшествующим символом #. Якорем может быть именованная ссылка внутри документа
или атрибут id элемента. По такой ссылке браузер откроет страницу и переместит окно к указанному элементу.
Если страница не обрабатывает GET-параметры или не использует якоря, эти части можно использовать для хранения ключей-идентификаторов состояния приложения.

Сохранение состояния AJAX-прил.
Для сохранения состояния AJAX-приложения необходимо при наступлении события, вызывающего
смену текущего состояния записать в соответствующую часть url-адреса метку, характеризующую новое состояние.
Для восстановления состояния AJAX-приложения при открытии страницы необходимо проверить, есть ли метка, связанная с состоянием приложения. Если такая метка имеется, то необходимо принудительно загрузить и отобразить данные, соответствующие данному состоянию.
Реализация механизма хранения состояния AJAX-приложения с использование GET-параметров или якорей в URL-адресе позволяет передавать URL-адрес другим пользователям (на другие компьютеры), гарантируя открытие приложения в нужном состоянии (с нужной информацией).
Это является преимуществом, в отличие от других способов (localStorage, cookie итп)

Сохранение состояния AJAX-прил.
Для чтения/записи состояния AJAX-приложения можно использовать свойства search или
hash объект window.location, например:
window.location.hash=“state1”; // добавит в url-адрес страницы #state1
var mystate=window.location.hash; // в mystate попадет строка ‘#state1’
Аналогичным образом можно организовать работу и search-частью url-адреса.

Восстановление состояния
<br>function checkHash() {<br> if (window.location.hash.length>2) {<br> …в hash есть состояние, восстанавливаем…<br> }<br> }<br>
onLoad=“checkHash();”>
…

«Бесконечная» лента новостей

Механика процесса
Пусть
A – высота всей страницы;
B – на сколько страницу уже
прокрутили;
С – высота окна браузера без учета толщины скроллбаров
Тогда, если равенство
A=B+C
становится верным, значит пользователь долистал страницу в браузере до конца.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
C
B
A

A - высота страницы
Полный размер страницы с учётом прокрутки определяется свойствами
.scrollWidth и .scrollHeight элемента documentElement (корневой элемент). Однако, с этими свойствами возникает проблема, когда прокрутка страницы то есть, то нет. В этом случае они работают некорректно.
В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем высота окна браузера, определяемая как documentElement.clientHeight. Эта проблема возникает именно для documentElement, то есть для всей страницы.
Поэтому на практике для получения высоты страницы используют максимальное из значений свойств
.scrollHeight, .offsetHeight, .clientHeight
объектов
document.documentElement и document.body

B - высота прокрутки
Текущую прокрутку страницы можно получить из свойств .scrollLeft
и .scrollTop корневого элемента documentElement.
Однако Safari/Chrome/Opera есть ошибки, из-за которых вместо document.documentElement следует использовать document.body:
https://bugs.chromium.org/p/chromium/issues/detail?id=157855
https://bugs.webkit.org/show_bug.cgi?id=106133
Как альтернативу можно использовать window.pageYOffset. Однако, стоит учитывать, что это свойство только для чтения и не поддерживается старыми версиями IE.
Таким образом, универсальным здесь также является использование максимального значения из нескольких вариантов получения высоты прокрутки.

С - высота окна браузера
Ширину/высоту окна за вычетом полосы прокрутки можно
получить из свойств .clientWidth и .clientHeight элемента document.documentElement
Все браузеры также поддерживают свойства window.innerWidth и .innerHeight, в которых хранится текущий размер окна браузера. Однако, сюда включается и полоса прокрутки, если она есть. Как правило, в задачах требуется именно доступная к использованию ширина/высота, поэтому правильнее использовать .clientWidth и .clientHeight.
DOCTYPE – это важно
Геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет . Поэтому в современном HTML мы всегда должны его указывать.

Итог
<br>function checkEnd() {<br> var A = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight,</div></h2><div class="slides-content">document.body.clientHeight, document.documentElement.clientHeight );<br> var B = window.pageYOffset || document.documentElement.scrollTop;
var C = document.documentElement.clientHeight;<br> if (A==B+C) alert(‘Достигли конца страницы’);<br>
…

Объекты в JavaScript
В JavaScript существует тип данных, называемый «Объект». Объекты используются
для хранения коллекций различных значений и более сложных сущностей. В том числе, для структурированных данных (xml и т.п.).
Объект может быть создан с помощью фигурных скобок {…} с необязательным списком свойств.
Свойство – это пара «ключ: значение», где ключ – это строка (также называемая «именем свойства»), а значение может быть любым типом, в том числе и другим объектом.
Можно представить объект в виде ящика с подписанными папками. Каждый элемент данных хранится в своей папке, на которой написан ключ. По ключу папку легко найти, удалить или добавить в неё что-либо.

Основы работы с объектами в JS
Создание
var user = {
name: “Мария Ильинична
Иванова”,
age: 37
}
Чтение свойств
alert( user.name + “, возраст: “ + user.age );
Изменение свойств:
user.age=58;
user[“name”]=“Мария Ильинична Петрова”;
Удаление свойств:
delete user.age;

JavaScript Object Notation
При работе со сложными объектами возникают задачи их передачи
по сети. В этом случае данные следует представить в текстовом виде.
JSON - общий формат для представления значений и объектов, первоначально создан для JavaScript, но сейчас поддерживается многими языками программирования.
По сути JSON представляет собой описание объекта в терминах JavaScript в виде строки.

Методы преобразования
JavaScript предоставляет методы:
JSON.stringify для преобразования объектов в JSON.
JSON.parse для преобразования JSON обратно
в объект.
Таким образом, с помощью AJAX-запроса можно прочитать JSON-данные, преобразовать их в объект и работать с ним в терминах javascript. Такой подход может составлять конкуренцию XML-DOM, с которыми AJAX-приложения работают нативно.

Пример
<br>function loadJSON() {<br> var R=new XMLHttpRequest();<br> R.open(‘GET’,’pobeda.json’,true);<br> R.send();<br> R.onload=function(){<br> var</div></h2><div class="slides-content">mydata=JSON.parse(R.responseText);<br> document.getElementById(‘out’).innerHTML=mydata.generals.person[0].name;<br> }<br>

Семантическая разметка страниц
Цель семантической разметки – сделать интернет более понятным, структурированным
и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Существует несколько видов семантической разметки, каждый из них предназначен для решения определенного круга задач:
Schema.org
Open Graph
Микроформаты

Какие задачи решаются
Семантическая разметка контента используется, например, следующими сервисами Яндекса:
Разметка товаров
и их стоимости помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка информации о программах (приложениях, компьютерных программах, играх и т. д.) помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка рецептов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка описаний фильмов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка творческих работ помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка вопросов и ответов помогает Поиску выделять лучший ответ и формировать специальные сниппеты для страниц с такой разметкой.
Разметка рефератов и других подобных работ помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка данных об организации и ее адресе помогает Справочнику и Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка информации об изображениях помогает улучшить представление изображений на сервисе Яндекс.Картинки.
Разметка информации о видеороликах помогает улучшить представление видеоматериалов.

Schema.org
Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например,
тег
Аватар
означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.
Schema.org предоставляет общедоступный словарь, с помощью которого вебмастера могут размечать страницы, так чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Microsoft и Yahoo!.

Разметка данных
Аватар
Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)
Фантастика
Трейлер itemtype="http://schema.org/Movie">
Аватар
Режиссер:
Джеймс Кэмерон
(род.
16 августа 1954 г.
)
Фантастика
Трейлер