AJAX

4
Что такое AJAX?
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

4
Как расшифровать AJAX
A – asynchronous
J – javascript
A – and
X - xml

3
Как это работает

5
API – это:
API (Application programming interface) — это контракт, который предоставляет программа. «Ко мне можно обращаться так и так, я обязуюсь делать то и это».
Договор между двумя сторонами, как договор на покупку машины:
мои обязанности — внести такую то сумму,
обязанность продавца — дать машину.

5
Технически AJAX – это:
XMLHttpRequest (XMLHTTP, XHR) — API, доступный в скриптовых языках браузеров, таких как Javascript. Использует запросы HTTP или HTTPS напрямую к веб-серверу и загружает данные ответа сервера напрямую в вызывающий скрипт. Информация может передаваться в любом текстовом формате, например, в XML, HTML или JSON. Позволяет осуществлять HTTP-запросы к серверу без перезагрузки страницы.

6
Технически, с помощью AJAX можно обмениваться любыми данными с сервером
Обычно используются форматы:
JSON - для отправки и получения структурированных данных, объектов
XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства
HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице

7
Как работает AJAX
1.Создать объект XMLHttpRequest
2.Создать callback function
3.Открыть запрос (request)
4.Отправить запрос

8
Рассмотрим на примере:

9
Создаем html структуру в index.html

10
Создаем html файл в sidebar.html

11
Создаем в index.html объект XMLHttpRequest

12
Создаем в index.html callback функцию

13
Открываем запрос

14
Отправляем запрос

15
Немного усложним:

16
Отправляем запрос

17
Изменим наш код