Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 36
Объясните, пожалуйста, что делает первый цикл (который по переменной keyValuePairs). Одного вызова val() не хватает?
Где urldecode()?
Сделал, да.
mvasiliev.ru/js/jquery.urlencode.js
mvasiliev.ru/js/jquery.urlencode.js
для русского текста не сработало.
Chrome.
Chrome.
Первый же баг — пишу «hello, homm» получаю «hi%2C+homm».
Если я правильно понял (заполняя форму Form1 при нажатии Clone, должна заполниться форма Form2) под FireFox 3.5.7, Window7 не работает:-(
в чекбоксах и мульт селекте неправильно работает когда ДЕселектишь чек бокс или значение из селекта (при условии если лишь одно выделено/отмечено)
Гм, да. Неотмеченные чекбоксы отсутствуют в строке, форму надо чистить перед десериализацией. У себя я использую
jQuery.Form Plugin, метод clearForm(). Но могу подобный дописать сюда. Надо?
jQuery.Form Plugin, метод clearForm(). Но могу подобный дописать сюда. Надо?
По идее удобненько. Обязательно попробую использовать этот подход для повторного заполнения форм при негативном ответе валидатора, хотя с другой стороны пользователей без JS немного жалко… а с третей, лучше уж это все делать Ajax'ом и не перегружать форму.
Может еще какие-то варианты применения предложите?
Может еще какие-то варианты применения предложите?
Пользователям без JS можно, например, заполнять форму на сервере ;-)
А способ применения… ИМХО, самый очевидный (и для чего оно нужно было мне) — для навигации по результатам ajax-поиска:
— форма сериализуется, результат пишется в window.location.hash
— при загрузке страницы данные из location.hash десериализуются, а форма отправляется на сервер.
Тогда остается поиск без перезагрузки страницы, и по прежнему можно скопировать ссылку на результат выдачи, и отправить ее знакомому, например.
В случае jQuery Form Plugin выглядит примерно так:
А способ применения… ИМХО, самый очевидный (и для чего оно нужно было мне) — для навигации по результатам ajax-поиска:
— форма сериализуется, результат пишется в window.location.hash
— при загрузке страницы данные из location.hash десериализуются, а форма отправляется на сервер.
Тогда остается поиск без перезагрузки страницы, и по прежнему можно скопировать ссылку на результат выдачи, и отправить ее знакомому, например.
В случае jQuery Form Plugin выглядит примерно так:
<code>
$(document).ready() {
$("#searchForm")
.ajaxForm()
.deserialize(window.location.hash)
.submit();
}
</code>Так в том то и фишка вашего deserialize, что это могло бы ускорить разработку, избавив от необходимости заполнять форму на сервере, а вы говорите аполнять форму на сервере :^)
если сайт стоит на аяксе, то смысл предполагать, что у юзера нет js? все в идее верно, противоречий нет :) Отключили — пусть тра**тся с тем что дали, жестоко, но справедливо. Жду, когда появятся топики вида «что если не загрузился css или юзер убил его через грисмонкей» :)
если я предполагаю что у юзера нет js, можно предположить, что я говорю о сайтах, которые не на аяксе :^)
У поисковых роботов нет яваскрипта.
А что касается неоправданного использования JS/AJAX — меня раздражает не столько проблемы с юзерами без яваскрипта, сколько такие вещи:
— Часто не работает история (назад-вперед) на AJAX сайтах (особенно хотелось бы сказать разработчикам всяких плагинов просмотра картинок вроде lightbox и подобных — они идиоты, я уже не раз обламывался, когда жмешь назад, и уходишь из-за этого с сайта)
— Кнопка F5 часто открывает не ту же страницу
— Не работают букмарки
— Сайт грузится медленнее, ест больше ресурсов процессора, может притормаживать. Учитывая, что я открываю по много вкладок в браузере, это важно.
А что касается неоправданного использования JS/AJAX — меня раздражает не столько проблемы с юзерами без яваскрипта, сколько такие вещи:
— Часто не работает история (назад-вперед) на AJAX сайтах (особенно хотелось бы сказать разработчикам всяких плагинов просмотра картинок вроде lightbox и подобных — они идиоты, я уже не раз обламывался, когда жмешь назад, и уходишь из-за этого с сайта)
— Кнопка F5 часто открывает не ту же страницу
— Не работают букмарки
— Сайт грузится медленнее, ест больше ресурсов процессора, может притормаживать. Учитывая, что я открываю по много вкладок в браузере, это важно.
Я только замечу, что все же на среднестатистическом сайте использование AJAX для подгрузки результатов поиска имхо неоправданно (из минусов — все значительно усложняется, теряются юзеры без явакрипта, увеличивается время загрузки, из плюсов — ???).
В чем там усложнение-то? =)
1. Взять работающий поиск
2. выдрать результат выдачи в отдельный серверный скрипт/шаблон
3. взять пример выше, воткнуть в коллбэк $('#results').replaceWith(response)
4. либо в вызове ajaxForm, либо в submit указать url нового скрипта =)
5. ???
6. PROFIT!!!
Такая штука даже снизит нагрузку (как минимум, страница целиком лишний раз не генерится), а делается за 15 минут. Скриптов 10 строк добавилось.
1. Взять работающий поиск
2. выдрать результат выдачи в отдельный серверный скрипт/шаблон
3. взять пример выше, воткнуть в коллбэк $('#results').replaceWith(response)
4. либо в вызове ajaxForm, либо в submit указать url нового скрипта =)
5. ???
6. PROFIT!!!
Такая штука даже снизит нагрузку (как минимум, страница целиком лишний раз не генерится), а делается за 15 минут. Скриптов 10 строк добавилось.
Нет. Мне интуитивно такие вещи не нравятся. Кроме того:
1) скрипты утяжеляют загрузку страницы
2) Загрузка страницы становится дольше — а) загрузка страницы, скриптов б) загрузка результатов поиска. Например, мерзкие объявления в контакте сделаны именно так, это раздражает. Какой смысл грузиться страницу 2 запросами вместо одного?
3) Чтобы AJAX нормально работал, надо много кода — код работы с историей (а тут наш любимый ИЕ подкладывает свинью, как всегда), код обработки скриптов в AJAX-ответе (иначе они не выполнятся), код индикации загрузки страницы и обработки ошибок, обхода аггрессивного браузерного кеширования ответа, и т.д., я сам это делал, и мне кажется глупым писать заново пол-браузера на яваскрипте.
4) «как минимум, страница целиком лишний раз не генерится» — если у вас не унылосайт, с кучей рекламы, и бесполезных инфоблоков в сайдбаре на 3 экрана — ускорения не будет, а по причинам, в п.2 — будет только медленнее. Назгрузка на сервер тоже не снижается, так как поиск все равно производится
Так что ваше «делается за 15 минут» звучит как-то… по-фрилансерски что ли. Они тоже любят накачать всяких Джумл/вордпрессов, бесплатных шаблонов и плагинов, и ставить это за 15 минут, так что на сайт смотреть страшно.
1) скрипты утяжеляют загрузку страницы
2) Загрузка страницы становится дольше — а) загрузка страницы, скриптов б) загрузка результатов поиска. Например, мерзкие объявления в контакте сделаны именно так, это раздражает. Какой смысл грузиться страницу 2 запросами вместо одного?
3) Чтобы AJAX нормально работал, надо много кода — код работы с историей (а тут наш любимый ИЕ подкладывает свинью, как всегда), код обработки скриптов в AJAX-ответе (иначе они не выполнятся), код индикации загрузки страницы и обработки ошибок, обхода аггрессивного браузерного кеширования ответа, и т.д., я сам это делал, и мне кажется глупым писать заново пол-браузера на яваскрипте.
4) «как минимум, страница целиком лишний раз не генерится» — если у вас не унылосайт, с кучей рекламы, и бесполезных инфоблоков в сайдбаре на 3 экрана — ускорения не будет, а по причинам, в п.2 — будет только медленнее. Назгрузка на сервер тоже не снижается, так как поиск все равно производится
Так что ваше «делается за 15 минут» звучит как-то… по-фрилансерски что ли. Они тоже любят накачать всяких Джумл/вордпрессов, бесплатных шаблонов и плагинов, и ставить это за 15 минут, так что на сайт смотреть страшно.
0. Ну, «15 минут» — больше фигурально сказано. Но в любом случае трудозатраты там относительно небольшие.
1. Утяжеление, еще раз, небольшое. Если вообще ajax используется.
2. Что мешает сервером сразу тоже рендерить результат?
3.
а) История в IE — актуально для IE6(7?). В этом случае пишется библиотечка, или берется готовая. Она грузится один раз для всего сайта и оседает в кешах браузера. А восьмой IE даже onhashchange понимает, и для него огород городить не надо.
б) Обработка ошибок — вы ведь их обрабатываете на сервере уже? Еще раз, задача — получить готовый html с результатами, и его воткнуть на место текущих результатов. Или вы в JSON'е данные принимаете, и потом разметку в js генерируете?
в) обработка скриптов — миллион лет назад уже в jQuery все сделано. Не надо про его размер говорить, он наверняка у всех в кешах есть (если с гугла тащить), а если нет — то требуется один раз для всего сайта загрузить.
г) про агрессивное кеширование не совсем понял — уточните, в чем там проблемы (которые есть при использовании AJAX'а, и нет в обычной реализации)?
4. Поскольку разобрались со вторым пунктом, то ускорение таки будет?
Кроме генерации есть еще время запроса/ответа, есть время рендеринга всей страницы (небольшое, но есть), есть время перемотки к результатам поиска. Да и визуально ajax-переход выглядит быстрее.
В общем, вопрос тут, скорее, в правильной реализации. Тогда это будет быстрее. А кода все равно не так уж много (если, конечно, jQuery самому не изобретать).
1. Утяжеление, еще раз, небольшое. Если вообще ajax используется.
2. Что мешает сервером сразу тоже рендерить результат?
3.
а) История в IE — актуально для IE6(7?). В этом случае пишется библиотечка, или берется готовая. Она грузится один раз для всего сайта и оседает в кешах браузера. А восьмой IE даже onhashchange понимает, и для него огород городить не надо.
б) Обработка ошибок — вы ведь их обрабатываете на сервере уже? Еще раз, задача — получить готовый html с результатами, и его воткнуть на место текущих результатов. Или вы в JSON'е данные принимаете, и потом разметку в js генерируете?
в) обработка скриптов — миллион лет назад уже в jQuery все сделано. Не надо про его размер говорить, он наверняка у всех в кешах есть (если с гугла тащить), а если нет — то требуется один раз для всего сайта загрузить.
г) про агрессивное кеширование не совсем понял — уточните, в чем там проблемы (которые есть при использовании AJAX'а, и нет в обычной реализации)?
4. Поскольку разобрались со вторым пунктом, то ускорение таки будет?
Кроме генерации есть еще время запроса/ответа, есть время рендеринга всей страницы (небольшое, но есть), есть время перемотки к результатам поиска. Да и визуально ajax-переход выглядит быстрее.
В общем, вопрос тут, скорее, в правильной реализации. Тогда это будет быстрее. А кода все равно не так уж много (если, конечно, jQuery самому не изобретать).
Во-первых насчет кеширования. В кеше браузера файлы месяцами не лежат, к слову. представьте такой сценарий: я ищу что-то в гугле и открываю по очереди все страицы в поисках нужной. В обычном браузере, с вашим аяксом меня ждет секунды 3-5 ожидания, а то и больше, глядя в белый экран. Я не привык к таким тормозам. В Опере без яваскрипта — открывается быстрее. Кеш тут не поможет, так как я на ваш мерзкий (не принимайте всерьез :) ), заполеннный аяксом сайт захожу первый, и узнав про аякс, последний раз в жизни.
Кстати, такие ошибки случаются не только у начинающих вебмастеров: не так давно, Хабр адски тормозил — 3 рекламных яваскрипта с pink.habrahabr.ru отдавались с задержкой в 5 секунд на каждый, а пока они не загрузятся, ничего не отображалось. Как вы думаете, довольны ли были пользователи?
> 2. Что мешает сервером сразу тоже рендерить результат?
Может, то, что hash не передается на сервер?:)) Я вам еще раз говорю, я сам всю эту реализацию руками писал, и ничего глупее, чем пытаться дублировать функционал браузера, ради кажущегося ускорения, нет.
Кстати, у ИЕ свои тараканы — переход на несуществующий якорь не пишется в историю, и для Убогого приходится добавлять в страницу дополнительный ифрейм. Зачем мне на сайте ифреймы??
Может для кривых тяжелых, перегруженных рекламой DLE-порталов и есть от этого видимость ускорения, но я, слава богу, таких сайтов никогда не делал.
> б) Обработка ошибок — вы ведь их обрабатываете на сервере уже?
Ошибок AJAX-запроса, например, интернет пропал и ответ от серевера не пришел. Вы же их обрабатываете?
> про агрессивное кеширование не совсем понял — уточните, в чем там проблемы
Некоторые браузеры (ИЕ и Опера) принудительно кешируют AJAX-ответ, несмотря на отсутсвие позволяющих это делать HTTP-заголовков. Приходится добавлять уродливое &rnd=NNNN к запросу.
> общем, вопрос тут, скорее, в правильной реализации. Тогда это будет быстрее.
А еще стоит подумать, так ли нужен АЯКС (мнение туповатого заказчика — не в счет). Пробелы и мусор лучше в HTML коды вырежьте и с джумлы/друпала (к примеру) перейдите на нормальную CMS, вот это будет ускорение :)
Опять же, проблемы индексации поисковиками остаются.
К тому же для меня есть главный аргумент — у меня в Опере для незнакомых сайтов отключен яваскрипт (грузится быстрее, я сейчас временно сижу в браузере с флешем и яваскриптом — торомза аж непривычные).
Кстати, такие ошибки случаются не только у начинающих вебмастеров: не так давно, Хабр адски тормозил — 3 рекламных яваскрипта с pink.habrahabr.ru отдавались с задержкой в 5 секунд на каждый, а пока они не загрузятся, ничего не отображалось. Как вы думаете, довольны ли были пользователи?
> 2. Что мешает сервером сразу тоже рендерить результат?
Может, то, что hash не передается на сервер?:)) Я вам еще раз говорю, я сам всю эту реализацию руками писал, и ничего глупее, чем пытаться дублировать функционал браузера, ради кажущегося ускорения, нет.
Кстати, у ИЕ свои тараканы — переход на несуществующий якорь не пишется в историю, и для Убогого приходится добавлять в страницу дополнительный ифрейм. Зачем мне на сайте ифреймы??
Может для кривых тяжелых, перегруженных рекламой DLE-порталов и есть от этого видимость ускорения, но я, слава богу, таких сайтов никогда не делал.
> б) Обработка ошибок — вы ведь их обрабатываете на сервере уже?
Ошибок AJAX-запроса, например, интернет пропал и ответ от серевера не пришел. Вы же их обрабатываете?
> про агрессивное кеширование не совсем понял — уточните, в чем там проблемы
Некоторые браузеры (ИЕ и Опера) принудительно кешируют AJAX-ответ, несмотря на отсутсвие позволяющих это делать HTTP-заголовков. Приходится добавлять уродливое &rnd=NNNN к запросу.
> общем, вопрос тут, скорее, в правильной реализации. Тогда это будет быстрее.
А еще стоит подумать, так ли нужен АЯКС (мнение туповатого заказчика — не в счет). Пробелы и мусор лучше в HTML коды вырежьте и с джумлы/друпала (к примеру) перейдите на нормальную CMS, вот это будет ускорение :)
Опять же, проблемы индексации поисковиками остаются.
К тому же для меня есть главный аргумент — у меня в Опере для незнакомых сайтов отключен яваскрипт (грузится быстрее, я сейчас временно сижу в браузере с флешем и яваскриптом — торомза аж непривычные).
Всё правильно, пощупайте вот этот проектик tanyao.ru (-:
если по аналогии с php, то функция обратная serialize носит имя un-serialize, вместо de. Но не суть, вы могли по jquery unserialize что-то готовое уже нагуглить, есть примеры, у вас правда пообширнее функционал, супер. Попробуем на досуге.
В принципе вы правы, цитирую:
Основным значением префикса un является не. В некоторых случаях префикс un означает изменение действия глагола на обратное.
Префикс de имеет несколько отрицательных значений, основными из которых являются а) вниз, ниже; б) высвобождение, отключение или отклонение и в) отделение, отдаление.
Основным значением префикса un является не. В некоторых случаях префикс un означает изменение действия глагола на обратное.
Префикс de имеет несколько отрицательных значений, основными из которых являются а) вниз, ниже; б) высвобождение, отключение или отклонение и в) отделение, отдаление.
Гм… Не знаю, как в php, а в дотнете именно Deserialize:
Черт, отправилось раньше =/
msdn.microsoft.com/en-us/library/system.xml.serialization.xmlserializer_members.aspx
msdn.microsoft.com/en-us/library/system.xml.serialization.xmlserializer_members.aspx
Ха ха. Классно, тоько что сегодня делал подобную задачу и тоже для ajax-навигации! Буквально 4 часа не дошёл до вашей записи, написал вот так:
formSearchReset — это объект с данными для сброса формы. Потому что значения формы сериализуются только те, которые активны (например, снятый checkbox не будет отправлен на сервер) — поэтому в моём решении нужен этот объект со сброшенными значениями для всех элементов формы. Возможно, можно решить проще или как-то по другому.
params = url2urlData(href);
var paramsDefault = $.extend({}, formSearchReset);
$.extend(paramsDefault, params);
$.each(paramsDefault, function(name, value) {
el = form.find('*[name='+name+']');
if (el.attr('type') == 'checkbox') {
if (!value) {
el[0].checked = false;
} else {
el[0].checked = true;
}
} else if (el.attr('type') == 'radio') {
el.attr('checked', false);
el.filter('[value='+value+']')[0].checked = true;
} else {
el.val(value);
}
});
//-------------------------
function url2urlData(url) {
var urlData = {};
var param, i;
var params = url.split('&');
var len = params.length;
if (params && len > 0) {
for (i=0; i < len; i++) {
param = params[i].split('=');
urlData[param[0]] = decodeURIComponent(param[1]);
}
}
return urlData;
}
formSearchReset — это объект с данными для сброса формы. Потому что значения формы сериализуются только те, которые активны (например, снятый checkbox не будет отправлен на сервер) — поэтому в моём решении нужен этот объект со сброшенными значениями для всех элементов формы. Возможно, можно решить проще или как-то по другому.
params = url2urlData(href);
var paramsDefault = $.extend({}, formSearchReset);
$.extend(paramsDefault, params);
$.each(paramsDefault, function(name, value) {
el = form.find('*[name='+name+']');
if (el.attr('type') == 'checkbox') {
if (!value) {
el[0].checked = false;
} else {
el[0].checked = true;
}
} else if (el.attr('type') == 'radio') {
el.attr('checked', false);
el.filter('[value='+value+']')[0].checked = true;
} else {
el.val(value);
}
});
//-------------------------
function url2urlData(url) {
var urlData = {};
var param, i;
var params = url.split('&');
var len = params.length;
if (params && len > 0) {
for (i=0; i < len; i++) {
param = params[i].split('=');
urlData[param[0]] = decodeURIComponent(param[1]);
}
}
return urlData;
}
Ссылки не работают.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
jQuery.deserialize()