ћерион Ќетворкс

6 минут

ѕри изучении принципов написани€ программного кода вы, веро€тно, встречались с термином AJAX и задавались вопросом, что же он значит. „то это Ц €зык программировани€, платформа или приложение? Ќа самом деле ничего из перечисленного, но к концу прочтени€ этой статьи вы будете знать, что же такое AJAX (Asynchronous Javascript and XML - асинхронные сценарии JavaScript и XML).

AJAX

»стори€ AJAX

ƒо конца 1990-х годов большинство веб-сайтов могли выдавать в качестве результата только полные веб-страницы при посещении страницы на сайте. »наче говор€, дл€ того, чтобы перезагрузить какие-либо отдельные данные, вам необходимо было перезагрузить всю страницу.

Ёто был не самый эффективный способ предоставлени€ информации пользовател€м, и, соответственно, не очень хорошо сказывалось на впечатлени€х пользователей от взаимодействи€ с сайтом. “акже это увеличивало нагрузку на серверы и пропускную способность, необходимую дл€ обслуживани€ данных.

¬ 1996 году Microsoft представила тег iframe дл€ Internet Explorer, который позвол€л браузеру асинхронно извлекать данные в фоновом режиме. Ёто был шаг в верном направлении на пути к современным веб-приложени€.

¬ 2004 году Google добавила в Gmail функцию, позвол€ющую получать данные в фоновом режиме, а в 2005 году они сделали то же самое и дл€ Google Maps.

“ехнологии Google и Microsoft позвол€ли разработчикам получать данные с веб-сервера с помощью JavaScript без необходимости перезагружать страницу. ¬ 2005 году ƒжесси ƒжеймсон √арретт в своей статье (о том, как Google добились такого результата) назвал эту технологию AJAX. Ёта технологи€ быстро стала одним из самых попул€рных способов создани€ веб-приложений.

ј теперь, когда вы узнали немного из истории AJAX, давайте посмотрим, как это работает.


 ак работает AJAX?

„то делает работу AJAX возможной, так это встроенный в веб-браузер объект XMLHttpRequests (XHR). Ётот объект поддерживают все современные браузеры, включа€:

  • Chrome
  • Firefox
  • IE7+
  • Safari
  • Opera

Ѕольшинство библиотек JavaScript, которые используют AJAX, помещают этот объект в пользовательский код дл€ того, чтобы упростить его использование разработчиками, но мы рассмотрим, как AJAX работает в обычном JavaScript.

ѕервый шаг Ц создать переменную, котора€ будет создавать дл€ вас экземпл€р объекта XMLHttpReaquests в JavaScript. Ќиже приведен пример:

const request = new XMLHttpRequest();

ѕоскольку мы хотим использовать эти данные в дальнейшем, например, хотим распечатать их на веб-странице, то мы добавим к этому запросу получатель запроса, который сообщит нам, когда наш запрос закончит обрабатыватьс€ и получит нужные данные.

 ак можно пон€ть из самого термина, запросы AJAX выполн€ютс€ асинхронно. Ёто значит, что код JavaScript продолжает работать после отправки запроса и не ждет ответа. ѕрикрепив получатель запросов, мы можем перехватить ответ, когда он будет готов. —делаем мы это вот так:

function requestListener() {
    console.log(this.responseText);
}

request.addEventListener("load", requestListener);    

¬ыше у нас есть функци€, котора€ выводит ответ на консоль JavaScript, которую мы можем получить из атрибута responseText объекта XMLHttpRequests. «атем мы присоедин€ем эту функцию к событию load нашего запроса.

—ледующий шаг Ц используем этот объект дл€ отправки запроса к серверу с помощью метода open объекта XMLHttpRequests. ћетод open принимает два параметра. ѕервый параметр Ц это используемый метод запроса. Ќиже приведены несколько наиболее распространенных методов:

  • GET: этот метод используетс€ дл€ извлечени€ данных и €вл€етс€ наиболее распространенным.
  • POST: этот метод отправл€ет данные запрошенному ресурсу и чаще всего используетс€ дл€ создани€ новых записей или дл€ входа в систему.
  • PUT: этот метод замен€ет текущие представлени€ данных измененными, которые были отправлены в запросе.
  • PATCH: этот метод обычно используетс€ дл€ обновлени€ части данных в запрошенном ресурсе.
  • DELETE: этот метод используетс€ дл€ удалени€ определенного ресурса.

¬торой параметр, который передаетс€ методу open, - это запрашиваемый ресурс. ћы будем использовать страницу с веб-сайта example.org и использовать запрос GET дл€ простого получени€ данных. ¬от так это будет выгл€деть:

request.open("GET", "http://www.example.org/example.txt");

ѕоследний шаг Ц фактическа€ отправка запроса на удаленный ресурс с помощью метода send объекта XMLHttpRequests. Ќиже приведен пример:

request.send();

≈сли мы используем метод POST, PUT или какой-либо другой метод, который обновл€ет ресурс, то этот метод мы вызываем с параметром, содержащем данные, которые мы отправл€ем:

request.send(OUR_DATA_VARIABLE)

¬ нашем случае мы только извлекаем данные, поэтому, как только мы выполним этот код, на консоли нашего веб-браузера выведетс€ содержимое http://example.org/example.txt.

ƒанный пример помогает объ€снить то, как работает AJAX, но на самом деле технологи€ AJAX имеет куда более продвинутые функциональные возможности.


ƒл€ чего нужен AJAX?

„то вы должны были вынести из приведенного выше примера, так это то, что все функции кода загружаютс€ на одной странице. ƒействительно, сначала загрузитс€ веб-страница с нашим кодом JavaScript, затем он выполнитс€, и после он распечатает результаты запроса.

— таким же успехом можно было прикрепить приведенный выше код к функции, котора€ выполн€етс€ при нажатии кнопки. Ёто бы означало, что каждый раз при нажатии кнопки, будет выполн€тьс€ код, отправл€тьс€ запрос, и результаты будут выводитьс€ на консоль без загрузки новой страницы.

» эта магическа€ технологи€ изменила подход к веб-разработке. — по€влением AJAX больша€ часть веб-разработки переместилась на внешний интерфейс приложени€ Ц часть, котора€ работает в браузере. ¬ы наблюдаете то, как работает AJAX ежедневно и даже не подозреваете об этом.

 огда вы заходите на современный веб-сайт, перед вами по€вл€етс€ форма. ¬ы вводите свои учетные данные и нажимаете кнопку Ђ¬ойтиї. »ндикатор загрузки может вращатьс€ в течение нескольких минут, но если вы обратите внимание, то заметите, что страница на самом деле никогда не перезагружаетс€. ¬се, что вы сделали, это просто отправили свое им€ пользовател€ и пароль на сервер с помощью AJAX.

»ндикатор загрузки нужен только дл€ отвода глаз, пока запрос выполн€етс€, независимо от того, ввели ли вы верные учетные данные или нет. ≈сли ваши учетные данные верны, то ваша домашн€€ страница загружаетс€, скорее всего, из другого запроса AJAX.

Ѕольшинство запросов AJAX в JavaScript не загружают целые веб-страницы, как в нашем примере. ƒанные отправл€ютс€ и извлекаютс€ в формате JSON, дл€ представлени€ данных используетс€ текстовый формат, а дл€ форматировани€ этих данных в формате HTML и их печати на странице используетс€ дополнительный код JavaScript. Ќапример, данные, которые отправл€ютс€ дл€ входа на веб-сайт, в формате JSON будут выгл€деть так:

{ username: "MyUserName", password: "MyPassword" }

 ак только учетные данные будут проверены, файл JSON, содержащий минимальный объем данных дл€ отображени€ панели инструментов, будет отправлен обратно в браузер. AJAX в сочетании с JSON не только надел€ет современные веб-страницы способностью быстро реагировать на действи€ пользователей, но и экономит пропускную способность, отправл€€ только необходимые данные дл€ создани€ веб-страницы.


—кидки 50% в Merion Academy

¬ыбрать курс