Какво е AJAX? | dLambow

(What is AJAX)

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

Преди AJAX, нека изасним: Какво е JavaScript?

JavaScript е език, който ви позволява да правите сложни неща на своята уеб страница - всеки път, когато на уеб страница се случва нещо повече от простото статично показване, като:

• - излизане на периодично актуализирано съдържание или
• - интерактивни карти, или
• - анимиране на 2D/3D графики, или
• - превъртане на видео в игра и др.

можете да сте сигурни, че най-вероятно това става с помощта на JavaScript. 

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

Това е третият слой от стандартните уеб технологии, като другите две са HTML и CSS.

• - HTML е език за маркиране, който се използва за визуално и смислено структуриране на уеб съдържанието, като дефиниране на параграфи, заглавия, таблици с данни или вмъкване на изображения и видеоклипове в страницата;

• - CSS е стилов език, с който придаваме стил на показваното на нашето HTML съдържание, например даваме цвят на фона (background) и шрифта, придаваме на съдържанието многоколонен вид.

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

А сега ...

Какво е 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. Втората част на функцията.

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

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