AJAX Kurs od podstaw - wymiana fragmentu strony

Asynchroniczna wymiana fragmentu witryny

Wymiana fragmentu witryny bez przeładowywania całej strony jest popularnym rozwiązaniem, które znajdziemy m.in. w serwisach http://www.yahoo.com oraz http://www.fotozakupy.pl. Menu zaznaczone czerwoną obwódką powoduje wymianę treści fragmentu zaznaczonego zieloną obwódką.

Przykładowa strona prezentująca wymianę fragmentu witryny

{z9864}

Wymiana fragmentu witryny Fotozakupy.pl

Rozwiązanie zastosowane w Yahoo! wykorzystuje Ajax i działa także przy wyłączonym JavaScripcie (oczywiście strona jest wówczas przeładowywana w całości).

Natomiast serwis Fotozakupy stosuje zmianę widoczności warstw bez użycia Ajaksa (komplet tekstów jest zawarty w głównym dokumencie HTML). Rozwiązanie takie nie działa, gdy wyłączymy JavaScript.

Przykład

Omawiane zagadnienie przedstawię od strony praktycznej. Menu strony jest zaznaczone czerwoną obwódką. Po aktywacji jednej z opcji menu odpowiednia treść jest ładowana do pojemnika oznaczonego zieloną obwódką.

Kod HTML przykładu ma postać:

1. < div id="pojemnik">
2.    <ol id="menu">
3.       <li>...</li>
4.       <li>...</li>
5.       ...
6.    </ol>
7.    <div id="content"></div>
8. </div>

Listing zwinięty - 8 linii

Dane w formacie HTML

Przykład prezentuje zawartość pięciu płyt muzycznych:

• ABBA: Super Trouper,
• AC/DC: Flick of the Switch,
• Aerosmith: Draw the Line,
• Black Sabbath: Eternal Idol,
• Bob Dylan: Basement Tapes.

Pliki:

• fragment-abba.html
• fragment-ac_dc.html
• fragment-aerosmith.html
• fragment-black_sabbath.html
• fragment-bob_dylan.html

zawierają kod HTML. Nie są to kompletne strony WWW, a jedynie fragmenty, które należy umieścić w pojemniku div#content przeznaczonym na treść.

O to zarys pliku fragment-bob_dylan.html:

 1. < h1>Bob Dylan</h1>
 2. < h2>Basement Tapes</h2>
 3. < h2>1975</h2>
 4. <table>
 5.    <tr>
 6.       <th>lp.</th>
 7.       <th>title</th>
 8.       <th>czas</th>
 9.    </tr>
10.    <tr>
11.       <td>1.</td>
12.       <td>Odds and Ends</td>
13.       <td>1:46</td>
14.    </tr>
15.    <tr>
16.       <td>2.</td>
17.       <td>Orange Juice Blues (Blues for Breakfast)</td>
18.       <td>3:37</td>
19.    </tr>
20.    ...
21. </table>

Listing zwinięty - 21 linii

Każdy plik z opisem płyty zawiera jeden element h1 (nazwa zespołu), dwa elementy h2 (tytuł płyty oraz rok jej wydania) oraz tabelę z listą utworów. Po wstawieniu pliku fragment-bob_dylan.html otrzymamy kod:

 1. <div id="pojemnik">
 2.    <ol id="menu">
 3.    ...
 4.    </ol>
 5.    <div id="content">
 6.       <h1>Bob Dylan</h1>
 7.       <h2>Basement Tapes</h2>
 8.       <h2>1975</h2>
 9.       <table>
10.       ...
11.       </table>
12.    </div>
13. </div>

Listing zwinięty - 13 linii