В данном посте я опишу как сделать простейший AJAX запрос GET из JavaScript без использования сторонних библиотек. Тем не менее, многие JavaScript фреймворки (например, jQuery) имеют встроенные функции для инициализации AJAX запросов.

Для создания AJAX запросов, в JavaScript имеется объект XMLHttpRequest. Несмотря на его название, запрос может быть никак не связан с XML. В зависимости от реализации сервера, ответ может отдаваться в любом текстовом формате, например, JSON (собственно, для которого и будет рассмотрен пример).

Перейдём к рассмотрению примера.

// Создаём объект запроса
var request = new XMLHttpRequest();

 // Указываем тип запроса (GET) и адрес, к которому будет выполнятся запрос
var url = "http://site.com/";
request.open("GET", url);

// Задаём функцию, которая будет вызываться при изменении состояния готовности запроса
request.onreadystatechange = function () { 
	// Проверяем состояние готовности и статус запроса
	if (request.readyState === 4 && request.status === 200) { 
		// Десериализуем полученную JSON строку в объект JavaScript
		var response = JSON.parse(request.responseText); 
	}
}

Немного подробностей о проверке состояния готовности и статуса запроса. Всего есть пять состояний готовности:

• 0: запрос не инициализирован;
• 1: соединение с сервером установлено;
• 2: запрос получен;
• 3: обработка запроса;
• 4: запрос закончен и ответ получен;

и два статуса:

• 200: всё прошло успешно;
• 404: страница не найдена.

Стоит отметь, что данный пример корректно сработает только при ответе сервера в формате JSON. Чтобы обработать ответ в другом формате, нужно заменить функцию JSON.parse(), на функцию, выполняющую парсинг с используемого вами формата. Также можно вообще не обрабатывать ответ, а использовать просто как строку. Использование JSON позволяет получать в ответах сериализованные объекты JavaScript.

На этом всё. Сообщить о неточностях и задать вопросы можно в комментария или через форму обратной связи.

comments powered by Disqus