На этом шаге мы рассмотрим методы, использующиеся для загрузки частей документа.
Первый и самый простой пример использования технологии AJAX, который мы рассматривали на 91 шаге, запрашивал фрагмент разметки HTML и вставлял его в страницу. Однако иногда на сервере уже имеется необходимый нам код HTML, но он заключен в страницу HTML, которая нам не нужна. Когда на стороне сервера нет возможности реализовать передачу данных в желаемом нами формате, библиотека jQuery может оказать нам помощь на стороне клиента.
Рассмотрим случай, напоминающий наш первый пример, но в отличие от него документ, содержащий словарные статьи, представляет собой законченную страницу HTML, как показано ниже:
Рис.1. Вид страницы в браузере
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=win-1251"/> <title>Технология AJAX</title> <link rel="stylesheet" href="dictionary.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="header"> <h2>Энциклопедия зарубежной музыки: H</h2> <div class="author">по материалам Интернета</div> </div> <div id="dictionary"> <div class="entry"> <h3 class="term">HELLOWEEN</h3> <div class="part">Heavy Metal</div> <div class="definition"> Helloween - немецкая пауэр-металлическая группа. </div> </div> <div class="entry"> <h3 class="term">HANOI ROCKS</h3> <div class="part">Glam Punk</div> <div class="definition"> Hanoi Rocks - финская рок-группа, основанная в 1979 году и получившая наибольшую известность в начале 1980-х. </div> </div> </div> </body> </html>
Мы можем загрузить страницу целиком, используя программный код, написанный ранее:
$(document).ready(function() { $('#letter-h a').click(function() { $('#dictionary').load('h.html'); return false; }); });
Однако это породит странный эффект из-за наличия частей страницы HTML, которые нам не нужны, как показано на рисунке 1 (щелкните по ссылке H).
Рис.1. Повторение некоторых фрагментов
Полный текст этого примера можно взять здесь.Чтобы удалить эти лишние части, мы можем задействовать новую для нас особенность метода load(). Вместе с адресом URL загружаемого документа можно указать селектор jQuery. При наличии селектора он используется для выделения частей загруженного документа. Благодаря этому в страницу будут вставлены только те части, которые соответствуют селектору. В данном случае мы применим этот прием, чтобы извлечь из документа и вставить только словарные статьи:
$(document).ready(function() { $('#letter-h a').click(function() { $('#dictionary').load('h.html .entry'); return false; }); });
Теперь ненужные части документа не попадут в страницу, как показано на рисунке 2.
Рис.1. Вставка только словарных статей
Полный текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать работу с таблицами.