Подгружаем контент

Давно искал урок как можно подгрузить какую-то информацию без перезагрузки страницы... и тут пришел на помощь ajax.

Итак в этой статье учимся подгружать контент на сайте, а также учим основы jQuery. После прочтения статьи вы научитесь составлять несложные скрипты на аяксе. Прежде чем получил такой результат попробывал много меннее удачных вариантов. Где-то скрипт работал не корректно, где не менялся URL в строке браузера, где-то на код просто не взглянуть и т.д.

Если что не так написал, то прошу поправить. Для начала нам нужно скачать AJAX-библиотеку JQuery. Сделать это можно здесь. Затем копируем библиотеку ajax в папку с сайтом куда-нибудь и подгружаем ее. Для этого между пишем следующее
<script src="...путь.../jquery.js" type="text/javascript">
Теперь пишем сам ajax скрипт для подгрузки контента (его можно вынести во внешний файл)

<script type="text/javascript" language="javascript">

$(document).ready(function() { // ждем пока документ не будет готов

var hash = window.location.hash.substr(1);
var href = $('что-то пишем').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});

$('#menu a').click(function(){ //скрипт будет срабатывать на все ссылки в <div id="menu"> по щелчку левой кнопкой
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1,loadContent); // див с id="content" прячется

$('#load').remove();
$('#navbarright').append('<span id="load"></span>');
$('#load').show(200); // отображаем анимацию ожидания
window.location.hash = $(this).attr('href').substr(0,attr('href').length-0); //подставляем новый url для веб страницы
function loadContent() {
$('#hour').hide(0);
$('#content').load(toLoad,'',showNewContent()) //загружаем содержимое новой страницы <div id="content">, остальное остается неизменным
}
function showNewContent() { //отображаем новый блок
$('#content').show(999999);

}
function hideLoader() { //прячем анимацию
$('#load').fadeOut(0);
}
return false;
});
});

</script>

Написал, конечно, как всегда )), но кто хочет тот разберется или пишите мне я помогу привернуть данный скрипт. С помощью данного скрипта страница больше не будет перезагружаться, url в строке браузера меняется корректно, не надо повторно загружать повторяющиеся части страницы (хоть они обычно и кэшируются). Думаю вам будет полезен данный ajax скрипт на jQuery.

Тэги: ajax, Мастерская, Сodding

Связанные веб записи

• Экономим на интернете
• Создаем свой виджет для WordPress
• Скачиваем музыку или видео с контакта
• Делаем LightBox
• Вы еще не пользуетесь RSS?

Суббота, 6 Сентябрь, 2008 в 22:36 | Мастерская | Подпишитесь на рассылку страницы