dinamyte 19 сен 2007 в 12:00

AJAX для новичков

8 мин

701K

Ajax *

+39

Комментарии 88

vedburtruba 19 сен 2007 в 12:26

Помоему в сети хватает подобных руководств. Это вы сами писали?

dinamyte 19 сен 2007 в 12:36

Да, сам писал.

Подобных руководств действительно хватает, но на Хабре не нашёл такой обзорной статьи для новичков... Да и новичков здесь мало (: Поэтому, кстати, и не стал публиковать в коллективных блогах.

dinamyte 19 сен 2007 в 13:00

Всё-таки опубликую в блоге AJAX, чтобы новички знали что да как ;)

Devgru 19 сен 2007 в 13:07

мне кажется есть смысл в Викиучебник написать (вернее, начать писать там учебник по AJAX) ибо статей там (в русском разделе учебника) мало, а авторы хорошие — вот они

chuwy 22 сен 2007 в 08:52

Плюсик вам за хороший ресурс. Не знал такого.

dinamyte 22 сен 2007 в 09:04

Да как-то не знаком с таким сайтом был до Вашего сообщения... (:

gro 19 сен 2007 в 13:05

Заметьте, что названия методов записаны в том же стиле (Camel-style),
...
Open()

//Internet explorer

Request = new ActiveXObject("Microsoft.XMLHTTP");



if (!Request)

{

HRequest = new ActiveXObject("Msxml2.XMLHTTP");

}

Если первый не сработает, будет исключение. Нужно ловить через try.

dinamyte 19 сен 2007 в 13:10

Спасибо, исправил. Плюс исправил еще одну ошибку - был HRequest почему-то заместо Request.

gro 19 сен 2007 в 13:07

if (Request.status == 200)
{
//Если обмен данными завершен
if (Request.readyState == 4)
{
//Передаем управление обработчику пользователя

Наоборот надо.

gro 19 сен 2007 в 13:09

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

dinamyte 19 сен 2007 в 13:18

Может быть где-то Вы и правы, но с помощью опытных пользователей Хабра можно будет вместе довести материал до определённого блеска, чтобы можно было подавать пользователям.

Насчёт несвязности: мне кажется, что всё логично - введение, обзор главного объекта и, наконец, обзор прилегающих компонентов.

dfitiskin 19 сен 2007 в 16:37

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

dinamyte 19 сен 2007 в 16:54

Спасибо за совет. Очень точное замечание. Предлагаю вместе подумать над примерами подобных улучшений.

Я думаю, что сам факт динамической подгрузки и отображения данных - это сама по себе большая возможность получить информацию непосредственно после действия пользователя. Да и отдача от интерфейса идёт больше, по сравнению с интерфейсами, созданными без использования AJAX. То есть, например, если мы делаем форму входа в систему (т.н. "sign in" или "логин"), то мы можем без перезагрузки страницы определить ложные данные, введённые пользователем (лишние символы). В таком случае мы немедленно вернём пользователю ошибку, выведем её в соответствующий элемент интерфейса и пользователь повторит ввод, исправит предыдущие данные. Да и сама форма, например, после входа в систему, исчезает и появляются другие элементы управления (профиль и т.п.). Или я не о том?

И прошу прощения за, возможно, несвязную речь - устал сегодня очень.

Red_Lemur 19 сен 2007 в 13:22

В начале текста имеется ссылка на изображение (рис. 1) Где можно взглянуть?

dinamyte 19 сен 2007 в 13:30

Тут же (:

MTonly 19 сен 2007 в 14:00

На слове «заместо» споткнулся и дальше читать не смог. ;-)

dinamyte 19 сен 2007 в 14:03

Это не я! Это НЛО! ;)

avenu 19 сен 2007 в 14:05

Пришел к выводу, что AJAX - это XMLHttpRequest + обработка разных браузеров. Остальное - вставка в элементы и серверная часть. Т.е. по сути, просто копируется эта обработка на разные сайты и все. В этом смысле удобен Prototype, но весит он многовато. Плюс, в редких случаях может понадобится обработка XML в Javascript. А она геморойная, конечно....

dinamyte 19 сен 2007 в 14:10

Но почему вставка в элементы и обработка XML-ответа, по Вашему мнению, не является частью AJAX? Ведь AJAX - это Asynchronous Javascript and XML, то есть всё, что относится непосредственно к обработке данных и есть AJAX, мне так кажется...

avenu 19 сен 2007 в 14:30

Ну все верно, в принципе, просто на практике (с чистым аяксом) пишется несколько универсальных функций, которые потом переносятся в новые проекты. Т.е. просто подставление в нужный div полученного через AJAX содержимого.

GubkaBob 19 сен 2007 в 14:13

менять психологию - тяжело :)
столкнулся, когда первый раз flex попробовал....

вот там - либо AJ, либо никак :)

diamant 19 сен 2007 в 15:01

полгода назад партия сказала "надо", программист ответил "есть", и я начал писать AJAX-приложения
http://www.google.com/search?q=ajax+gett… выдал сайт мозиллы, где нашлось простенькое руководство, подобное вашему, так я и стал AJAX-программистом :)

рекомендую книжку Ajax in action

dinamyte 19 сен 2007 в 15:10

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

Я книжку Ajax in action читал на английском, просто на русском языке она появилась гораздно позже... Русскую версию я не видел, но спасибо за информацию - посмотрю теперь.

dfitiskin 19 сен 2007 в 16:32

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

dinamyte 19 сен 2007 в 16:40

Это не редкое явление, что в переводах встречаются казусы... Мне не раз попадалось такое. Стараюсь читать оригиналы.

Irokez 19 сен 2007 в 16:00

аякс - новая технология?

dinamyte 19 сен 2007 в 16:11

В это слово я вложил такой смысл: относительно других технологий AJAX является новоявленной, то есть полноценно использоваться она стала позже, относительно, например, использования обычного JavaScript.

dfitiskin 19 сен 2007 в 16:40

можно еще посмотреть книгу Ajax для профессионалов

dinamyte 19 сен 2007 в 16:56

Хорошая идея: в конце статьи можно добавить список ссылок по теме (например, на Framework-и) и список литературы по теме. Две книжки уже есть. Рекомендуйте, пожалуйста, ещё. (:

ripos 19 сен 2007 в 17:09

Бгыгы. Предвещали же. Попсеет хабр.
Скоро будет «PHP для новичков» и «Основы языка HTML, как языка программирования для глобальной сети Интернет».

maxik 20 сен 2007 в 09:54

тут что, все без исключения - программисты?

bob_smith 19 сен 2007 в 17:19

Класс. Мне как раз потребовалось узнать начальные сведения про AJAX - а тут Ваша статья. Спасибо!

dinamyte 19 сен 2007 в 17:24

Очень рад, что кому-то она помогла. Значит старания не пропали даром.

denver 19 сен 2007 в 17:34

Существует такая практика, как "холостой" запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

Странно слышать что AJAX юзают для такой ерунды. Для подобной мелочи используется <img> (и при этом даже реально получить ответ от сервера вида ок / не ок).

eval("var responsedata = (" + Request.responseText + ")");

var responsedata = eval("(" + Request.responseText + ")") выглядит проще, правда это мелочи.
В целом правильная (но несколько поздняя) статья :)

Jenek 19 сен 2007 в 21:30

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

denver 20 сен 2007 в 09:50

Не нравятся img - подходят script, link, object, iframe :)

Jenek 20 сен 2007 в 10:14

И <td> можно, но я предпочитаю использовать их по прямому назначению, зачем изобретать столь изощренные велосипеды, когда можно прокатиться на AJAX`е

denver 20 сен 2007 в 15:17

Как с <td>?

Jenek 20 сен 2007 в 15:33

там не только с td, а со многими тегами, вот выдрал с одного древнего справочника:

<BODY BACKGROUND="2.gif">

<TABLE BORDER COLS=2 WIDTH="100%" BACKGROUND="1.gif" >

<TR BACKGROUND="1.gif">

<TD BACKGROUND="1.gif">

а вообще у каждого елемента есть свойство element.style.background-image, можно использовать и свойство background в CSS

это, конечно, все вариации на тему img, но все таки, иллюстрирует количество способов которыми можно кинуть запрос на сервер

PS: почему на хабре такое маленькое окно для комментов?

dinamyte 20 сен 2007 в 15:37

а вообще у каждого елемента есть свойство element.style.background-image, можно использовать и свойство background в CSS

Надеюсь, что element.style.background-image было лишь опечаткой, так как в JavaScript используется Camel-Style для именования свойств CSS и указанное свойство должно иметь вид element.style.backgroundImage

Jenek 20 сен 2007 в 17:11

:) конечно, опечатка, с CSS спутал, когда, за день раз 40 переключаешься с одного на другое, такого стоило ожидать

dinamyte 20 сен 2007 в 17:12

Понимаю...

Jenek 19 сен 2007 в 21:19

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

dinamyte 20 сен 2007 в 01:38

Извиняюсь, но это не моя вина. Код был изначально отформатирован с использованием табуляции (я всегда форматирую код и никогда не позволяю себе создавать в нём свалку), но с включенным автоформатированием он расползался сильно. Сейчас я отключил автоформатирование и подправил статью.

Нехватает подсветки кода различных языков на Хабре... :(

demon_guru 19 сен 2007 в 21:45

Хорошая статья. Благодарю.

НЛО прилетело и опубликовало эту надпись здесь

dinamyte 20 сен 2007 в 01:51

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

Я считаю, что просто необходимо знать как работает такая технология изнутри. Может быть, на практике это и неприменимо (сам использую различные фреймворки), но, по моему мнению, это довольно-таки полезно и интересно!

zencd 20 сен 2007 в 05:06

спасибо, ознакомился как оно воркает :)

зря

  только

    вы код

        не отформатировали: тег <pre>

dinamyte 20 сен 2007 в 05:29

Отформатировал же... может браузер кеширует?

zencd 20 сен 2007 в 05:34

ага, это я заGETил страничку сильно заранее перед тем как прочитать — асинхронным так сказать запросом :)

k0t_igrun 20 сен 2007 в 07:09

меня всегда так коробит, когда AJAX называют новой технологией .)))

предлагаю велосипед с клаксоном называть качественно новой технологией, нежели велосипед без клаксона .))

dinamyte 20 сен 2007 в 07:28

Я в комментариях выше объяснял, почему я назвал её новой технологией.

afy 20 сен 2007 в 07:18

http://dklab.ru/lib/JsHttpRequest/ - уж лучше тогда новичкам это использовать.
тут и документация есть полная(с примерами), и обработчики для клиента и сервера уже написаны, да и функционал не маленький.
на мой взгляд довольно удобная штука.

yar 20 сен 2007 в 08:01

Да, на dklab.ru оличная библиотека, с очень хорошей документацией, сам пользовал ее.
Но покопавшись в низкоуровневом AJAX, пришло понимание, что дело это неблагодарное, надо использовать готовые фрэймворки, в которых все это скрыто, благо таких фрэймворков уже куча.

stakost 20 сен 2007 в 07:41

Очень хорошая статья для новичков! А то молодое поколение активно использует framework'и и толком то и не знает, из чего они состоят.

morkovka 20 сен 2007 в 07:49

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

legos 20 сен 2007 в 09:27

Восхитительно! Узнал много нового =)

alexbig 20 сен 2007 в 12:52

лучше бы вначале сделали вступление про объекты и как их писать, вместо мусора функций.
var Ajax =
{
send: function() { /* stuff */ },
show: function() { /* stuff */ }
}

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

dinamyte 20 сен 2007 в 13:02

В компетенцию статьи про AJAX, я думаю, не входит описание работы с объектами в JavaScript. К тому же, существует не один способ использования создания объектов.

alexbig 20 сен 2007 в 13:39

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

dinamyte 20 сен 2007 в 14:37

Вы имели ввиду что-то подобное этому: http://dinamyte.habrahabr.ru/blog/25731.… ?

alexbig 20 сен 2007 в 14:42

да - отличная статья!

Zeroglif 21 сен 2007 в 20:54

Зачем удалили-то? Только время потерял, комментируя. Или не переделке?

dinamyte 22 сен 2007 в 02:06

Дорабатываю с учётом всех замечаний.

XXXVII 24 сен 2007 в 10:46

Я как раз заказал AJAX для профессионалов у Нигмы:) Как ловко попал))

dinamyte 24 сен 2007 в 11:38

Вот видите, как бывает... (:

recoilme 2 окт 2007 в 08:26

Добавьте кто-ть что-ли плиз ссылку на хорошую статью, у меня репы не хватает)
title: Creating an AJAX Rating Widget
url: http://www.progressive-coding.com/tutorial.php?id=6
В статье подробно и с примерами рассказано как сделать ajax виджет рейтингов с анимацией, рассмотрено его подключение к серверной стороне и использование различных фремворков:
- dojotoolkit
- mootools, йеа, бэйби!
- jQuery
- prototype
код прилагается

esenin 25 окт 2007 в 07:23

Википедия

Valeratal 10 окт 2007 в 19:02

Люди, знающие AJAX
подскажите, как сделать чтобы кодировка не глючила в данных AJAX закладках
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
вставлюю русский текст в файлы, которые подгружаются, и все - кракозябры