Асинхронный JavaScript и XML (AJAX) являются основой каждого современного веб -приложения. В JavaScript есть несколько методов, чтобы сделать вызовы AJAX, но в этом посте я собираюсь осветить, используя объект xmlhttprequest.
Асинхронное программирование
Асинхронное программирование относится к методике написания кода, которая позволяет выполнять несколько задач сразу без прерывания выполнения кода. Это очень важно для разработки JavaScript, потому что JS-однопоточный язык , что означает, что она интерпретируется линия по линии, сверху вниз.
JavaScript имеет несколько встроенных инструментов, которые помогут нам написать асинхронный код. ( settimeout и SetInterval Например, при выполнении передача функционирует в браузер, который будет вызван позднее.) Написание нашего JavaScript с учетом AJAX помогает нам расширить эти инструменты, поэтому нам не нужно ждать одной строки кода, прежде чем код продолжит выполнять.
С помощью AJAX мы можем создавать одностраничные приложения (SPA), которые динамически отображаются с помощью пользовательского ввода. Лично я не могу вспомнить, когда в последний раз я использовал веб -страницу, которая требовала полной перезагрузки страницы в любое время, когда я хотел взаимодействовать с ней. Асинхронное программирование позволяет нам более плавно взаимодействовать с нашей цифровой средой.
Все дело в клиенте и сервере
Когда мы говорим об Ajax и асинхронном коде, мы обычно имеем в виду конкретно о Client-Server Communication Анкет Ajax помогает нам писать код, который позволяет нашему приложению общаться с сервером, не прерывая взаимодействие пользователя с нашей стороной клиента, а затем потенциально обновлять наш клиент -интерфейс с любыми изменениями данных, которые сервер отправляет обратно в свой ответ.
Основы Ajax и XHR
Итак, как это происходит? Введите Xmlhttprequest объект.
Объект XHR – это объект, который можно найти в современных браузерах, который обладает кучей действительно полезных свойств, которые позволяют нам асинхронно взаимодействовать с сервером.
Мы можем использовать этот объект XHR и его методы, среди прочего: (1) отправить запросы от нашего клиента на сервер, (2) проверить состояние запроса, (3) получить ответ от сервера и потенциально (потенциально 4) Выполните какое -то действие, в зависимости от успеха или сбоя ответа сервера.
объект Xmlhttprequest в консоли браузера
Из изображения выше вы можете видеть, что у него есть все эти аккуратные свойства, в том числе некоторые из них унаследованы от его _proto_ Анкет
Те, на которых мы собираемся сосредоточиться на первом месте .открытым () и .Отправить () (которые живут на proto ). При выполнении запроса AJAX с XHR фундаментальные шаги должны (1) экземпляр объекта XHR, (2) открыть запрос и (3) отправить запрос.
Реализация вызова AJAX API с помощью объекта Xmlhttprequest
Давайте рассечь это. В строке 2 мы создаем экземпляр объекта (псевдоклассически!) с Новый ключевое слово. В строке 3, мы называем .открытым () . Наш первый параметр там указывает Метод (т.е. получить или пост). Второй, URL , где мы отправляем наш запрос. Третий параметр – это логический, который сообщает нашему коду, независимо от того, запускаю ли это асинхронно, поэтому мы установили нашу на Верно Анкет
Тогда мы используем .Отправить () Чтобы отправить запрос!
Строка 5 – это место, где происходит магия. .в процессе () является одним из пары методов на объекте XHR, который помогает нам реализовать асинхронную природу нашего призыва. При желании мы можем передать две функции обратного вызова, одна из которых будет работать в случае успеха ответа, другая в случае сбоя.
В этом случае мы проводим обратный вызов успеха, если наш Статус Код возвращается от 200 до 300, что означает, что запрос был успешным.
Вызов звонка Ajax, который мы создали выше
И тогда мы можем просто назвать нашу функцию AJAX, как мы делаем на изображении выше, проходя в методе, URL и любые обратные вызовы, которые мы хотим.
Надеемся, что этот пост взял часть загадки из Ajax и объекта Xmlhttprequest. Запросы Ajax жизненно важны для современного программирования и важны для того, чтобы научиться реализовать. Объект XHR – это лишь один из нескольких способов сделать вызов Ajax на сервер.
Оригинал: “https://dev.to/joannat/an-intro-to-ajax-and-the-xmlhttprequest-object-2klf”