Tutorial

1. AJAX это не одна ф-ция, а группа технологий

2. Операция AJAX носит асинхронный характер (см документ loop.html)

3. Детальный разбор стандартного AJAX запроса

Пример 1. Cтандартный AJAX запрос (пошаговый разбор запроса на сайт https://jsonplaceholder.typicode.com )

	// ШАГ 1. ФОРМИРУЕМ ОБ-Т ЗАПРОСА
	const request = new XMLHttpRequest()

	// ШАГ 2. СТАВИМ НА ОБ-Т СОБЫТИЕ readystatechange
	// СОБЫТИЕ readystatechange - СРАБАТЫВАЕТ, КОГДА ИЗМЕНЯЕТСЯ СТАТУС ОТПРАВЛЕННОГО НАМИ ЗАПРОСА
	request.addEventListener('readystatechange', (e) => {
		/*

			ШАГ 5. ОБРАБАТЫВАЕМ ДАННЫЕ ЗАПРОСА

				e - ОБ-Т СОБЫТИЯ readystatechange, КОТОРЫЙ СОДЕРЖИТ	ИНФОРМАЦИЮ ПО ЗАПРОСУ

				e.target.readyState - если = 4, это означает, что операция 
										отправки и получения запроса завершена

				e.target.status - статус ответа сервера. Если равен 200, ответ с сервера получен. 
									Другие возможные значения: 404 - документ не найден,
											500 - внутренняя ошибка сервера

				e.target.responseText - данные, которые приходят с сервера. Чаще всего в формате JSON. 
											Реже в формате XML

		*/
		try {
			// ШАГ 6. ДЕЛАЕМ ПРОВЕРКУ, ЧТО СОБЫТИЕ СРАБОТАЛО (4) И ОТВЕТ С СЕРВЕРА УСПЕШНЫЙ (200)
			if (e.target.readyState === 4 && e.target.status === 200) {
	
				// ШАГ 7. ИСПОЛЬЗОВАНИЕ ПОЛУЧЕННЫХ С УДАЛЁННОГО СЕРВЕРА ДАННЫХ В КОДЕ
				console.log('ДАННЫЕ С СЕРВЕРА: ', JSON.parse(e.target.responseText) )
			}
		} catch (error) {
			// error
		}
		
	})

	// ШАГ 3. ФОРМИРУЕМ ДАННЫЕ ДЛЯ ЗАПРОСА. В ДАННОМ СЛУЧАЕ - МЕТОД (GET) И URL АДРЕС ЗАПРОСА
	request.open('GET', `https://jsonplaceholder.typicode.com/todos/1`)
	// ШАГ 4. ОТПРАВЛЯЕМ ЗАПРОС
	request.send()

AJAX (Asynchronous Javascript and XML)

Вводная информация

Упражнения