Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2012, 19:43
Аватар для papochka
Интересующийся
Отправить личное сообщение для papochka Посмотреть профиль Найти все сообщения от papochka
 
Регистрация: 29.03.2012
Сообщений: 10

Ajax загрузка контента (не вопрос)
Вдруг кому пригодится. Или кто предложит лучше...

Что предлагаю? Загрузку фрагмента страницы с помощью $.ajax - вместо load()
Подробнее Кликом на ссылку подгрузить в заранее оговоренный div контент любого div'a с другой страницы того же сайта.
Особенности CSS не предлагаю - на вкус и цвет. Ссылка, кликать на которую, должна быть в формате
<a class="loot" href="page.php" rel="victim"></a>
где page.php - адрес страницы-"донора" (откуда будем выдергивать div), а victim - ID нужного div'a (который конечно может быть любым - главное, чтобы вообще он был и чтобы он совпадал в атрибуте rel ссылки и в атрибуте id элемента-донора).
В примере фрагмент подгружается в div id="thief".

Кому нужен этот велосипед, вместо простого load()? Тем, кто столкнулся с проблемой конфликтов $.ajax и load - подробнее здесь

Код скрипта:

$('.loot').live("click", function(){
 var loaderImg = "<img src='loader.gif' alt='загрузка...' />"; // картинка до загрузки
 var url = $(this).attr("href"); // получаем значение атрибута href ссылки 
 var rel = 'div#'+$(this).attr("rel"); // получаем значение атрибута rel ссылки
 $("div#thief").html(loaderImg).html(function(){
 			var a=loaderImg;
			$.ajax({ // запрашиваем данные со страницы-донора
				url:url,
				dataType:"html",
				async:false,
				success:function(b){a=$(b).find(rel)},  // извлекаем html из нужного элемента (в примере <div id="victim">)
				error:function(){alert("Ajax!Ошибка.")}
				});
				return a
 });
 $("div#thief").fadeIn('fast'); // отображаем блок, если он был скрыт
 return false;
});


Для желающих поворчать: не надо ворчать, лучше предлагайте лучше.
Или оптимизируйте, - ибо я последнее время мало сплю (см.никнейм)

Тем, кому нужен метод load - см. здесь (внизу первого поста).

Спасибо за внимание.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2012, 20:13
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

Если не ошибаюсь, то "return a" (14 строка) возвратит результат до завершения работы ajax запроса. Следовательно код не будет работать так как нужно.
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2012, 08:00
Аватар для papochka
Интересующийся
Отправить личное сообщение для papochka Посмотреть профиль Найти все сообщения от papochka
 
Регистрация: 29.03.2012
Сообщений: 10

тем не менее это работает.
странные комментарии... неужели здесь практикуется публиковать коды, не проверив их работоспособность? вы раните меня в самое сердце...

зы: только вот похоже html(loaderImg) здесь пятая нога... ну и loaderImg в принципе.

Последний раз редактировалось papochka, 30.03.2012 в 08:05.
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2012, 09:10
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

там всё нормально, запрос ведь синхронный (async:false )

можно сделать его асинхронным вот так :

var loaderImg = '<img src="loader.gif" alt="загрузка..." />';

$('.loot').live("click", function() {
    var 
        $this = $(this);
      
    $.ajax({ 
        url: $this.attr("href"),
        dataType: "html",
        context: $("#thief").html(loaderImg),
        success: function(b) {
            b = $(b).find('#'+$this.attr('rel'));
            this.html(b).fadeIn('fast')
        }
    });
           
    return false;
});​
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2012, 11:04
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

melky,
Ой, точно. Не заметил "async:false".
Тогда всё работает
Я правда никогда не использовал "async:false" и не рекомендую использовать. ЗЫ Это лично моё мнение.
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2012, 11:54
Аватар для papochka
Интересующийся
Отправить личное сообщение для papochka Посмотреть профиль Найти все сообщения от papochka
 
Регистрация: 29.03.2012
Сообщений: 10

atlantis,
melky (спасибо),
не втему, но раз уж вы об этом заговорили - можно поделиться человеческим разъяснением преимущества синхронного запроса перед асинхронным или ссылки на такое человеческое разъяснение. До сих пор не врублюсь что такое хорошо, а что такое плохо, кроме того, что при синхронном обещают зависание браузера
Чем плоха идея "занятся чем-то другим во время запроса"? Имеется в виду, что асинхронный может вести себя неадекватно при хреновом соединении? или что?

Последний раз редактировалось papochka, 30.03.2012 в 12:01.
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2012, 12:03
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 03.12.2009
Сообщений: 579

Сообщение от papochka Посмотреть сообщение
atlantis,
melky (спасибо),
не втему, но раз уж вы об этом заговорили - можно поделиться человеческим разъяснением преимущества синхронного запроса перед асинхронным или ссылки на такое человеческое разъяснение. До сих пор не врублюсь что такое хорошо, а что такое плохо, кроме того, что при синхронном обещают зависание браузера
Чем плоха идея "занятся чем-то другим во время запроса"? Имеется в виду, что асинхронный может вести себя неадекватно при хреновом соединении? или что?
синхронный: отправили запрос -> ждем ответа и ничего не делаем -> пришел ответ —продолжаем.

асинхронный: отправили запрос -> делаем что хотим -> пришел ответ — обработали.
__________________
С моих слов записано верно.
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2012, 16:08
Аватар для papochka
Интересующийся
Отправить личное сообщение для papochka Посмотреть профиль Найти все сообщения от papochka
 
Регистрация: 29.03.2012
Сообщений: 10

Видимо превосходство синхронного запроса таится именно в
Цитата:
и ничего не делаем
, что по сравнению с
Цитата:
делаем что хотим
даже для меня существенно слаще...

Я не хочу много зарабатывать, я хочу много получать!
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2012, 16:39
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 03.12.2009
Сообщений: 579

Сообщение от papochka Посмотреть сообщение
Видимо превосходство синхронного запроса таится именно в , что по сравнению с даже для меня существенно слаще...

Я не хочу много зарабатывать, я хочу много получать!
всё зависит от цели

бывает, что на одной странице пять-шесть ajax подгрузок, и тогда синхронный запрос — вообще ни вариант

а в целом, оба варианта не лучше и не хуже друг друга
__________________
С моих слов записано верно.
Ответить с цитированием
  #10 (permalink)  
Старый 30.03.2012, 19:57
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от papochka Посмотреть сообщение
atlantis,
melky (спасибо),
не втему, но раз уж вы об этом заговорили - можно поделиться человеческим разъяснением преимущества синхронного запроса перед асинхронным или ссылки на такое человеческое разъяснение. До сих пор не врублюсь что такое хорошо, а что такое плохо, кроме того, что при синхронном обещают зависание браузера
Чем плоха идея "занятся чем-то другим во время запроса"? Имеется в виду, что асинхронный может вести себя неадекватно при хреновом соединении? или что?
синхронный запрос замораживает интерфейс на время совершения (будет такой тормозок, как в играх), асинхронный - нет
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Логика динамической подгрузки контента через Ajax TheKeeeper AJAX и COMET 6 21.03.2012 21:16
Вопрос по Ajax и подгрузки контента LeBron jQuery 0 29.02.2012 21:37
AJAX загрузка CSS в IE addam jQuery 0 26.07.2011 07:09
Загрузка контента без перезагрузки страницы vah-smile AJAX и COMET 3 30.03.2011 15:37
загрузка файла по принципу ajax neadekvat Общие вопросы Javascript 2 12.05.2009 21:23