В первые годы существования Интернета всё было просто — страница представляла собой текст, возможно, с оформлением, и содержала ссылки на другие страницы.
Чтобы получить новый контент, вы переходили с одной страницы на другую. Но по мере того, как разработчики становились всё более амбициозными в отношении Интернета, пытаясь создавать интерактивные (“нативные” приложения), стало очевидно, что должен быть способ загружать новый контент на страницу без полной перезагрузки.
Для извлечения нового контента для страницы, например новых статей на сайте с бесконечной прокруткой, или для уведомления вас о новых электронных письмах используется инструмент, называемый XML HTTP-запросом (XHR). Веб-приложения, которые делают это, также называются AJAX apps, AJAX означает асинхронный JavaScript и XML.
Почти все сайты, которые загружают новый контент без перезагрузки страницы (например Facebook, Gmail, Google Maps), используют этот же метод. На самом деле, именно Microsoft, разрабатывающая Outlook Web Access, изначально создала XMLHttpRequest.
XML HTTP-запрос
Так как же XMLHttpRequest выглядит?
var req = new XMLHttpRequest();
req.onload = function (event) { . . . };
req.open('get', 'some-file.txt', true);
req.send();Первое, что нужно сделать, это создать новый XMLHttpRequest запрос, используя ключевое слово new и вызывая XMLHttpRequest как функцию.
Затем мы указываем функцию обратного вызова, которая будет вызываться при загрузке данных. Ей передаётся информация о событии в качестве первого аргумента.
Затем мы указываем, как получить нужные нам данные, используя req.open. Первым аргументом является HTTP-метод (GET, POST, PUT и т.д.). Далее идёт URL для извлечения ─ это похоже на атрибут ссылки href.
Третье ─ это логическое значение, указывающее, является ли запрос асинхронным ─ вот оно true, поэтому XMLHttpRequest запрос запускается, а затем выполнение кода продолжается до тех пор, пока ответ от сервера не вызовет обратный вызов onload.
Для асинхронного параметра по умолчанию используется значение false ─ если оно равно false, выполнение кода приостанавливается на этой строке до тех пор, пока данные не будут получены и запрос не будет вызван синхронно. Синхронные запросы XMLHttpRequests используются не часто, поскольку запрос к серверу потенциально может занять вечность. Для браузера это долгое время, когда он ничего не делает.
В последней строке мы сообщаем браузеру, чтобы он отправил запрос на данные.
Используя XMLHttpRequest, вы можете загружать HTML, JSON, XML и обычный текст по HTTP и HTTPS, а также поддерживает другие протоколы, такие как FTP и file. В целом, они очень полезны для целого ряда задач, связанных с разработкой приложений на JavaScript.
AJAX и библиотеки
Технология AJAX была разработана до такой степени, что теперь возможны одностраничные приложения ─ один основной запрос загружает код JavaScript, который затем асинхронно загружает другой контент с сервера. Для этого были созданы целые библиотеки и фреймворки, мы рассмотрим их позже.
Страницы в тему:
- Следующая страница: JSON
- Предыдущая страница: События и обратные вызовы
