AJAX повишава скоростта и цялостния UX на уеб страница.

Асинхронният JavaScript и XML (AJAX) е програмен начин за създаване на силно реагиращи и интерактивни уеб приложения чрез оптимизиране на набор от технологии.

Тази публикация обяснява основните правила и работния процес на AJAX.

Какво точно е AJAX?

Асинхронният JavaScript и XML (AJAX) е набор от технологии, използвани за създаване на силно интерактивни и отзивчиви уеб приложения.

Той позволява на разработчиците да актуализират специфични компоненти на уеб страница в реално време, без да се налага да презареждат цялата страница.

Преди това, когато се нуждаеше от промяна или промяна на раздел от съдържанието на уеб страница, процесът презареждаше и опресняваше цялата уеб страница от уеб сървъра.

В резултат на такъв метод във всеки пример бяха генерирани големи количества дублирани данни.

Въвеждането на AJAX реши този проблем, като позволи на уеб частите да се актуализират асинхронно, без презареждане на цялата страница.

Този метод гарантира, че актуализациите се показват на крайните потребители почти бързо.

С цел да осигури безпроблемен трансфер на данни между браузър и уеб сървър, AJAX разчита на следните технологии:

  • XHTML и CSS: Показване на данни
  • HTML Document Object Model (DOM): Позволява динамично потребителско взаимодействие при актуализиране на съдържанието.
  • Прехвърляйте, променяйте и актуализирайте данни към и от сървъра с помощта на обекта XMLHttpRequest.
  • Контролирайте трансфера на данни със сървъра с XML, HTML, XSLT и JSON.
  • JavaScript: Свържете заявките за данни с доставянето на клиентско съдържание.

Комбинацията от тези технологии е важна за осигуряване на непрекъсната комуникация клиент-сървър без необходимост от презареждане на страницата.

В резултат на гъвкавостта на този метод за презареждане на непълни промени, потребителите могат да взаимодействат с уеб приложението по-ефективно.

Освен това концепцията дава възможност на потребителите да персонализират своята компютърна среда, подобно на типичните настолни приложения.

Освен това, за разлика от традиционните приложения, при които потребителското взаимодействие е спряно, докато HTTP прехвърлянето към и от сървъра не приключи, потребителите могат да продължат да се ангажират с уеб приложението, докато уеб сървърът обработва необходимите актуализации на уебсайтовете.

AJAX може да се използва за актуализиране на съдържанието на уеб страница в следните случаи:

  • AJAX може да се задейства от събития, инициирани от потребителя, като например когато потребител кликне върху конкретен бутон или задържи курсора на мишката върху конкретен текст.
  • Предварително определени времеви интервали: Актуализациите може да се планират на всеки 10 секунди при някои обстоятелства.
  • Ако потребителят избере падащото меню, показващо 100-те най-добри колежа в САЩ, AJAX може след това да зареди и актуализира списъка с подходящи университети в САЩ въз основа на текущото класиране.

Струва си да се отбележи, че тъй като AJAX не зависи от уеб сървъри, той използва метод, управляван от данни, а не обичайната стратегия, управлявана от страници.

В резултат на това процесът може да изпълнява задачи асинхронно във всеки един момент. Технологията AJAX днес е достъпна в много браузъри, по-специално Mozilla Firefox (версия 1.0 и по-нова), Apple Safari (версия 1.2 и по-нова), Chrome, Microsoft Internet Explorer (версия 5 и по-нова) и Opera (версия 7.6 и по-нова).

Основните предимства на AJAX

AJAX предлага различни предимства на уеб приложенията, включително:

  • AJAX е форма на базирана на отворени стандарти технология за уеб браузър. Това прави възможни AJAX приложения, които работят в много браузъри, като използват рамки на JavaScript, като например Dojo toolkits.
  • Приложенията AJAX са базирани на браузър и не изискват допълнителни софтуерни добавки.
  • Някои организации за електронна търговия, като Shopify и онлайн платформи, използват AJAX, за да предоставят интуитивни потребителски взаимодействия. AJAX позволява функции за електронна търговия, като изброяване на артикули, добавяне на неща в количка за пазаруване и ускоряване на процеса на плащане, като такъв за Shopify.
  • Приложенията AJAX са свързани с приложенията Web 2.0, тъй като използват колекция от технологии, приложения за сътрудничество и източници на информация, като блогове, форуми и т.н., за да създадат следващото поколение на мрежата.
  • AJAX проверява трафика на сървъра, тъй като комуникацията на сървъра се осъществява само за „битове уеб съдържание“.
  • Технологията AJAX използва по-малко честотна лента, тъй като изисква само малко количество данни от сървъра.
  • Докато работи с уеб приложения, AJAX подобрява цялото потребителско изживяване.

Как AJAX работи перфектно?

В нормално уеб приложение браузърът се свързва директно със сървъра.

Сървърът отговаря, като прехвърля целия HTML и CSS код едновременно.

Ако потребителят направи друга заявка от уеб страницата, сървърът обработва новите потребителски данни, изгражда нова страницата и след това връща прясно създадената уеб страница на потребителя.

Уеб страницата се зарежда само веднъж с AJAX, когато потребителят направи първоначалната заявка.

Ако потребител направи друга заявка на уеб страница, машината AJAX грабва потребителските данни за малката част от уеб страницата, която трябва да се актуализира, и ги прехвърля към уеб сървъра.

След това сървърът отговаря асинхронно, като обработва исканото съдържание, без да се намесва в оформлението и поведението на съществуващата уеб страница.

Докато това показва как работи едно просто AJAX приложение, нека разгледаме техническите стъпки, включени в обработката на AJAX заявки.

Работният процес на AJAX започва с свързване на браузъра със сървъра чрез обекта XMLHttpRequest.

Процедурата е разделена на няколко стъпки, както се вижда по-долу:

  • Стъпка 1: Първо, потребителят присвоява HTTP заявката с помощта на потребителския интерфейс. Това води до изпращане на JavaScript извикване към JavaScript интерпретатора, известен също като AJAX двигател, който се намира в уеб браузъра.
  • Стъпка 2: Във втората стъпка AJAX машината изпраща необходимата HTTP заявка към уеб сървъра, използвайки обекта XMLHttpRequest.
  • Стъпка 3: След това уеб сървърът се свързва с действителните бази данни в задния край, използвайки JSP, ASP.net и PHP, които отговарят за обработката и манипулирането на данни. След това се обменят данни между хранилището и сървъра и се получават исканите данни.
  • Стъпка 4: След това уеб сървърът връща събраните HTML, XML или JavaScript данни на AJAX машината, която също е известна като функция за обратно извикване XMLHttpRequest.
  • Стъпка 5: Накрая компилаторът на JavaScript показва HTML и CSS данните в потребителския интерфейс на браузъра.

Разработчикът в AJAX среда е отговорен за разработването на код, който не само прави заявки към уеб сървъра, но и обработва отговора.

Въпреки това, в стандартна HTTP заявка, браузърът обработва и двете функции и разработчикът не е отговорен за контролирането на кодовете, които започват заявки и управляват отговорите съответно към и от сървъра.

Използвайки AJAX, разработчикът има пълен контрол върху всички компоненти на уеб страницата, които са видими за крайния потребител.

Разработчикът може лесно да промени всяка област от уеб страницата, като използва няколко динамични техники за манипулиране на DOM, които не се нуждаят от презареждане на цялата страница.

Всички актуализации се извършват във фонов режим. В резултат на това AJAX работи върху опресняването, без да презарежда идеята.

Освен това AJAX подобрява традиционната комуникационна архитектура браузър-сървър чрез въвеждане на нов функционален слой под формата на „AJAX двигател“.

Той служи като посредник за взаимодействието на потребителя със структурата клиент-сървър.

AJAX използва

През последните години се наблюдава огромно увеличение на търсенето на адаптивни уеб приложения.

Потребителите вече са свикнали да получават бързи актуализации, докато взаимодействат с уебсайтове.

В резултат на това концепциите на AJAX са начело на уеб технологиите.

Нека да разгледаме някои примери за AJAX от реалния свят, които третират онлайн приложенията подобно на настолните версии.

Системи за бързо влизане

Уебсайтове като Digg.com използват метод за влизане, който не изисква потребителят да посещава отделна страница за вход, за да получи достъп до своя акаунт.

Като алтернатива посетителите могат незабавно да въведат данните си за вход на оригиналната страница на сайта (т.е. потребителско име и парола).

След като потребителските данни бъдат въведени, функционалността AJAX изпраща заявката за влизане към целевия сървър.

След това сървърът реагира, като промени секцията за влизане.

Уеб страницата също така ви показва, че сте влезли успешно в системата.

След това уебсайтовете се променят въз основа на поведението на потребителите.

Функцията за автоматично довършване

Google беше първата компания, която използва технологията AJAX в своите продукти.

AJAX е много добър от функцията за автоматично довършване на Google.

Докато потребителите въвеждат заявки за търсене в полето за търсене на Google, функцията дава предложения в реално време, без да презарежда оригиналната уеб страница.

Освен за търсене в Google, функцията за автоматично довършване е полезна за формуляри, които се нуждаят от голям брой въведени данни от потребителя.

В много случаи алтернативна опция за предлагане на падащ списък може да е трудна, тъй като списъкът може да стане твърде голям за потребителския интерфейс.

Система за гласуване и рейтинг

Някои уебсайтове позволяват на потребителите да гласуват и да променят съдържанието на своите уеб страници.

Digg и Reddit, например, са сайтове за социални отметки, които позволяват на потребителите да гласуват за конкретно съдържание и основното съдържание на сайта се променя в зависимост от тези гласове.

Функциите на AJAX се използват на такива сайтове за управление и обработка на потребителски гласове.

В резултат на това мненията на потребителите относно историите и информацията се зачитат и уебсайтовете могат да прецизират своите стратегии, за да подобрят ориентираното към потребителите съдържание.

Платформи за социални медии

Twitter, платформата за социални медии, нарасна с популярност през годините поради удобното си оформление.

Когато някой туитне, той бързо се публикува в емисията на потребителя и сайтът се актуализира.

Twitter въведе функции на AJAX в своята област с популярни теми.

В резултат на това потребителите виждат актуализации на всеки няколко секунди, когато се публикуват нови туитове по популярни теми.

Twitter е чудесен пример за това как AJAX може не само да актуализира потребителското съдържание, но и да предлага на потребителите информация за текущите потребителски настроения по конкретни теми.

Валидиране и подаване на формуляри

Както беше обяснено по-рано, AJAX може да се използва за подаване на формуляр и задачи за проверка, когато определени полета във формуляра изискват автоматично попълване, докато други, подобно на функцията за автоматично довършване, продължават да предоставят предложения за възможни записи.

Крайните потребители могат да се възползват от AJAX, тъй като не трябва да се тревожат за правописни грешки или други важни грешки, като например въвеждане на неуместен текст в полето за заплати.

Освен това някои уебсайтове използват AJAX, за да проверят надеждността на данните за вход, като например пароли.

В определени случаи AJAX показва дали потребителят е предоставил валиден имейл адрес или URL в онлайн формуляр.

Незабавни съобщения и чатове

Онлайн чатът се е подобрил значително след въвеждането на Internet Relay Chat (IRC) през 80-те години.

Някои уебсайтове, като Amazon, вече включват функция за чат за поддръжка на клиенти на началната си страница.

Потребителите могат да водят индивидуални чатове със специалисти по поддръжка на клиенти, докато разглеждат уебсайтове, без да се налага да презареждат цялата страница.

Тази функция е резултат от технологията AJAX.

Потребителски интерфейс, който е лесен за използване

AJAX е популярна технология сред разработчиците за създаване на прост, но ефективен потребителски интерфейс.

Тъй като потребителите могат да изпълняват задачите си на една уеб страница, такива интерфейси са лесни за използване.

Това е много по-ефективно от прескачането от една страница на друга, за да завършите една дейност.

Това има две основни предимства: първо, прави онлайн приложението относително бързо и ориентирано към потребителя, и второ, осигурява по-голям контрол върху честотната лента и времената за зареждане на уебсайта, тъй като количеството потребителски заявки, изпратени до сървъра, е значително намалено.

Drop.io, онлайн бизнес за споделяне на файлове, например, използва AJAX, за да предложи атрактивни потребителски интерфейси.

Google също представи продукти, базирани на AJAX, като Google Documents и Google Maps.

Джаджи

Една от характеристиките на AJAX е способността му да прави паралелни повиквания към различни интернет услуги.

Това означава, че уеб страницата с активиран JavaScript не е ограничена до своя сървър, но може също така да се свързва към други интернет сървъри.

Системата за управление на съдържанието на WordPress, например, предоставя различни добавки, които функционират по този начин.

Google Adsense е друг пример. Скриптовете на Adsense имат сравнима структура.

Лайтбоксове

Някои уебсайтове вече използват изскачащи прозорци за насочени реклами. За съжаление подобни изскачащи прозорци са изключително досадни за потребителите.

Вместо това съдържанието на AJAX може да се комбинира с лайтбоксове, които се показват на уеб страниците.

Не могат да се предприемат допълнителни действия, освен ако потребителят не отговори на тези лайтбокс дисплеи.

Това често се наблюдава, когато потребител се опита да публикува мнение или преглед на уебсайт, без първо да влезе или да се регистрира.

Когато потребителят се опита да въведе текст, се отваря изскачащ прозорец, който гласи „първо трябва да влезете“.

За да остави отзив или да разгледа сайта, потребителят трябва да отговори на този изскачащ прозорец. Лайтбоксовете с активиран AJAX са по-удобни за потребителя от произволните изскачащи прозорци.

Светкавица

Flash е набор от инструменти за анимация, който може да се използва за създаване на игри, анимации и компоненти на уеб страници.

Смесването на AJAX и Flash подобрява още повече дизайна на уебсайта.

Kongregate, портал за уеб игри, например, използва флаш API, за да актуализира потребителските профили, когато спечелят значка, докато играят онлайн игра.

Когато играч спечели награда, флаш API изискват JavaScript, който актуализира профила на играча с помощта на AJAX функции.

В резултат на това профилът се поддържа актуален в реално време.

За вкъщи

За да обобщим, AJAX е скрипт от страна на клиента, който създава надежден канал за комуникация между клиента и сървъра.

Редовните настолни приложения не можеха да поддържат точна връзка със сървърите.

Взаимодействието клиент-сървър не може да се осъществи, докато страницата не бъде напълно опреснена.

Въпреки това AJAX наруши модела за презареждане на страницата, спестявайки много честотна лента за уеб приложения.

AJAX отбеляза началото на една ера в уеб разработката, като направи онлайн приложенията по-плавни и лесни за използване.

Тази статия изяснява ли ви ролята на AJAX в уеб приложенията? Моля, уведомете ме в коментарите. Ще се радвам да чуем от вас!

Повече съдържание в PlainEnglish.io.

Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter, LinkedIn, YouTube и Discord .

Интересувате ли се от мащабиране на стартирането на вашия софтуер? Вижте Circuit.