Механизм выбора jQuery является быстрым и гибким и позволяет выбирать элементы DOM, а также строки разметки в памяти. Когда вы объедините эту функциональность с возможностью получения полной разметки HTML со страниц вашего сайта, вы сможете найти несколько интересных способов повторно использовать контент в своем веб-приложении.

Концепции

Рассмотрим приложение, которое содержит контент на одной странице, который вы хотите отобразить на другой странице. Причины такого подхода различны, но наиболее распространенные сценарии включают работу с устаревшими системами или системами «черного ящика», когда вы не можете контролировать реализацию сервера или когда вы работаете со статическим контентом. В конце концов, и «черный ящик», и обстоятельства статического контента не дают вам возможности подготовить данные на сервере в типичные ответные сообщения Ajax (например, JSON или XML).

Пример, продемонстрированный в этой статье, работает для извлечения фрагментов контента из статических файлов HTML и отображения их на другой странице сайта. На рисунке 1 показана статическая HTML-страница со списком фильмов из нескольких категорий в системе.

Рисунок 1: Полная страница фильмов

Хотя на странице «Фильмы» есть все фильмы в системе, на домашней странице будет отображаться только часть фильмов для пользователей. На рис. 2 показано, как на главной странице отображаются только боевики на странице.

Рисунок 2: Домашняя страница, показывающая только боевики. (index.html)

Чтобы этот сценарий работал, требуется вызов Ajax для статической HTML-страницы. Как только ответ от вызова Ajax распознается браузером, фрагмент страницы извлекается из полного ответа с помощью селекторов jQuery в разметке, возвращаемой со статической страницы. Механизм выбора jQuery достаточно гибок, чтобы работать с элементами DOM, а также выбирать строку разметки в памяти — но здесь есть одна загвоздка.

Ответ на вызов Ajax включает разметку полного HTML-кода страницы , который включает в себя элемент DOCTYPE, а также корневой элемент HTML документа. Ответ с двумя элементами корневого уровня выбирается не сразу, поскольку механизм выбора jQuery требует, чтобы цели запроса имели один корневой элемент. Эта проблема решается путем добавления корневого элемента в строку ответа вручную, что делается путем помещения его в логический контейнер, такой как элемент DIV .

Код

Код для страницы фильмов доступен в листинге 1, который показывает, как каждая категория фильмов логически содержится в элементе SECTION с соответствующим значением идентификатора .

Листинг 1: Страница фильмов (movies.html)

 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 
 Movies Action Die Hard The Matrix Raiders of the Lost Ark Drama A Few Good Men The Shawshank Redemption Legends of the Fall 
 

Домашняя страница состоит из кода, приведенного в листинге 2, который по умолчанию включает в себя только один структурный элемент, найденный в теге DIV, который действует как оболочка для содержимого, отображаемого на странице.

Листинг 2: Домашняя страница (index.html)

 $(function () { $.get('movies.html', function (response) { var source = $(' 
  '+ ответ +' 
 «);
 $ ( '#' Кино) HTML (source.find ( '# экшен-контейнер') HTML ().).
 });
 }); 

JavaScript на этой странице начинается с регистрации обработчика загрузки jQuery. После загрузки страницы вызов API $ .get извлекает страницу movies.html . Ответом на этот запрос является полная HTML-разметка страницы movies.html (включая DOCTYPE ). Поскольку необработанная разметка изначально не предназначена для выбора, строка оборачивается корневым элементом DIV, а затем создается как объект jQuery, что делает ее готовой для обработки механизмом выбора.

Чтобы найти нужный фрагмент HTML на странице «Фильмы», API-интерфейс find используется для запроса потомков полной разметки и возврата только элементов, необходимых для домашней страницы (т. Е. Элемента с идентификатором action-container ). Как только фрагмент найден, он затем внедряется во innerHTML элемента хоста контента с помощью функции hQml jQuery против DIV с идентификатором фильмов .

Наконец, в листинге 3 представлены общие стили, используемые на каждой странице для применения к страницам минимального стиля.

Листинг 3: Таблица стилей (styles.css)

 body, html { padding:4px; margin:0px; } body { font-family:Arial, Helvetica, sans-serif; font-size:1em; } 

Вывод

Хотя необходимость в таком подходе может быть относительно редкой, вы можете столкнуться со случаями, когда вы хотите сделать Ajax-вызов существующей странице вашего сайта и отобразить только целевую часть элементов на странице. Секреты реализации этого подхода заключаются в том, чтобы обернуть строку ответа в один логический корневой элемент, а затем использовать API поиска jQuery для извлечения только разметки, необходимой для страницы хоста.

BIO:

Крейг Шумейкер ( Twitter | Google+ ) — разработчик программного обеспечения, подкастер , писатель и технический евангелист в области инфраструктуры . Как хозяин Полиморфного Подкаста , Крэйг делает то, что ему нравится больше всего — вносит вклад в сообщество и привлекает лучших из светил отрасли.

Крейг — Microsoft ASP.NET MVP , ASP Insider и приглашенный докладчик в различных группах пользователей и выставках. Крейг является соавтором книг Wrox « Начало ASP.NET 2.0 AJAX », « Начало ASP.NET Ajax », а также автором CODE Magazine и Pluralsight .

В свободное время Крэйг любит искать стог сена, чтобы скрыть свою коллекцию призовых игл.