dinamyte Sep 19 2007 at 16:00

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

8 min

646K

Ajax*

+39

Comments 88

vedburtruba Sep 19 2007 at 16:26

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

dinamyte Sep 19 2007 at 16:36

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

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

dinamyte Sep 19 2007 at 17:00

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

Devgru Sep 19 2007 at 17:07

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

chuwy Sep 22 2007 at 12:52

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

dinamyte Sep 22 2007 at 13:04

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

gro Sep 19 2007 at 17:05

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

//Internet explorer

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



if (!Request)

{

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

}

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

dinamyte Sep 19 2007 at 17:10

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

gro Sep 19 2007 at 17:07

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

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

gro Sep 19 2007 at 17:09

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

dinamyte Sep 19 2007 at 17:18

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

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

dfitiskin Sep 19 2007 at 20:37

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

dinamyte Sep 19 2007 at 20:54

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

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

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

Red_Lemur Sep 19 2007 at 17:22

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

dinamyte Sep 19 2007 at 17:30

Тут же (:

MTonly Sep 19 2007 at 18:00

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

dinamyte Sep 19 2007 at 18:03

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

avenu Sep 19 2007 at 18:05

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

dinamyte Sep 19 2007 at 18:10

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

avenu Sep 19 2007 at 18:30

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

GubkaBob Sep 19 2007 at 18:13

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

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

diamant Sep 19 2007 at 19:01

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

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

dinamyte Sep 19 2007 at 19:10

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

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

dfitiskin Sep 19 2007 at 20:32

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

dinamyte Sep 19 2007 at 20:40

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

Irokez Sep 19 2007 at 20:00

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

dinamyte Sep 19 2007 at 20:11

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

dfitiskin Sep 19 2007 at 20:40

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

dinamyte Sep 19 2007 at 20:56

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

ripos Sep 19 2007 at 21:09

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

-3

maxik Sep 20 2007 at 13:54

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

bob_smith Sep 19 2007 at 21:19

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

dinamyte Sep 19 2007 at 21:24

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

denver Sep 19 2007 at 21:34

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

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

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

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

Jenek Sep 20 2007 at 01:30

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

denver Sep 20 2007 at 13:50

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

Jenek Sep 20 2007 at 14:14

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

denver Sep 20 2007 at 19:17

Как с <td>?

Jenek Sep 20 2007 at 19: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 Sep 20 2007 at 19:37

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

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

Jenek Sep 20 2007 at 21:11

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

dinamyte Sep 20 2007 at 21:12

Понимаю...

Jenek Sep 20 2007 at 01:19

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

dinamyte Sep 20 2007 at 05:38

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

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

demon_guru Sep 20 2007 at 01:45

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

UFO just landed and posted this here

dinamyte Sep 20 2007 at 05:51

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

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

zencd Sep 20 2007 at 09:06

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

зря

  только

    вы код

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

dinamyte Sep 20 2007 at 09:29

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

zencd Sep 20 2007 at 09:34

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

k0t_igrun Sep 20 2007 at 11:09

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

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

dinamyte Sep 20 2007 at 11:28

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

afy Sep 20 2007 at 11:18

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

yar Sep 20 2007 at 12:01

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

stakost Sep 20 2007 at 11:41

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

morkovka Sep 20 2007 at 11:49

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

legos Sep 20 2007 at 13:27

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

alexbig Sep 20 2007 at 16:52

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

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

dinamyte Sep 20 2007 at 17:02

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

alexbig Sep 20 2007 at 17:39

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

dinamyte Sep 20 2007 at 18:37

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

alexbig Sep 20 2007 at 18:42

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

Zeroglif Sep 22 2007 at 00:54

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

dinamyte Sep 22 2007 at 06:06

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

XXXVII Sep 24 2007 at 14:46

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

dinamyte Sep 24 2007 at 15:38

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

recoilme Oct 2 2007 at 12:26

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

esenin Oct 25 2007 at 11:23

Википедия

Valeratal Oct 10 2007 at 23:02

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