<MyRusakov.ru />

Joomla 3 с Нуля до Гуру

Joomla 3 с Нуля до Гуру

Видеокурс «Joomla 3 с Нуля до Гуру» поможет Вам повысить свой уровень в веб-разработке и научит создавать удобные и эффективные сайты на Joomla 3. Курс подходит как для опытных вебмастеров, так и для новичков, кто ещё только начинает.

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

После планирования начинается техническая реализация и создание собственного адаптивного шаблона.

Далее рассмотрен процесс переноса и настройки на хостинге, оптимизация под поисковые системы и защита от хакерских атак.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Теория и практика AJAX-запросов

Теория и практика AJAX-запросов

В этой статье мы разберем основы AJAX запросов. Научимся настраивать и отправлять запрос, а также получать ответ от сервера.

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

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

AJAX – это асихронный JavaScript и XML и он не является языком программирования.

Полезность AJAX состоит в том, что он позволяет обращаться к серверу, делать новые http запросы, без перезагрузки страницы. Именно благодаря его асинхронности, взаимодействие пользователя со страницей, никогда не прекращается.

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

Что делает браузер?

  • отображает веб-страницу
  • выполняет JavaScript код
  • содержит объект XMLHttpRequest

Какая роль у JavaScript?

  • инициирует обращение к серверу
  • обрабатывает ответ
  • добавляет новые данные на страницу

Чем занимается веб-сервер?

  • принимает запрос от браузера
  • отправляет ему информацию обратно

Как на практике происходит AJAX запрос?

1) Создается объект XMLHttpRequest

Благодаря этому объекту мы посылаем запрос и получаем ответ.

var xhttp = new XMLHttpRequest();

2) Пользователь отправляет запрос на сервер

С помощью методов open() и send(), объекта XMLHttpRequest, можно отправлять AJAX запросы. В методе open() первым параметром, мы должны указать способ отправки. Вторым параметром, указывается URL, куда будет отправлен запрос.

xhttp.open("способ_отправки", "URL");

Непосредственно посылает на сервер запрос – метод send(). При GET запросе тело запроса остается пустым.

xhttp.send();

3) Сервер обрабатывает запрос

В большинстве случаев, сервер обрабатывает и возвращает запрос на языке PHP.

4) Принятие и обработка ответа

С помощью свойства readyState, можно узнать состояние запроса. При изменении состояния, срабатывает событие onreadystatechange.

xhttp.onreadystatechange

Применим, полученные знания на практике.

Пример

Вместо текста в параграфе, загрузить другой текст, в фоновом режиме.

<p id="out">Позвольте AJAX изменить этот текст.</p>

Вешаем функцию loadTxt(), на кнопку, при нажатии на которую произойдет замена текста.

<button type="button" onclick="loadTxt()">Изменить контент</button>

Будет вызван обработчик события onreadystatechange, если состояние готовности запроса readyState равно 4 (прием ответа завершен) и код статуса HTTP, возвращенный сервером соответствует 200. Сервер возвращает новые данные в responseText, которые будут выведены внутри параграфа с идентификатором out. Open() настраивает запрос, send() открывает соединение и отправляет запрос на сервер. Новые данные подгружаются из текстового или XML файла.

See the Pen ajax-request by porsake (@porsake) on CodePen.


Теория и практика AJAX-запросов

Заключение

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

AJAX технологии на примере социальных сетей

Например, вы зашли на страницу фейсбука и видите только три новости, при прокрутке страницы вниз, будут подгружаться новые посты. Как это работает?

JavaScript по протоколу HTTP посылает запрос на сервер. На сервере PHP формирует ответ с новыми постами, отдает их на сторону клиента и браузер отображает их на странице, используя HTML и CSS. Не существует отдельной технологии AJAX, это просто совместная работа нескольких технологий, где ведущая роль отведена JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.