AJAX - одновременная подгрузка текста и картинки из разных мест

kvg95 · 28 Сен 2008

AJAX - одновременная подгрузка текста и картинки из разных мест

Народ, приветствую.

Помогите разобраться с одной проблемкой.
Есть у меня скрипт AJAX подгрузки текста. Конечно, без перезагрузки страницы.

Код:

<html>
<head>
<title></title>
<script type="text/javascript" src="java/ajax.js"></script>
<script type="text/javascript" src="java/ajax-dynamic-content.js"></script>
</head>
<body>
<table width="300" border="1" cellspacing="2" cellpadding="2" bgcolor="#C0C0C0">
<tr>
	<td colspan="2" align="center">
		<a href="#" onClick="ajax_loadContent('news1','files/komm_1.html');return false"><img src="files/1.jpg" alt="снимок 1" width="64" height="64" 

border="0"></a>&nbsp;
		<a href="#" onClick="ajax_loadContent('news1','files/komm_2.html');return false"><img src="files/2.jpg" alt="снимок 2" width="64" height="64" 

border="0"></a>&nbsp;
		<a href="#" onClick="ajax_loadContent('news1','files/komm_3.html');return false"><img src="files/3.jpg" alt="снимок 3" width="64" height="64" 

border="0"></a>&nbsp;
	</td>
</tr>
<tr>
	<td width="150" height="50" align="center"><div id="news1"></div></td>
	<td width="150" align="center">сюда надо одновременно подгружать картинки 1, 2 или 3</td>
</tr>
</table>
<script type="text/javascript">
ajax_loadContent('news1','files/komm_1.html');
</script>
</body>
</html>

Надо, чтобы комментарий подгружался вместе со снимком.
Причём (это важно) подгружаться на страницу они должны из разных источников (снимок - отдельно, коммент - отдельно).
Не могу понять, как прописать два эти события...
Мож, кто подскажет?
Заранее признателен.

З.Ы. При необходимости могу подогнать весь скрипт (если у кого желание будет покурочить его у себя)

kruglov · 28 Сен 2008

Картинки не надо подгружать аяксом, он не для этого. Их надо подгружать тегами <img src="...">

kvg95 · 28 Сен 2008

Автор оригинала: kruglov
Картинки не надо подгружать аяксом, он не для этого. Их надо подгружать тегами <img src="...">

это была шутка?
поверьте, о теге <img src="..."> мне известно...

и подгрузку картинок без перезагрузки страницы мне тоже приходилось сделать
разговор здесь идет об ОДНОВРЕМЕННОЙ подгрузке текста и картинки из РАЗНЫХ источников в РАЗНЫЕ части страницы

kruglov · 28 Сен 2008

Проще надо быть, мне ваша проблема ну совсем непонятна.

Я не понял, почему вы из одного места не можете подгрузить комментарий и <img src>, а из другого места уже браузер без вас сам картинку подгрузит. И что значит "одновременной" - чтоб они строго параллельно ползли что ли?

kvg95 · 28 Сен 2008

Автор оригинала: kruglov
Проще надо быть, мне ваша проблема ну совсем непонятна.

хорошо, попробую...

только задача, возможно, нестандартная

итак:
- при клике на превьюшку без перезагрузки страницы должны появиться некая картинка и текст.
- текст (большой блок) при этом кладётся в ограниченную область страницы (со своей прокруткой), а картинка - вне этой области (в этом как раз и засада)

Пробовал загружать картинку вместе с текстом, а потом смещать её методами css - картинка не может выйти за пределы области текста - скрывается из виду

Я не понял, почему вы из одного места не можете подгрузить комментарий и <img src>, а из другого места уже браузер без вас сам картинку подгрузит. И что значит "одновременной" - чтоб они строго параллельно ползли что ли?

под одновременностью я имел в виду следующее - есть пары (картинка и текст), которые должны подгружаться вместе, но не содержаться в одном файле.

если что-то ещё коряво объяснил, спрашивайте - отвечу

-~{}~ 28.09.08 17:02:

вдруг поможет
http://slil.ru/26186631
здесь лежит весь скрипт.

если есть Apache с PHP 5, то можете глянуть в деле

kruglov · 28 Сен 2008

Насколько я понимаю технологию ajax:

1. Мы шлем запрос на сервер.
2. Через некоторое время в некоторой переменной появляется ответ от сервера и запускается событие "догрузилось".
3. В обработчике этого события мы делаем с текстом в переменной что угодно.

Вы пишете его сразу куда-то в контейнер. А его можно обработать и записать, к примеру, по частям в два разных контейнера.

Gas · 28 Сен 2008

kvg95

как прописать два эти события...

событие у тебя одно - показ комментария, а действия 2.

Ты по отдельности можешь показать картинку (если ты знаешь её урл, то как и сказал kruglov, ajax тут не нужен) и отдельно загрузить текст?

kvg95 · 28 Сен 2008

Автор оригинала: Gas
kvg95

событие у тебя одно - показ комментария, а действия 2.

на один клик - два события (показ комментария И картинки)
их нельзя брать из одного файла и вставлять одним файлом - причину я рассказал чуть выше

Ты по отдельности можешь показать картинку (если ты знаешь её урл, то как и сказал kruglov, ajax тут не нужен) и отдельно загрузить текст?

Без аякса можно организовать подгрузку контента (текста, картинок) без перезагрузки страницы?

Народ, разговор не идёт о банальном формировании страницы html...

kruglov · 28 Сен 2008

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

Это не причина, это блажь либо неопытность...

сформируйте вот такой html:
<img src="картинка">SOMESUPERDELIMETRRR<p>описание</p>, порежьте ее по получению на 2 части с помощью .split() - и пишите в разные <divы>

kvg95 · 28 Сен 2008

Автор оригинала: kruglov
Насколько я понимаю технологию ajax:

1. Мы шлем запрос на сервер.
2. Через некоторое время в некоторой переменной появляется ответ от сервера и запускается событие "догрузилось".

3. В обработчике этого события мы делаем с текстом в переменной что угодно.

Нажмите для раскрытия...

Вы пишете его сразу куда-то в контейнер. А его можно обработать и записать, к примеру, по частям в два разных контейнера.

Нажмите для раскрытия...

А можно с этого момента чуть подробнее, применительно к моей задаче?

kruglov · 28 Сен 2008

К вашей задаче или к вашим чужим ajax-библиотекам, с которыми непонятно как обращаться?

Ладно, вот мой любимый ajax (ВЕСЬ):

Код:

function ajax(url, data, onload){
	var req = window.XMLHttpRequest?
		new XMLHttpRequest() :
		new ActiveXObject("Microsoft.XMLHTTP");
	if (!req) return false;
	req.onreadystatechange = function () {
		if (this.readyState == 4){
			onload (this.responseText);
		}
	}

	req.open("POST", url, true);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset='+document.charset);
	req.send(data);
	return true;
}

Использование:

Код:

ajax("/address.php","a=1&b=2",function(txt){
	alert(txt.split("PREVED"))
})

Ну и пускай /address.php выдает 1PREVED2

-~{}~ 28.09.08 18:07:

p.s. Это ajax для "положить в корзину", поэтому он работает по POST, чтоб кэширования не было и вообще. У вас описания, они должны кэшироваться, так что можно использовать GET, тогда заголовки слать не надо, данные тоже - req.send(null)

kvg95 · 28 Сен 2008

задачка решена, правда, немного иначе
всем спасибо

HaZ · 28 Сен 2008

Куда картинка-то кладется ? Делайте по 2 запроса - отдельно для картинки, отдельно для текста - в разные дивы
Для вас это будет проще чем делить один запрос на 2 части и обрабатывать по тдельности

kvg95 · 28 Сен 2008

решение у меня такое

onClick="ajax_loadContent('news1','files/komm_1.html');ajax_loadContent('news2','files/komm_4.html')

ajax_loadContent('news1','files/komm_1.html');
ajax_loadContent('news2','files/komm_4.html');

<td width="150" height="50" align="center"><div id="news1"></div></td>
<td width="150" align="center"><div id="news2"></div></td>

kruglov · 28 Сен 2008

Ура, подтянулись неофиты с идеями, как лучше задосить свой сервер на пустом месте.

-~{}~ 28.09.08 18:47:

p.s. Ух ты, их двое.

HaZ · 28 Сен 2008

kruglov
Смешно, особенно если учесть, что автор судя по всему плохо знаком с JS и не понимает как разбить текст.
И ведь только написал в другой темы про подобные посты - пример пожаловал тут же.

У нас серверы оказываются давно падают из-за двух запросов вместо одного.

Crys · 28 Сен 2008

Ладно, вот мой любимый ajax (ВЕСЬ):

А статус не надо проверять? о_О

kruglov · 28 Сен 2008

Смешно, особенно если учесть, что автор судя по всему плохо знаком с JS и не понимает как разбить текст.

А уж мне как смешно, автор мне полдня по-всякому показывал нетривиальность и значимость своей задачи, а потом выбрал самый, скажем вежливо, неоптимальный способ. Вот и думай после этого - помогать людям или сразу посылать.

Как разбить текст - я ему 2 раза написал для разных уровней знания JS.

У нас серверы оказываются давно падают из-за двух запросов вместо одного.

То есть вы считаете нормальным удвоить количество запросов из-за того, что автор плавает в JS. Я не знаю, что сказать.

-~{}~ 28.09.08 19:25:

Crys

А статус не надо проверять? о_О

Не, можно проверить что угодно, предусмотреть реакции на 404, на 403, на 500 и Connection Timeout, добавить загрузку файлов через iframe, поддержку 5-ых IE и Оперы, можно и 4-го Netscape...

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

А надо только ajax_loadContent('news1','files/komm_1.html') запускать

Crys · 28 Сен 2008

Не, можно проверить что угодно, предусмотреть реакции на 404, на 403, на 500 и Connection Timeout, добавить загрузку файлов через iframe, поддержку 5-ых IE и Оперы, можно и 4-го Netscape...

Я же тебе не говорил, что у тебя функция только ассинхронно работает. А вот серверные ошибки - могут быть. Особенно, когда ддосят сервер (двумя запросами вместо одного). И из-за того, что нет проверки статуса - результат будет неправильный.
В общем, коли используешь ошибочный код и считаешь, что это правильно и не нужна проверка на ошибки - это твое право. Но не надо такое советовать.

kruglov · 28 Сен 2008

Предложите свой вариант вкупе с реакцией на статус. Заодно, кстати, в качестве ошибок могут быть "Отвалился MySQL-сервер". Какой, говорите, статус у такого события?

Я не считаю, что "Простите, сейчас ваш запрос не может быть обработан" или "Произошла какая-то ошибка, обновите страницу" лучше "Server Error 502".

AJAX - одновременная подгрузка текста и картинки из разных мест

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

может по одной?

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Двинутый новичок

Новичок

Двинутый новичок

Новичок