AJAX – это просто

Итак, представим ситуацию – есть страница, к примеру каталог, в середине которой находится блок с обновляемым контентом.

     <ul id="menu">

        <li id="item1"><a href="#">Товар 1</a></li>

        <li id="item2"><a href="#">Товар 2</a></li>

    </ul>

<div id="mainContent">

  <div id="intro">

      <p>&nbsp;</p>

    <p>&nbsp;</p>

    <h3>Каталог</h3>

    <p>&nbsp;</p>

    <p id="intro">Добро пожаловать в наш каталог!<br>Выберите раздел:</p>

    </div>

    <div id="article"></div>

</div>

Сверху у нас меню в виде списка ссылок. Блок с идом “intro” будет показываться только при заходе на страницу. Блок “article” будет содержать обновляемую информацию. Пока он пустой.

Итак, код jQuery:

$(document).ready(function(){

$('#article').hide();

        $('#menu a').click(function(){

            var id=$(this).parent().attr('id');

            $('#intro').fadeOut(500);

            $('#article').load('ajax/'+id+'.html').fadeIn(1000);

            return false;

            });

});

Сначала прячем блок “article” с помощью одноименной функции. При клике на ссылку считываем идентификатор родителя (тега li) и заставляем расствориться блок “intro” со скоростью 500 миллисекунд. Потом подгужаем нужный файл из папки ajax, имя файла такое же как идентификатор – для удобства. Ну и наконец заставляем его появиться в течении одной секунды.

Как видите ничего сложного – справится даже начинающий.