css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты
23 Апр
Перед кем еще похвастаться, как не перед читателями своего блога? Тем более, что хвастаться я собираюсь по теме. Несколько дней назад в интернет-магазинах появилась в продаже книга «AJAX. Программирование для Интернета». Книга вышла в издательстве «БХВ-Петербург». Написана она преподавателем компьютерных дисциплин СПбГПУ – Санкт-Петербургского государственного политехнического университета Е. С. Бенкен и мной – автором этого блога.

От издателя:
Описана технология AJAX и показаны возможности, которые открываются перед разработчиком с ее применением. Рассмотрена объектная модель документа: DOM в JavaSript и DOM-функции в PHP. Изложены основы языка XML и формат JSON. Показан принцип генерации асинхронных запросов к серверу средствами JavaScript. Сделан обзор основных JavaScript-библиотек: Prototype, Scriptaculous, ExtJS и jQuery. Подробно рассмотрены популярные и перспективные библиотеки ExtJS и jQuery: описана объектная модель языка JavaScript, на которой базируются эти библиотеки; применение AJAX-запросов; обработка событий и др. Приведено большое количество практических примеров.
Компакт-диск содержит дистрибутивы Web-сервера, модуля РНР и сервера MySQL, исходные коды описываемых библиотек, распространяемых на основании лицензии GPL, а также примеры из книги.
Читателям:
В ходе чтения следует выполнять примеры, описываемые в книге. Каждый пример стоит изменять и переделывать самому с тем, чтобы лучше понимать, как он работает или как сделать так, чтобы все перестало работать.

От себя:
А от себя хочу добавить, что библиотеке jQuery в книге уделено достаточно много внимания – этот раздел занимает 160 страниц. Естественно, что стояла задача показать именно то, как jQuery помогает при использовании AJAX, но для этого необходимо было объяснить базовые понятия самой библиотеки. Поэтому в раздел о jQuery были включена глава о функциях ядра библиотеки, очень подробно рассмотрены практически все селекторы jQuery, рассмотрена работа с событиями в jQuery и манипуляции элементами. И только после этого подробно рассказывается об использовании AJAX. Абсолютно все сопровождается примерами с довольно подробными пояснениями. В общем этим разделом можно пользоваться как мануалом по вышеупомянутым разделам библиотеки.
Жаль конечно, что не удалось рассказать о всей библиотеке – но наверное это тема для отдельной книги.
Отзывов (69) на «AJAX. Программирование для Интернета»
Геннадий, успехов и дальнейшего развития.
Спасибо за блог. Интересные статьи можно прочитать здесь.
> принцип генерации асинхронных запросов к серверу
Следовало бы осветить и тему отправки сообщений сервера клиенту. Я сталкивался только с одной такой реализацией, это Athena Divmod. Мне понравилось.
Когда будет вторая книга и о чем
?
..bw
Здравствуйте.
Разрабатываю сайт с использованием Ajax и столкнулся с такой проблемой что Ad Muncher(заказчик сам использует эту прогу) режет содержимое, причем не все а только некоторые страницы(какой уж у него алгоритм я не знаю но пытался поиграться с соотношением ссылок к тексту, ничего не получается). Вот хочу спросить стоит ли забить на Ad Muncher или всетаки искать решение проблемы дальше или вообще отказаться от ajax? Есть ли у какаянибудь статистика популярности этой программы?
To bw:
Это я к вопросу о том, что освещено и что нет…
Вы про вторую спрашиваете, будто первую прочитать успели
А если серьезно, то в общем то материал в книге старались подбирать таким образом, чтобы и была не только часть практическая (типа скопировал – ба, работает!), но и все-таки теоретическая, чтобы понимать как именно это работает…
greathun, Вы делаете сайт для заказчика исключительно или для посетителей сайта этого заказчика? Он постоянно посещает непристойные сайты (с огромным кол-вом всякой рекламы)? Кстати, соотношение ссылок к тексту как связано с ajax и с Ad Muncher? Насколько знаю это же блокировщик рекламы.
Опять же если серьезно, я не эксперементировал с этим. Ну, а как в этом блоге ведет себя Ad Muncher? Вот тут-то как раз, полным-полно примеров с использованием ajax?
Как я уже сказал, что этот AdMuncher режет не все страницы а только те на которых большое количество ссылок то наверно он принимает такие страницы за рекламные или спам не знаю. С аджаксом поначалу были проблемы он применял к библиотеке(отличной от jq) свои фильтры и резал ее. Исходя из моих наблюдений за поведением этой софтины на других сайтах (к примеру на одноклассниках он режет некоторые фотографии) можно сделать вывод что можно пренебречь пользователями даной софтины ради функционала.
А, теперь понял. Ну тут наверное надо принимать волевое решение – делать или не делать. В конце концов не все же с AdMuncher по сети бродят. Тут уж каждый сам для себя решать должен – или он получает удобства (от ajax) или нет. Думаю, что тот юзер, который смог поставить себе что-то на свою машину самостоятельно, уже сможет и понять, что в каких-то моментах она может ему и помогает, а в каких-то мешает, имхо.
Очень хорошо, что про EXT не забыли! – пока книжек на русском не было. Как появиться в обязательно приобрету
Геннадий, примите мои искренние поздравления! Очень рад!!
Константин, спасибо!
Спасибо за новость и за книжку. Приобрел ее сейчас. Пока до этого не встречал толковых книжек на русском языке по Ajax и в особенности по библиотеке jQuery. Надеюсь книга действительно окажется полезной. Еще раз спасибо авторам!
Поздравляю !
2greathun:
Советую посмотреть на сами ссылки. У меня была проблема, когда подобная софтина у пользователя реджектила аякс, поскольку он передавал в квери параметр count — видимо считал что это зло
Если связано с чем-то подобным — то исправьте имена параметров на нейтральные. Если нет — то Gennady уже озвучил правильную мысль.
Поздравляю и желаю дальнейших успехов ! Искренне рад за вас
!
Геннадий, поздравляю Вас, желаю дальнейших успехов на столь нелегком поприще.
Хотела еще спросить может вы мне сможете помочь:
в JS пишу так:
$.getJSON(‘/maps/ajax/loadbot.ajax.php?load=get&bot=’+$(‘#name’).val(),function(json){
var data = eval(json);
$(data[0]).css(‘color’,'#ff0000′).css(‘display’,true ? ‘block’:none)
})
php файл возвращает результат:
["div[sec_t*=7:51]«, «div[sec_t*=7:52]«, «div[sec_t*=7:53]«, «div[sec_t*=7:54]«, «div[sec_t*=7:55]«, «div[sec_t*=8:51]«, «div[sec_t*=8:52]«, «div[sec_t*=8:53]«, «div[sec_t*=8:54]«, «div[sec_t*=8:50]«]
однако $(data[0]).css(‘color’,'#ff0000′).css(‘display’,true ? ‘block’:none) не срабатывает. Думала проблема с получением данных, но выяснила (убрав eval) что передается все нормально (вывела data в alert)
Подскажите пожалуйста в чем может быть причина? Ибо я уже намучилась…
Если не читали следующие две статьи, почитайте:
…
Что такое JSON?
Как работать с JSON?
потому как мне кажется Вы немножко неверно поняли сам формат представления данных JSON. В качестве «живого» примера использования JSON можете посмотреть это:
Каскад раскрывающихся списков
На примерах проще будет
Спасибо. Очень помогло )
спасибо за блог и работу в целом)
), благодаря Вашей книге, познакомился и она оставила положительное мнение о себе. обязательно пощупаю в своих приложениях)
книгу купил, читаю, нравится)
в разделе о jQuery, мне кажется, не хватило более практических примеров, как сделать аккордеон, как сделать табы и тд (по аналогии с ExtJS, а то у вас как-то получилось, что ext рассмотрели со всех сторон, полноценно, а jQuery изучили теорию), но организация теории порадовала, действительно, очень полезный маунал вышел)
что касается Ext – все здорово, не знал раньше про эту библиотеку (
еще раз спасибо, успехов)
Про jQuery согласен полностью – там действительно теория, в общем перевод части мануала.
Но, надеюсь, что будет и «jQuery – рецепты программирования», т.е. полноценный (насколько возможно) cookbook. Сейчас как раз ведутся переговоры с издательством БХВ-Петербург на эту тему. Если завершатся удачно – будем работать
Нашел, кажется, неточность..
страница 368, описание метода insertAfter()
У Вас: «Необходимо вставить элемент p перед элементом div «, я так понимаю, задумано было «после элемента»
А рецепты ждем, да-да)
Да, к сожалению Вы правы, там действительно неточность. Этот параграф следует читать так:
В данной HTML-разметке присутствуют элемент p и два элемента div. Необходимо вставить элемент p после элемента div, имеющим идентификатор #foo. Выбираем в набор элементы p и применяем метод insertAfter(), указывая в качестве параметра идентификатор элемента после которого необходимо осуществить вставку.
Спасибо большое за Ваше замечание, к сожалению при подготовке материалов достаточно внушительного объема без ляпов не обходится
Привет Геннадий это Том – у нас был разговор 3 года назад – надо встретиться – продолжить. Пришли свой тел. на мейл – позвоню.
Привет Том!
Телефон скинул на твой e-mail.
Пару недель купил эту книжку (547 руб. – пожалуй самая дорогая из моего арсенала, но того стоит) – замечательная вещь, очень понятно написана и хорошие примеры приведены, одно немного рассторило, что на диске только примеры из 3 первых глав, а где остальные? Почему их не выложили что помешало не могу понять? Можно ли их где-то скачать?
Примеры там есть. Правда почему-то при подготовке CD-ROM’а они попали в папку part_3.
P.S. Что-то дорого купили – на Озоне она стоит 440 руб.
Честно сказать, на эту книжку и 700 не пожалел бы, уж очень вовремя попалась, спасибо) О да, вы правы! Действительно они в той самой папке, правда названы некорректно, 16.119 аж файл есть! Ну ничего – разберёмся! Спасибо. Большое. А у вас случаянно нет этих файлов в нормальном виде? Всё-таки соавтор этой замечательной книги!) Может поделитесь, чтобы уж впечатление было полностью положительным)))
Да, елки-палки! Только сейчас сообразил, что нумерация не соответствует! На самом деле название файла должно соответствовать номеру листинга в книге! В нормальном виде файлы примеров у меня есть для глав 22-29, т.е. все те, что касаются библиотеки jQuery. Вот архив.
Спасибо огромное! Меня конкретно query и интересовали! Успехов!
Успехов вам, ждем книги по jQuery от вас.
Спасибо огромное!!! Успехов Вам!!!
Сегодня, после работы, забегу, куплю
Добрый день!!!
Читаю данную книгу, заодно экспериментирую для лучшего усвоения материала.
Вот столкнулся со странной работой innerHTML в IE… Он срабатывает только один раз, потом не срабатывает до тех пор пока не перезагрузишь браузер!!! В Опере и ФФ все работает замечательно!!!
IE 6.0
Код функции:
function add_content(id)
{
if (xmlHttp)
{
try
{
xmlHttp.open(«GET»,»echo_section_body.php?section=»+id,true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
try
{
response = xmlHttp.responseText;
myDiv = document.getElementById(«section_»+id);
myDiv.innerHTML = response; // Вот тут ошибка!!!!
}
catch(e)
{
alert(» Ошибка при чтении»);
}
}
else
{
alert(» Возникла проблема при получении данных с сервера:\n» + xmlHttp.statusText);
}
}
}
xmlHttp.send(null);
}
catch(e)
{
alert(» Не удалось соединиться с сервером»);
}
}
}
Имхо, innerHTML тут не причем. Причина проблемы пояснена на стр. 111 и связана она с кэшированием GET-запросов.
Точно, я же читал об этом, но упустил…
Спасибо за помощь!!!
Ну да, я догадывался, что это не innerHTML, а что-то похожее на кеширование, ибо скрипт один раз все же срабатывал… Хотя знаю, что innerHTML себя не очень хорошо ведет в случае с тегами в IE!!!
Пошел дальше экспериментировать
По вашим руководствам написал небольшой плагин в виде файла к jQuery. Плагин реализует отображение тултипов. Можно ли функцию из этого файла вызывать извне?
Дело в том, что в подгружаемом html коде тултипы уже не работают, приходится перезапускать функцию за них отвечающую. Хочу в callback функцию load прописать повторный запуск тултипов.
Я подскажу, что почитать, чтобы Вы не пошли неверным путем. Посмотрите это: Обработка событий для элементов DOM, загружаемых через ajax и можно как продолжение почитать это (особенно если пользуете версии ниже 1.3): Плагин Live Query
Вопрос такой возник!!! На странице 368 написано про insertAfter… Могу предположить, что с помощью него вставляется элементы (в примере это Р) ПОСЛЕ элементов (в примере это DIV)… А там написанно, что он вставляет ПЕРЕД… Это ошибка или я что-то не так понял???
См. комменты 20-21. Это действительно ошибка.
ОК… Нашел еще пару ошибок, не не стал их писать, дабы там описки и смысл от них не меняется, в отличии от этого случая!!!
А вообще огромное спасибо за книгу, дабы новые материал усваивается просто с огромной скоростью, что говорит о правильной подаче информации
Хотел спросить еще про автозагрузку класса… Данная функция срабатывает при первом создании объекта класса или при загрузке страницы (тогда не видно отличия от include) или еще как…
__autoload вызывается автоматически, если Вы пытаетесь использовать класс, который ранее не был определен. Согласитесь, отличие от include существенное. Дополнительно можете покопать мануал по PHP – там есть и примеры и все хорошо разъясняется.
Ну да, в таком случае отличие налицо!!!
Спасибо еще раз!!!
Ознакомился с предложенным материалом. Я, собственно, и думал что так нужно делать. Но у меня проблема немного в другом.
Вот есть файл, который я цепляю к страницам сайта. Содержание примерно следующее:
(function($){
$().ready(function() {
toolStart(); // включаем тултипы
});
// функция отвечающая за отображение тултипов, вешает обработку событий, рассчитывает координаты и прочее
function toolStart() {}
…
})(jQuery);
На одной из страниц у меня есть меню, которое используется для подгружения информации без перезагрузки страницы. Т.к. в подгружаемой информации есть тултипы, то мне необходимо в callback функции для load() прописать функцию запуска тултипов, которая в файле называется toolStart(). Если просто написать:
$(‘.class div’).click(function(){
$(‘#somid’)
.html(»)
.load(‘http://file.php?’, », function(){
som_func();
});
});
function som_func() {
…
toolStart(); // вот пытаюсь включить тултипы
}
Тултипы в этом случае не работают. Видимо, скрипт просто не видит эту функцию. Подскажите, пожалуйста, как ее можно вызвать, либо как перестроить скрипт чтобы все заработало )
Не в другом у Вас проблема Валерий. Именно в этом. Вот смотрите – как только готова DOM Вы вызываете toolStart(); которая, как я понял, ищет все необходимые элементы и привязывает к ним показ тултипов по какому-то событию. Смотрите, что происходит дальше – Вы подгружаете новые элементы, но для них пока нет обработчиков, т.к. они добавлены в DOM уже после того, как обработчики были развешаны. Собственно Вы тоже пытаетесь идти логически верно, но у Вас тогда som_func(); должна быть определена как глобальная. Да собственно наверное проще просто определить как глобальную toolStart(); и вызывать вторым аргументом в load сразу ее (кстати, зачем в Вашем коде в этом месте лишняя анонимная функция?). Еще один «минус» – load() выполнит callback-функцию независимо от того был запрос успешен или нет. Тут бы Вам скорее ajax() подошел…
Здравствуйте, такая проблема – на странице есть форма для отправки данных с помощью плагина form. Но сама кнопка отправить для этой формы подгружается ajax’ом позже. Так вот в Опере и Мозиле подруженная кнопка не работает, но работает в ИЕ. Пробовал посылать форму яваскриптом при нажатии на эту кнопку, тогда плагин не работает и загружается страница из action, если указать return false, то снова ничего не работает. Есть какое-то решение проблемы, кроме изначальной загрузки кнопки вместе с формой?
Обычно кнопку «рисуют» сразу, только с атрибутом disabled=»disabled». И самому проще и пользователей в заблуждение не вводишь – «ай, кнопки-то нет…».
Кстати form был хорош, когда версия jQuery была 1.2.1, а сейчас по-моему проще свое написать.
если бы умел писать, написал бы. Может сделаете следующий пост об этом?
Андриан, не все так сложно. Кстати, не только на моем сайте можно найти все необходимые материалы для изучения библиотеки даже «с нуля».
Сделать пример простейшей формы? Пожалуй… Правда сейчас в отпуск на пару недель, отдохнуть-то тоже надо
буду ждать!
Постоянно пользуюсь вашим блогом, очень много полезностей извлек для себя. А книга это хорошо, это очень полезная вещь, но дорогая. Всегда удобнее иметь книгу под рукой, чем кучу ссылок.
Геннадий, поздравляю с выходом книги! Обязательно куплю себе!
Спасибо за поздравления Андрей!
Прочитал вашу книгу – замечательная. Очень заинтересовался jQuery. Понравилась функция .load (.ajax) в любой div . Все работает, но если подключить WYSIWYG редактор, то не работает, перепробовал много редакторов, у всех свои приколы (Tiny зависает, FCKeditor не сохраняет отредактированный текст…..), но если загружать файл отдельно, то все работает. Подскажите как правильно сделать.
Скорее всего проблема в том, что содержимое, загружаемое с помощью ajax-запросов, вставляется в DOM уже после того, как определены все обработчики событий для элементов. Это в теории. Попробуйте прочитать статью Обработка событий для элементов DOM, загружаемых через ajax.
Надеюсь, что статья в чем-то поможет. По крайней мере подскажет пути решения.
Статью читал, там все понятно, но я загружаю пхп файл (в нем запрос к БД и форма в которой текст и несколько других параметров редактируются. использую jquery.form.js) со своими скриптами и обработчиками, который отдельно работает, а если загружен с помощью аякс в div – теряется работоспособность WYSIWYG редакторов. Cтарые обработчики не используются. Как добавить в DOM новые элементы, если они генерируются в пхп файле?
Заметил, что во всех WYSIWYG редакторах используются iframe
В общем Вы загружаете не php-файл, а результат его работы, т.е. некоторую HTML-разметку им сгенерированную, верно же?
Значит в опции success ajax-запроса Вам надо написать обработчик, который и добавит сгенерированную разметку в нужное место DOM. (примеры не привожу – их на блоге легко найти).
Но! (почему я упомянул ту статью) – обработчики, определенные ДО ТОГО, как был выполнен ajax-запрос, не будут работать на элементах вставленных в DOM с его помощью. Т.е. Вам надо либо подгружать в ajax-запросе еще и JS-код, либо использовать метод live() например.
Что же касается редакторов – это же тоже довольно сложные плагины, а совместное использование пары-тройки сложных плагинов, да плюс свой код – тут ой как тяжело отследить проблему…
Спасибо, я сдался и переделываю на классический метод – перегрузка всей страницы.
Получилось! Если сначала загрузить HTML разметку, а потом в элементы вставить данные. Работает с Tiny. Правда с FCKeditor не вышло, не смог заставить его копировать измененный текст из фрейма в элемент обратно, без перезагрузки страницы. Не подскажете как текст из фрейма напрямую забрать без формы и перезагрузки?
$(«iframe»).contents().find(«body»).и так далее….
Спасибо огромное – $(«iframe»).contents().find(«iframe»).contents().find(«body»).html()
вот так добрался до текста.
Поздравляю с публикацией ващей книги жалко что в Ташкенте её еще нет.
Спасибо
Может когда-нибудь появится… Главное, чтобы она к тому времени еще актуальна была.
А что, магазины типа ozon.ru не доставляют к Вам покупки? Они вроде такие из себя крутые – чуть ли не по всему миру работают.
Извините, может подскажете как это переписать на asp:
Еще раз извиняюсь
php
‘header(‘Content-Type: text/html; charset=utf-8′);
‘if($_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’) {
‘ switch($_GET['country']) {
‘ case ‘1′:
‘ print ‘[{value:"",text:"Select auto"},{value:"1",text:"Audi"},{value:"2",text:"BMW"},{value:"3",text:"Opel"}]‘;
‘ break;
‘ default:
‘ print ‘[{value:"",text:"Select auto"}]‘;
‘ break;
‘ }
‘}
‘?>
Спасибо, очень просто
Response.ContentType = «text/html»
Response.Write «[{value:"""",text:""Select auto""},{value:""1"",text:""Audi""},{value:""2"",text:""BMW""},{value:""3"",text:""Opel""}]«
книжка великолепная!!!!!!!!!!!!!!
огромное спасибо и вам, Геннадий, и Е.Бенкен, и сайту букс.ру за неё! только мне кажется у вас там как-то скромновато написано-»автор ведет блог, посвященный Web-программированию». Мне кажется, этот сайт быыл бы очень полезен тем, кто найдет данную книжку как-то иначе, не через этот сайт.
все очень понятно написано, куча примеров, и всё в одной книге! большое спасибо!
И Вам спасибо за отзыв
Надеюсь, что вот-вот в том же издательстве выйдет еще одна книга – «jQuery. Рецепты программирования». Ес-но полностью посвящена только jQuery + UI jQuery + самым популярным плагинам для jQuery. Книга уже сдана, обещают напечатать в декабре
большое спасибо
буду искать:)
Здравствуйте, Геннадий!
У меня проблема с dialog:
Схема такая: window1->tabs[table]->window2(ajax).
Не подскажете ли, чего не хватает для второго окна.
Отдельно window2(ajax) работает, а вот вместе- не дышит!
Здравствуйте Olga!
Пожалуйста, со всеми техническими вопросами -> на форум. Будет удобнее и Вам, и мне, и всем