Начинаем работать с Ajax
05.10.2017
В 2005 году начала набирать популярность сравнительно новая технология, называнная Ajax. Название Ajax происходит от Asynchronous JavaScript and XML. В двух словах это использование объекта XMLHttpRequest для взаимодействия с серверными сценариями. Он может отправлять и принимать информацию в различных форматах, включая XML, HTML и текстовые файлы.
Ajax имеет очень большие возможности, а его асинхронная природа позволяет обходиться без перезагрузки страницы. Это дает вам возможность обновлять часть страницы в зависимость от действий пользователя и является краеугольным камнем Rich Internet Applications (RIA) часто обсуждаемым в контексте Web 2.0
Молниеносная AJAX загрузка страниц сайта с jQuery PJAX
DOM играет в Ajax несколько ролей, как вы будете использовать DOM зависит от того, как вы собираетесь обрабатывать ответ полученный от сервера. Вы можете получить ответ в виде текста, используя свойство responseText, или вы можете работать с XML, используя responseXML. Допустим, вы получаете от сервера ответ в виде части (X)HTML страницы для этого вы используете свойство responseText, вы можете добавить этот текст, в необходимую точку страницы используя innerHTML. Если же сервер отправляет ответ в виде XML, вы должны использовать responseXML, вы можете просматривать его DOM, проводить выборку или выполнять операции над элементами, атрибутами и текстовыми узлами.
HTML/CSS. Основы JS (JQUERY). Вадим Нагорный в IT-School Spalah.
Все это может казаться очень запутанными, но станет гораздо понятней после того как мы рассмотрим примеры.
Чтобы проследить наши действия шаг за шагом читайте комментарии к примерам.
Для простого примера использования Ajax, основанного на свойстве innerHTML мы создадим адресную книгу. Начнем с кода XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Адресная книга на Ajax (XML версия)</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="addressBook.js"></script> <link rel="stylesheet" href="../styles.css" type="text/css" media="all"> </head> <body> <h1>Пример адресной книги с использованием Ajax</h1> <form action="/stuff/start-with-ajax/xml/index.php" method="POST"> <fieldset> <legend>Выбор адресата</legend> <select id="person" name="person"> <option value="">Никто не выбран</option> <option value="1">Иванов Иван</option> <option value="2">Владимир Петров</option> </select> <input type="submit" id="submit" name="submit" value="Показать адрес" /> </fieldset> </form> <pre id="address"></pre> </body> </html>Как видите, у нас есть простая форма с элементом управления select, с помощью которого выбирается человек. Кроме того, мы предоставляем стандартный механизм запроса с помощью формы, на случай если наш JavaScript не запустится. Ниже формы у нас расположен элемент pre в котором будет отображаться адрес, получаемый из базы данных.