И волки сыты и овцы целы

Недавно мне пришлось писать одну системку с применением 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-ом и поисковые роботы смогу  с  легкостью переходить по ссылкам.

Предлагаю посетить информационный ресурс ангарск, который содержит много справочной информации.

Для всех любителей спорта, спортивный еженедельник. Самые интересные новости, и статьи из мира спорта.

Поделиться в соц. сетях

Другое из текущей категории:

2 Replies to “И волки сыты и овцы целы”

  1. прочел. поучительно для новичков.
    п.с. верни на места недостоющие буквы. я не знал что ты буквоед))))

Добавить комментарий