Недавно мне пришлось писать одну системку с применением Ajax.
Долго искал скрипты , но все они портили саму ссылку href. Вместо нее требовалось прописать какой то скрипт ,функцию и т.д
Всем известно что если в ссылке прописан не путь а javascript функция либо # то поисковым роботам трудно проиндексировать страницу.
Решение нашел. Использовал библиотеку JQuery , которая оказалась очень удобной.
Сначала подключаем
<script src="jquery-1.3.2.js" type="text/javascript"></script>
Затем пишем скрипт обработки нажатий и функцию обработки запросов и эффектов:
$(document).ready(function(){ $(".ajax").live("click", function() { var url=$(this).attr('href'); TB_show(url); this.blur(); return false; }); }); function TB_show(url) { try { $("#loader").ajaxStart(function() { $(this).fadeIn("slow"); }); $("#test").ajaxStart(function() { $(this).fadeOut("slow"); }); $(".intro").ajaxStart(function() { $(this).fadeOut("slow"); }); $("#central").ajaxStop(function(){ $(this).hide();}); $("#test").load(url, function(){ $("#loader").ajaxStop(function(){ $(this).fadeOut("slow"); }); $("#test").fadeIn("slow"); }); } catch(e) { alert( e ); } }
Теперь попытаюсь разьяснить смысл работы.
Почему я использовал .live а не .click ? При использовании .click в данных подгруженных аяксом не будут работать ссылки с аяксом. Точнее они работать то будут но при этом как обычная ссылка. Другими словами работа была бы такая.
Нажал подгрузился на аяксе, нажал на ссылку в подгруженном страница перегружается как по обычной ссылке без Ajax.
Далее опишу непосредственно часть кода подгружаемую содержимое:
$("#test").load(url, function(){ $("#loader").ajaxStop(function(){ $(this).fadeOut("slow"); }); $("#test").fadeIn("slow"); });
.load подгружает содержимое в определенный блок , в нашем случае это блок с id test (#test)
Функция
$("#test").fadeIn("slow");
Осуществляет плавное появление этого блока после того как в него загружено содержимое посредством AJax.
Далее код не столь важен, он всего лишь скрываю картинку лоадер, после того как ajax запрос выполнен.
$("#central").ajaxStop(function(){ $(this).hide();});
Т.о в данном коде показано как осуществляется работа с ajax и jquery , при этом сохраняя целостность ссылки.
Преимущество данного метода в том что пользователи с отключенным javascript-ом и поисковые роботы смогу с легкостью переходить по ссылкам.
Предлагаю посетить информационный ресурс ангарск, который содержит много справочной информации.
Для всех любителей спорта, спортивный еженедельник. Самые интересные новости, и статьи из мира спорта.
прочел. поучительно для новичков.
п.с. верни на места недостоющие буквы. я не знал что ты буквоед))))
Исправил. Спасибо!