Jan 16

jQuery, $.getJson, $.ajax и все, все, все… (стать первым, кто оценил!)  Loading ...

До этого я работал только с Prototype, особо jQuery не пользовался, хотя и использовал пару вполне успешно.

В проекте, в котором я сейчас работаю, все построено на Zend Framework + JQuery. Соответственно приходиться сталкиваться теперь довольно часто с jQuery.

Вчера мне понадобилась там одна фишка: нужно было получить данные через Ajax запрос и дальше сделать с ними некоторые манипуляции (обрезание строки и т.д, не суть важно) и вывести клиенту.

Недолго думая, была сделана такая конструкция:

$.getJSON(’<?=$this->newsLetterUrl(’content-start’)?>/’,
 { load_eds_data: 1, idpage: $(’#eds_ref-key’).val(), ajax: ’true’},
 function(data) {
 subTitle = ’Dates: ’+data.date_text + ’ Venue: ’ + data.xvenue;
 });

Удивление наступило позже, когда я понял, что переменная subTitle не видна после этого и не доступна.

Полез в гугл, начал искать, что ж это за фигня получается, что нельзя в переменную записать данные после ajax запроса.

Оказалось, что проблема … в асинхронности запроса $.getJson и для того, чтобы получить нужное мне, конструкцию надо заменить на такую:

$.ajax({
 async: false,
 data: { load_eds_data: 1, idpage: $(’#eds_ref-key’).val(), ajax: ’true’},
 dataType : «json»,
 url: ’newsLetterUrl(’content-start’)?>/’,
 success: function(data) {
 subTitle = ’Dates: ’+data.date_text + ’ Venue: ’ + data.xvenue;
 }
});

указав таким образом, что нам нужен неасинхронный запрос. Теперь переменная subTitle видна поза данной конструкцией! И ее можно использовать дальше, как угодно.

Самое интересное, что в prototype таких проблем у меня вообще не возникало. Видимо связано с особенностями реализации библиотеки.

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

Запись опубликована 16.01.2010 в 16:37 в следующих рубриках: AJAX, JavaScript, Web2.0, Вэб, мои работы. Вы можете отслеживать обсуждение записи, используя ленту RSS 2.0. Вы можете оставить комментарий, или трекбек с Вашего сайта.

Добавить в:

Похожие заметки

• Как “подружить” Prototype и jQuery в одном проекте
• Решил внести свою лепту в развитие опенсорц
• Об областях видимости в языках программирования.
• Мое резюме

Комментарии (16) на “jQuery, $.getJson, $.ajax и все, все, все…”

1. 
   Steward написал:
   16.01.2010 в 17:32
   Цитировать
   
   
   

   Как это она во втором случае видна!?!?!?!?!? О_О
   Да вы что.. локальная переменная функции видна за её пределами!?!?!?!?! Советую срочно писать багрепорт разработчикам… ибо если работает действительно как у вас, то если у меня есть переменная subTitle в коде – то после вызова вашего аякс-запроса её значение будет перезаписано!!!! что в общем-то мягко-говоря очень хреново!!!

2. 
   Станислав Малкин написал:
   16.01.2010 в 17:39
   Цитировать
   
   
   

   Steward:

   Как это она во втором случае видна!?!?!?!?!? О_О
   Да вы что.. локальная переменная функции видна за её пределами!?!?!?!?! Советую срочно писать багрепорт разработчикам… ибо если работает действительно как у вас, то если у меня есть переменная subTitle в коде – то после вызова вашего аякс-запроса её значение будет перезаписано!!!! что в общем-то мягко-говоря очень хреново!!!

   Советую сначала ознакомиться с принципами области видимости в javascript.

   Вот простой пример:

       var a = '';
       function bla() {
           a = 3;
       }
       bla();
       alert(a);
   

   a будет равно 3.

   Удивлены? А я нет. Читайте больше тут – http://freeprogs.kiev.ua/2007/09/ob-oblastyah-vidimosti-v-yazikah-programmirovaniya/

3. 
   Steward написал:
   16.01.2010 в 17:46
   Цитировать
   
   
   

   
var a = '';
function bla() {
a = 3;
}
bla();
alert(a);


   a будет равно 3. Удивлены? А я нет. Читайте больше тут – http://freeprogs.kiev.ua/2007/09/ob-oblastyah-vidimosti-v-yazikah-programmirovaniya/

   Чему тут позвольте удивляться? Тому, что вы объявили глобальное определение переменной и присвоили ей значение в функции? Вы издеваетесь – скажите честно?

   пы.сы.
   и поправьте свой комментарий… не очень приятно когда алерт выскакивает на странице

4. 
   Станислав Малкин написал:
   16.01.2010 в 18:06
   Цитировать
   
   
   

   Steward:

   Чему тут позвольте удивляться? Тому, что вы объявили глобальное определение переменной и присвоили ей значение в функции? Вы издеваетесь – скажите честно?

   Нет, я пытаюсь показать, что вы ошибаетесь. Все работает как и должно.

   Усложняем задачу:

       function bla() {
           a = 3;
       }
       bla();
       alert(a);
   

   пы.сы.
   и поправьте свой комментарий… не очень приятно когда алерт выскакивает на странице

   Поправил

5. 
   Steward написал:
   16.01.2010 в 18:18
   Цитировать
   
   
   

   Да.. моя опять перепутать )) вечно эта видимость в JavaScript ставит меня в тупик… это если в функции перед переменной написать var – она будет локальной… – с этим разобрались ))

   А вот с исходным сообщением непонятно.. в документации чётко написано что callback вызывается когда запрос успешно завершён… __успешно__ и __завершён__ – следовательно синхронный он БЫЛ или нет уже в общем-то пофиг…
   Действительно странная фича (о которой тоже неплохо было бы сообщить разработчикам)

6. 
   Станислав Малкин написал:
   16.01.2010 в 18:29
   Цитировать
   
   
   

   Steward:

   А вот с исходным сообщением непонятно.. в документации чётко написано что callback вызывается когда запрос успешно завершён… __успешно__ и __завершён__ – следовательно синхронный он БЫЛ или нет уже в общем-то пофиг…
   Действительно странная фича (о которой тоже неплохо было бы сообщить разработчикам)

   Снова вы ошибаетесь.

   Это все так, но проблема в том, что $.getJson асинхронен по сути и его выполнение может завершаться позже, чем загрузка всей страницы, он не зависит от загрузки страницы. Поэтому результат не доступен во время загрузки остальной части страницы.

   Все происходит вот так:

   Идет загрузка страницы, доходит до вызова $.getJson, он начинает выполняться, а страница не дожидаясь возврата ее результата – продолжает грузиться дальше, не зная о данных, что вернулись ровно ничего.

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

7. 
   Steward написал:
   16.01.2010 в 18:38
   Цитировать
   
   
   

   Ну вы меня окончательно запутали – я то думал это запрос выполняется для уже загруженной страницы (onClick какой-то кнопки), а оказывается этот скрипт выполняется в процессе загрузки основной страницы и вы ещё аяксом пытаетесь что-то где-то получить (зачем так делать это другой вопрос) .

   Можно было-бы коротко и ясно написать: запрос $.getJSON всегда асинхронный – и всё )) – всё было бы понятно. Естественно что для дальнейшей работы скрипта (текст которого ещё возможно только загружается) необходима доступность и готовность всех предыдущих объявленных данных.

   Только я дурак и всё не понял с самого начала? (это вопрос не к автору )

8. 
   Станислав Малкин написал:
   16.01.2010 в 18:43
   Цитировать
   
   
   

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

   Просто интерпретатор не ожидает возврата результата и выполняет дальнейший кусок кода, запустив асинхронный запрос к серверу.

9. 
   Станислав Малкин написал:
   16.01.2010 в 18:46
   Цитировать
   
   
   

   Кстати из официального мануала по этому методу:

   Keep in mind, that lines after this function will be executed before the callback.

   http://docs.jquery.com/Ajax/jQuery.getJSON

   Это означает, что он всегда асинхронный.

10. 
    Steward написал:
    16.01.2010 в 18:53
    Цитировать
    
    
    

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

    Просто интерпретатор не ожидает возврата результата и выполняет дальнейший кусок кода, запустив асинхронный запрос к серверу.

    Ну по логике.. callback функции как раз и нужны чтобы определить что запрос выполнился полностью.

    А по поводу строчки из мануала – она меня слегка озадачила – нельзя что ли было написать “asynchronous request”?

11. 
    naspeh написал:
    17.01.2010 в 14:46
    Цитировать
    
    
    

    Глобальные переменные – это зло, и тем не менее, их продолжают использовать
    По моему правильнее было бы сделать:
    - оставить запрос асинхронным;
    - на beforeSend повесить “loading…”
    - на success повесить callback типа:
    
function(data) {
subTitle = ’Dates: ’+data.date_text + ’ Venue: ’ + data.xvenue;
prepareData(subTitle); /* дальше сделать с ними некоторые манипуляции (обрезание строки и т.д, не суть важно)*/
showData(); /*и вывести клиенту.*/
hideLoading();
}


12. 
    naspeh написал:
    17.01.2010 в 14:47
    Цитировать
    
    
    

    да и лучше
    
var subTitle = ...


13. 
    zerkms написал:
    18.01.2010 в 03:31
    Цитировать
    
    
    

    @naspeh
    гасить анимацию лучше в ‘complete’, а не через hideLoading(); потому как запрос вполне себе может закончиться неудачей.

14. 
    naspeh написал:
    18.01.2010 в 08:57
    Цитировать
    
    
    

    @naspeh
    гасить анимацию лучше в ‘complete’, а не через hideLoading(); потому как запрос вполне себе может закончиться неудачей.

    вопрос не в этом , но с лоадингом да, лучше в ‘complete’

15. 
    Станислав Малкин написал:
    15.02.2010 в 00:15
    Цитировать
    
    
    

    naspeh, рад тебя видеть в своем блоге. Давно от тебя ничего не слышал вообще.

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

16. 
    naspeh написал:
    15.02.2010 в 01:14
    Цитировать
    
    
    

    naspeh, рад тебя видеть в своем блоге. Давно от тебя ничего не слышал вообще..

    твой блог у меня еще в reader-е так что иногда читаю, а комменты обычно вообще нигде не оставляю, а тут, честно, задело душу программиста, ИМХО нельзя рекомендовать неправильные подходы, поэтому ответил…

Оставить комментарий