JavaScript - AJAX

Технология AJAX (Asynchronous JavaScript and XML)  - это способ создания быстрых и динамичных веб-страниц. AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь небольшими объемами данных с сервером в фоновом режиме. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.

AJAX используется для решения следующих задач: 

• Чтение данных с веб-сервера - после загрузки страницы
• Обновление веб-страницы без перезагрузки страницы
• Отправка данных на веб-сервер - в фоновом режиме

Ключевым элементом AJAX является объект DOM - XMLHttpRequest.

Все современные браузеры поддерживают этот объект.

Этот бъект (XMLHttpRequest)  использоваться для обмена данными с веб-сервером в фоновом режиме. 

Создать объект XMLHttpRequest

Пример:

Доступ из разных доменов

По соображениям безопасности современные браузеры не разрешают доступ из разных доменов.

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

XMLHttpRequest - методы

abort()

Отменяет текущий запрос.

getAllResponseHeaders()

Возвращает полный набор заголовков HTTP в виде строки.

getResponseHeader( headerName )

Возвращает значение указанного HTTP-заголовка.

open( method, URL )

open( method, URL, async )

open( method, URL, async, userName )

open( method, URL, async, userName, password )

Указывает метод, URL и другие необязательные атрибуты запроса.

Параметр method может иметь значение «GET», «POST» или «HEAD». Могут быть и другие HTTP-методы, такие как «PUT» и «DELETE» (в основном используемые в приложениях REST).

Параметр «async» указывает, следует ли обрабатывать запрос асинхронно или нет. «true» означает, что обработка сценария продолжается после метода send (), не дожидаясь ответа, а «false» означает, что скрипт ожидает ответа до продолжения обработки скрипта.

send( content )

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

setRequestHeader( label, value )

Добавляет пару label / value в HTTP-заголовок, который нужно отправить.

XMLHttpRequest - свойства

Свойство XMLHttpRequest.readyState возвращает состояние, в котором находится клиент XMLHttpRequest. Клиент существует в одном из следующих состояний:

UNSENT

Клиент XMLHttpRequest был создан, но метод open () еще не был вызван.

OPENED

Вызывается метод open(). Во время этого состояния заголовки запросов могут быть установлены с использованием метода setRequestHeader(), и может быть вызван метод send(), который инициирует выборку.

HEADERS_RECEIVED

send () был вызван, и заголовки ответов были получены.

LOADING

Текст ответа принимается. Если responseType - это «текст» или пустая строка, responseText будет иметь частичный текстовый ответ при загрузке.

DONE

Операция выборки завершена. Это может означать, что передача данных была успешно завершена или не выполнена.

onreadystatechange

Обработчик событий который срабатывает при любом изменении состояния. 

responseText

Возвращает ответ как текстовую строку.

responseXML

Возвращает ответ как XML. Это свойство возвращает DOM - объект XML, который может быть проанализирован и проанализирован с использованием методов и свойств W3C DOM.

status

Возвращает статус как число (например, 404 для «Не найдено» и 200 для «ОК»).

statusText

Возвращает статус как строку (например, «Не найдено» или «ОК»).

AJAX - отправка запроса на сервер

Чтобы отправить запрос на сервер, используются  методы open () и send () объекта XMLHttpRequest:

xhttp.open ("GET", "ajax_info.txt", true);

xhttp.send ();

GET или POST?

GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.

POST-запросы используются, если:

• Не может быть использован эшированный файл (нужно обновлять файл или базу данных на сервере).
• Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
• Отправка пользовательского ввода (который может содержать неизвестные символы), POST более надежный и безопасный, чем GET.

Примеры использования

Чтение файла с сервера

• Создаём объект типа XMLHttpRequest (в переменной httpRequest)
  
• Задаём функцию, которая запускается при любых изменениях состояния этого объекта (привязываем её к событию onreadystatechange созданного объекта). Эта функция при каждом изменении состояния:
  

проверяет, завершена ли передача данных (XMLHttpRequest.DONE) и завершена успешно (status === 200)

если - да, то свойство responseText прописывается в DIV с ID="outdiv"

если - нет, то в этот DIV прописывается сообщение об ошибке

• Вызываем метод open() объекта XMLHttpRequest, который создали в переменной httpRequest (httpRequest.open('GET', 'AjaxTest.txt', true)). Этот метод создаёт асинхронный запрос на сервер, по методу GET, для получения с сервера файла с именем AjaxTest.txt
  
• Методом send() отправляем запрос на сервер. 
  
• Наша функция постоянно анализирует состояние запроса, и в случае его успешного завершения, содержимое текстового файла будет находиться в переменной httpRequest.responseText