Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> как сделать на AJAX подгрузку данных по клику? кликнул - подгрузились данные с сервера 
:(
    Опции темы
ochnev
Дата 12.9.2008, 20:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 253
Регистрация: 27.3.2006

Репутация: нет
Всего: нет



Я полный чайник в AJAX. Прошу совета, - ссылку на краткий туториал или на пример. Изучать полностью AJAX пока нет времени.

Нужно сделать так, чтобы по клику по ссылке обновлялась область на странице, и там появлялись некие нетривиальные данные, отдаваемые с сервера.

Более развёрнутый вопрос:
На странице список таблиц с данными. Грузятся они долго.
Хочу вместо них сделать список ссылок. При клике на ссылку обновляется область под той ссылкой. В той области подгружаются соответствующие данные с сервера (показывается соответствующая таблица с данными). Кликаем по другой ссылке - под ней подгружаются другие данные.
Как такое сделать?

P.S.:
Интранет-сайт сделан на Java (JSP, servlets). Возможно, есть какая-то простая в использовании библиотека AJAX-тэгов.

PM MAIL   Вверх
bars80080
Дата 12.9.2008, 20:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



послушайте, что за вопросы с другого конца? почему по клику? какая разница как? для вас сначала надо просто реализовать сам скрипт аякса. вы нашли какой-нибудь?


если нет, то вот простейший и без всяких наворотов:
Код
<script type="text/javascript">
function ajax_s(x) {
    var dpar = '<? echo time(); ?>'; // случайный параметр, который меняется при каждой загрузке страницы - для того чтобы сделать ссылки уникальными
    if(window.XMLHttpRequest) {
        try { req = new XMLHttpRequest(); } 
        catch (e){}} 
    else if(window.ActiveXObject) {
        try { req = new ActiveXObject('Msxml2.XMLHTTP'); } 
        catch (e){ req = new ActiveXObject('Microsoft.XMLHTTP'); }}
    req.onreadystatechange = function() { 
        if(req.readyState == 4) ajax_o(req.responseText); }     
    req.open("GET", 'http://site.ru/script.php?query=' + encodeURIComponent(x) + '&dpar=' + dpar, true);
    req.send(''); 
}
function ajax_o(x) {
    var el = document.getElementById('ziel');
    el.innerHTML = decodeURIComponent(x);
}
</script>
 всё!
по клику осталось написать всего лишь:
Код

<input type="button" onclick="ajax_s('param1');" value="push" />
<div id="ziel"></div>
естесственно нужно самому знать какой param1 параметр надо передать, и что формировать на сервере, к примеру таблицу с данными. в данном случае функция обработки данных от сервера - просто вставляет в див всё что приходит
PM MAIL WWW   Вверх
ochnev
Дата 12.9.2008, 22:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 253
Регистрация: 27.3.2006

Репутация: нет
Всего: нет



bars80080,
Спасибо.
Есть вопросы по скрипту:
1) Зачем нужно делать ссылки уникальными (с этим параметром "dpar")? Это специфика PHP?
2) В следующей строке:
Код

req.send('');

почему именно пустая строка передаётся в send()?

PM MAIL   Вверх
bars80080
Дата 12.9.2008, 23:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



1. чтобы страницы не кэшировались браузером, а то вроде даже при полном обновлении страницы, ссылки остаются те же и при вторичном запросе пользователь не увиден реальные данные (пхп тут не причём, и это надо делать либо на сервере /проще/, либо хотя бы средства js давать случайное число)
2. передача идёт get-запроса, все данные итак уже в адресе, поэтому дополняем пустой строкой функцию посылки
PM MAIL WWW   Вверх
ksnk
Дата 12.9.2008, 23:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



bars80080, 
    var dpar = '<? echo time(); ?>';

 smile Совершенно уникальный способ получения разных ссылок. Ajax, вообще-то предназначен для работы с сервером без перезагрузки страницы, таким образом это самый параметр dpar будет всегда ОДИНАКОВЫЙ до тех пор, пока юзер не нажмет на "обновить", а он не нажмет если приложение правильно спланировано ...




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
bars80080
Дата 13.9.2008, 08:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



да, именно так. но если даже он нажмёт ctrl+f5, то без этого параметра ссылки всё равно вернут закэшированное содержание. т.е. он нужен исключительно ради нормальной работы браузера
PM MAIL WWW   Вверх
ksnk
Дата 13.9.2008, 10:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



bars80080, Ну ладно, вот , к примеру php породил var dpar =1234567; Юзер пару раз выполнил без презагрузки страницы ajax_s('wanadrink'). Во второй раз функция породит запрос по совершенно такому-же адресу smile И броузер получает моральное право вывалить закешированный результат...

Лучше писать что-то вроде var dpar =Math.rand;, а можно пользоваться не 'GET', а 'POST' в этом случае все адекватные броузеры вывод не кешируют и пляски с бубном вокруг урля становятся ненужными.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
bars80080
Дата 13.9.2008, 11:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



ksnk, .rand(), .seconds() это конечно интересно, но я стараюсь на действия js отдавать меньше. 
во-первых, мне не нужно, что бы каждый раз оно возвращало результат, здесь я юзал аякс для еженедельно обновляемых данных, а иногда и ежедневно. пусть кэширует
во-вторых, мне надо, чтобы если уж пользовательно принудительно решился обновиться через ctrl+f5, то пусть уж обновляются и эти ссылки. чего не происходит, если не указывать доп.параметр
в-третьих, что касается адекватных браузеров и метода POST, то как следует из фразы, существет возможность наличия неадекватных браузеров. зачем мне лишние приключения

итог: такая конструкция делает со 100% вероятностью именно то, что мне нужно.
PM MAIL WWW   Вверх
Nigel
Дата 14.9.2008, 10:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


познаю мир
**


Профиль
Группа: Участник
Сообщений: 515
Регистрация: 20.11.2007

Репутация: 1
Всего: 19



bars80080, тебе о другом говорят. То что кэшироваться будет. Если тебе это подходит, то здорово, но не всегда оно бывает нужнымsmile
PM MAIL   Вверх
bars80080
Дата 14.9.2008, 11:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



Nigel, а я объясняю, что мне надо чтобы кэшировалось, но при этом полностью отвечало настройке браузера. 

понятное дело, что каждый заказывает ту музыку, которая ему нужна или нравится. данным способом выставления доп.параметра, я возвращаю браузер в режим нормальной работы, когда комбинация ctrl+f5 (третий раз уже её повторяю) начинает действовать как надо на пространстве всей страницы.

то есть я предлагаю стандартный вариант, который следует использовать по умолчанию. а вот если тебе уже надо полностью кэшировать или никогда не кэшировать, то твоя воля.
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1840 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.