Шаг 109.
Библиотека jQuery.
AJAX. Дополнительные возможности. Загрузка частей страницы HTML

    На этом шаге мы рассмотрим методы, использующиеся для загрузки частей документа.

    Первый и самый простой пример использования технологии 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. Вставка только словарных статей

Полный текст этого примера можно взять здесь.

    Со следующего шага мы начнем рассматривать работу с таблицами.




Предыдущий шаг Содержание Следующий шаг