 |
Форум вебмастеров на AlfaSpace.NET / Создание сайта / Ajax и jquery.com - динамическая загрузка страниц. Мини-урок |
| Автор | Сообщение |
| SpiriTzzz Темный джедай  1382 |
# Дата: 9 Дек 2007 16:38 ° Поправил: SpiriTzzz Многие видели на разных сайтах как по нажатию на ссылку вся страница не перегружается, а идет динамическая загрузка чего либо. Всё это стало возможно благодаря новомодному Ajax. Есть множество java фреймворков, облегчающих жизнь при работе с ним. Самые популярные - это mootools, prototype и мой любимый jquery. Сегодня я расскажу и покажу мини-пример, показывающий как загрузить содержимое страницы page2 в страницу page1 без перезагрузки последней. Поехали!. (листинг каждого файла я разобью на отдельные посты) Скачать этот пример с пояснением можно вот тут (в библиотека jq версии 1.2.1, последняя на данный момент) скачать плагины, почитать доки, скачать либу можно на офф. сайте (c) SpirITzzz / спасибо dmitriid. |
| SpiriTzzz Темный джедай 1382 |
# Дата: 9 Дек 2007 16:38 ° Поправил: SpiriTzzz page1.html <html>
<head>
<title>JQ - page1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
function loadpage(div_id){
div_id.find('a').click(
function(){
//проверяем, не является ли наша ссылка внешней ссылкой.
//это можно сделать и другим способом, средствами самого JQ,
//но лично мне удобнее так.
if ($(this).attr("href").indexOf("http://") == -1) {
//проверяем, не присвоен ли ссылке класс, в данном случае "link_no_j
q"
if ($(this).attr("class") != "link_no_jq") {
var url = $(this).attr('href');
//прячем наш див
div_id.hide('slow',
function(){
//очищаем содержимое нашего дива
div_id.empty();
//показываем див с анимацией
$("#loading_animation").show();
//загружаем страницу, указанную в атрибуте href
//в нашем случае это page2.html
$.get(url,{},
function(response){
//прячем див с анимацией
$("#loading_animation").hide();
//всовываем содержимое страницы page2.html в наш див
//и показываем её, используя анимацию fadeIn
div_id.append(response).fadeIn('slow');
//в конце не забываем вызвать нашу функцию
loadpage(div_id);
}
)
}
);
return false;
}
}
}
);
}
$(document).ready(function(){
//вызываем функцию после того, как дум готов, передав в качестве
//параметра id нашего дива.
var div_id = $('#load_page_2');
loadpage(div_id);
});
</script>
<h1>Текст. Тут много текста. Эта часть изменяться не будет</h1>
<div id="loading_animation" style="display: none; color: red; font-size: 36px;">
<!-- Невидимы див, который будет появляться только при загрузке страницы page2.h
tml-->
Loading... Wait...
</div>
<div id="load_page_2" style="border: 1px dashed red;">
А вот в этот див мы будем загружать <b>page2.html</b><br>
Причем прописывать класс для ссылки не придется, главное что бы она была в преде
лах данного дива.<br>
Даже если у вас отключен javascript, все ссылки будут работать как обычные<br>
<a href="page2.html">А вот и ссылка на страницу page2.hrml, загрузится в этот ди
в</a><br>
<a href="page3_blank.html" class="link_no_jq">Ссылка с классом link_no_jq. Откро
ется в этом же окне как обычная</a><br>
<a href="http://spiritzzz.com/" target="blank">Внешняя ссылка, откроется в новом
окне</a>
</div>
<hr>
<br>© <a href="http://spiritzzz.com/" target="blank">SpirITzzz.com.</a> icq
: 204742439. Спасибо за помощь <a href="http://dmitriid.com/" target="blank">dmi
triid.com</a><br>
Доки и большое количество примеров на сайте <a href="http://jquery.com/" target=
"blank">jquery.com</a>
</body>
</html> |
| SpiriTzzz Темный джедай 1382 |
# Дата: 9 Дек 2007 16:41 page2.html <font size="36">СТРАНИЦА 2</font><br> <img src="image.jpg" alt="Картинка"> |
| SpiriTzzz Темный джедай 1382 |
# Дата: 9 Дек 2007 16:42 page3_blank.html <html> <head> <title>JQ - page3</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <font size="72">Ссылка на эту страницу имела класс link_no_jq, поэтому она откры |
| acsid Alfa Guru  2436 |
# Дата: 10 Дек 2007 00:29 ° Поправил: acsid SpiriTzzz Очень интересная тема.Молодец! Хороший наглядный пример. Чуть поздже покажу один способ вызова пхп функции, без перезагрузки страницы  Причем можна даже данные в эту функцию передать через ajax |
| SpiriTzzz Темный джедай 1382 |
# Дата: 10 Дек 2007 00:36 ° Поправил: SpiriTzzz acsid Спасибо. А способ - показывай, интересно все таки  я еще с человеком одни беседу веду по поводу того, как можно обойти недочет, что история не остаётся при таком посещении и не кэшируется. |
| Андрей Алексеевич  2123 |
# Дата: 10 Дек 2007 01:09 SpiriTzzz Мы уже делали решение с обходом истории и рабочей кнопкой "назад". Суть - вызывается событие назад из ифрейма в котором выполняется событие "назад" через ajax. Если будет время опишу поподробнее. |
| SpiriTzzz Темный джедай 1382 |
# Дата: 10 Дек 2007 01:23 Андрей отпиши, очень интересно буду благодарен |
| Михаил Ушел в бан)  2572 |
# Дата: 11 Дек 2007 10:33 Андрей Куда же пропал) Про кнопочку "назад" то расскажешь поподробнее? А то тут как раз делать начинаю навигацию. |
| Андрей Алексеевич 2123 |
# Дата: 11 Дек 2007 21:08 Щас доберусь до этого. Завал. |
| SpiriTzzz Темный джедай 1382 |
# Дата: 20 Дек 2007 19:52 Андрей все еще завал? |
| SpiriTzzz Темный джедай 1382 |
# Дата: 23 Дек 2007 21:55 это, как его, up =) |
| maxtat pda killer  1489 |
# Дата: 27 Фев 2008 15:49 Андрей Ну долго там еще ссылку назад ждать-то? |
| Miralex Участник 192 |
# Дата: 29 Фев 2008 15:19 Всем привет. Давно меня небыло уже, решил в гости заскочить. SpiriTzzz, почему ваш выбор пал на технологии Ajax? Зачем этот геморрой с парсингом xml? Почему не использовать Ajaj, раз вы упомянули JQUERY? |
| persei Участник  490 |
# Дата: 29 Фев 2008 20:59 а какую технологию предлагаете вы?) |
| SpiriTzzz Темный джедай 1382 |
# Дата: 1 Мар 2008 00:15 Miralex да, какую? |
| Miralex Участник 192 |
# Дата: 1 Мар 2008 10:01 ° Поправил: Miralex AJAJ (GetJson) Для PHP есть библиотека: PHP_JSON. (http://mike.teczno.com/JSON/doc/) Например передаем масcив в яву типа $json->encode($myarray); И в яве, после успешного выполнения GetJson, имеем готовый обьект. |
| maxtat pda killer 1489 |
# Дата: 1 Мар 2008 12:39 Это что-то наподобе XAJAX? Какая разница которуюбиблиотеку использовать, если все они в общем делают одно и то же |
![[Valid RSS]](valid-rss.png "Validate my RSS feed")