Введение с нуля, для тех, кто начинает с нуля: AJAX

автор: Майк Никсон

Изучение AJAX с нуля — часть 1

Этот блог будет первым из нескольких сообщений в блоге об AJAX. Вместе я приведу вас к пониманию, которое позволит вам полностью понять основы AJAX и способы его реализации. Прежде чем мы начнем, следует отметить, что AJAX — это не язык программирования, а скорее техника. Он используется несколькими языками программирования, и каждый использует свой собственный способ получения одного и того же результата. Таким образом, необходимо знать некоторый уровень программирования, прежде чем мы перейдем к более технической стороне дела.

Что такое АЯКС?

Начнем с самого простого: AJAX означает асинхронный JavaScript и XML. Что это значит? Когда веб-сайт хочет взаимодействовать с базой данных или сервером, ему обычно требуется что-то вроде JavaScript для отправки сообщения. После того, как сайт отправит свое сообщение, единственный способ для страницы отобразить запрошенную информацию — перезагрузить всю страницу. Это может привести к тому, что пользователи будут испытывать более медленное взаимодействие с веб-страницей, потому что ей постоянно приходится перезагружать все свое содержимое для чего-то такого, казалось бы, простого, как звездный рейтинг на розничном или туристическом сайте.

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

Как работает АЯКС?

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

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

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

Ваше блюдо популярно?
Сколько времени ушло на изготовление?
Подходит ли он лучше всего для определенного времени суток?
Люди всегда заказывают его без лука? может пора его изначально предлагать без лука, с возможностью добавить лук

Теперь, если мы применим тот же набор шагов к веб-сайту, вы можете начать представлять себе, как все работает. Чтобы представить это в перспективе, подумайте о таком сайте, как Google. Когда вы попадаете на его домашнюю страницу, у вас есть логотип Google и небольшое поле прямо под ним, которое ждет, когда вы что-нибудь введете (рис. 1).

Допустим, вы хотите узнать, где находится то большое маленькое кафе на другом конце города, о котором говорили все ваши друзья.

Вы вводите его адрес, и появляются карты Google с хорошим изображением близлежащих улиц и булавкой, на которой находится это кафе. Отлично, вы знаете, где это, но как туда добраться? Вы нажимаете кнопку с надписью «Проложить маршрут» и пуф, теперь у вас есть синяя линия, которая соединяет вас от вашего текущего местоположения до кафе (рис. 2).

Весь тот ресторанный опыт, о котором мы говорили раньше, просто. случилось. Впрочем, это случалось не раз. При вводе своего имени Google, вероятно, пытался предложить вам разные адреса, это было впервые (рис. 3). Он загружал предложения без перезагрузки страницы, обновляя только те элементы страницы, с которыми вы взаимодействуете. Во-вторых, вы, наверное, заметили, что булавка вашего кафе не исчезала, когда вы хотели проложить маршрут от вашего местоположения, и весь сайт не перезагружался, а только карта. Он помнил, где находится кафе, и прокладывал наиболее эффективный маршрут, исходя из этого района. Если по пути вы хотели увеличить улицу, потому что не видели ее названия, вы определенно можете это сделать. Это все примеры AJAX, и это только один широко используемый сайт, который его использует. Есть еще много примеров.

Шаги AJAX

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

1. На веб-странице происходит событие (страница загружается, нажимается кнопка)

2. Объект XMLHttpRequest создается с помощью JavaScript.

3. Объект XMLHttpRequest отправляет запрос на веб-сервер.

4. Сервер обрабатывает запрос

5. Сервер отправляет ответ обратно на веб-страницу.

6. Ответ читается JavaScript

7. Правильное действие (например, обновление страницы) выполняется с помощью JavaScript.

Откуда взялся AJAX?

Почему бы не начать с того, откуда и когда появился AJAX. Впервые AJAX был представлен в марте 1999 года, когда Internet Explorer 5.0 выпустил XMLHTTP в своей библиотеке MSXML. Позже он будет включен в популярные браузеры:

Мозилла
Сафари
Опера

Internet Explorer 7.0 реализовал его как собственную модель XMLHttpRequest, но он оставался малоизвестным и не использовался в коммерческих целях. Только когда Google и Kayak.com попытались использовать AJAX в своих продуктах (Gmail (2004 г.), Kayak.com (2004 г.) и Google Maps (2005 г.)) возникли проблемы и вынудили Консорциум World Wide Web ( W3C) для создания стандартов для XMLHttpRequest. В 2005 году AJAX будет назван в статье, написанной Джесси Джеймсом Гарреттом. До этого момента у AJAX не было названия, и разработчики Kayak.com называли его вещью XML HTTP.

Проблемы

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

AJAX — это не веб-сервлет, и в этом нет ничего плохого. Веб-сервлеты похожи на телефонный разговор. Должен быть кто-то, кто поднимает трубку на каждом конце, чтобы поговорить. AJAX отличается тем, что это телефонный разговор, который всегда идет на голосовую почту, поэтому сервер и AJAX всегда проигрывают тег телефона (рис. 4). Результатом использования этого метода связи с AJAX является то, что он будет сильнее нагружать веб-сервер. Это становится проблемой только в том случае, если вы используете функцию автоматического обновления, которая требует обновления каждые несколько секунд.

Помимо этих проблем, использование AJAX является очень популярным способом повышения общей производительности.

Что дальше?

Надеюсь, теперь вы лучше понимаете, что такое AJAX и как он работает. В следующих постах я более подробно расскажу о том, как подготовиться к внедрению методов AJAX в проект.

Если вам понравилось читать мой пост, следите за этой страницей, так как я обновлю эту страницу ссылкой на мой следующий выпуск, когда он будет готов к работе. Удачного кодирования!

— — — — — — — — — — — — — — — — — — — — -