Какво е AJAX и защо е необходимо - с прости думи и примери?

Какво е AJAX (What is AJAX)?

AJAX означава асинхронен JavaScript и XML. Накратко, това е използването на обекта XMLHttpRequest за комуникация със сървъри. Може да изпраща и получава информация в различни формати, включително JSON, XML, HTML и текстови файлове.

AJAX (от английски: Asynchronous Javascript and XML) е технология, която ви позволява да взаимодействате със сървъра без презареждане на страницата. Например за получаване или предаване на някакви данни.

Какво е AJAX (What is AJAX)?

Защо е необходимо AJAX?

Нека се потопим малко по-дълбоко в уеб разработката. Когато сърфирате в интернет, вие използвате браузър. Браузърът е вашият пътеводител в Интернет. Един уеб сайт е просто куп документи (html, php файлове), които са разпръснати на сървъра. А самите сървъри могат да стоят в различни части на света.

В крайна сметка, за да бъде видян сайтът или страницата на сайта, браузърът трябва да се „отнесе” към желания сървър, който от своя страна търси и прехвърля желания документ (страница) към браузъра и само тогава браузърът ще ви го прехвърли на екрана. И в резултат - виждаме някоя страница от сайта.

Естествено, всяка ваша „препратка“ към сървъра принуждава браузъра да презареди страницата, тъй като в този момент той получава данни и ги подготвя за предаване към вас. Сам по себе си „контакт“ не е само зареждане на страници от сайта, „контакт“ може да бъде и изпращане на съобщение до потребителя, кликване върху бутона „Абониране за новини“ и т.н.

Така че AJAX помага да се избегне постоянното презареждане на страници в рамките на един и същ уеб сървър (сайт).

Какво е AJAX заявка?

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

AJAX технологията в действие

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

Това е технологията AJAX. Браузърът изпраща заявка до сървъра, сървърът дава необходимите данни, браузърът „актуализира“ само част от съдържанието на страницата.

Как изглежда една AJAX заявка?

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

Пример за технология AJAX на Vue.js с помощта на библиотеката Axios.

1. Това е AJAX функция.

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

2. Първата част на функцията.

Това е AJAX заявка към документ (който съхранява списък с резервни копия на сайта). Ние, без да презареждаме страницата, изпращаме заявка до сървъра за получаване на този документ.

3. Втората част на функцията.

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

----------------