AJAX для начинающих

Я не буду объяснять что такое AJAX, думаю начинающие разработчики уже сталкивались с этим явлением и желают начать применять его в своих работах. О том как пользоваться им я расскажу далее. А пока я хочу развеять основной миф про Ajax. Многие говорят что Ajax это очень сложно, но если вникнуть в суть, то мы узнаем что весь Ajax состоит всего лишь из одного метода, под названием XmlHttpRequest. Он позволит нам загружать новые данные с сервера без обновления странички. Все остальные фичи типа плавного изменения размеров, прозрачности и т.д. состоят из обычного себе JavaScript.

Сразу оговорюсь что для понимания сути Ajax и использования его на своих страницах требуется минимальное знание JavaScript, ну и естественно HTML.
Итак, перейдем сразу к практике использования Ajax. Прежде всего создайте у себя папку «ajax» для удобства. В ней создайте два файла index.html и include.html. Затем откройте эти файлы в редакторе.
Внимание! Очень важно чтобы кодировка этих файлов была UTF-8. Если вы не умеете сохранять в этой кодировке обратитесь в Google. Это к слову можно сделать в обычном блокноте (Файл — Сохранить как…).
Содержимое первого файла сделаем таким:

Реализовывать будем следующее. По нажатию на ссылку в контейнер с id=ccontent будет загружаться содержимое файла include.html. Кстати, откроем его и добавим следующее:

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

Как много получается. Но если убрать комментарии к кажой строке и переменной получится совсем чуть чуть. Но это еще не все. Это всего лишь функции, которые будут обрабатывать запрос. Теперь нам нужен сам запрос. Найдем в файле index.html строчку со ссылкой:

И изменим ее на

Вы заметили что ссылка сама по себе никуда не ведет. Но мы добавили к ней обработчик события OnClick (по нажатию кнопки мыши), который содержит название нашей функции goajax и передает ей в качестве параметра страницу которую мы будем открывать.
Теперь откроем страницу index.html  в браузере, нажмем на ссылку «Загрузить» и появится текст «Привет! Я то что вам нужно!». Если у вас вместо этого появилось непонятно что (вопросики, квадратики, кракозябры), следовательно файл include.html не в кодировке UTF-8. Это особенность Ajax, он передает весь текст только в этой кодировке, так что ищите пути сохранения файла в нужной кодировке.

Вот собственно и все. Таким образом можно делать многое. Через функцию goajax можно передавать  POST и GET переменные, что позволит нам отправлять какие-либо данные без перезагрузки страницы. Чтобы это сделать нужно будет добавить в нашу функцию дополнительный параметр и в него записывать строку запроса. Но это уже тема для отдельной статьи.

Если у вас что-то не работает, можете открыть рабочий пример на этом сайте.

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

AJAX для начинающих: 1 комментарий

  1. Julia Vento

    Спасибо огромное за такое подробное разъяснение! Это именно то, что я искала =)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *