Ajax - што гэта? Асінхронны JavaScript і XML: перавагі і недахопы

Зараз можна назіраць, што ў інтэрнэце набывае папулярнасць выкарыстанне і прымяненне новых тэхналогій. Адна з іх - гэта AJAX. Што гэта такое? Якімі характарыстыкамі яна валодае? Дзе ўжываецца? На ўсе гэтыя пытанні можна будзе знайсці адказ у рамках дадзенага артыкула.

Агульная інфармацыя

Як расшыфроўваецца AJAX? Што гэта значыць? Дадзенае скарачэнне з'яўляецца абрэвіятурай. Яна расшыфроўваецца як Asynchronous Javascript and XML ( "Асінхронны Яваскрипт і ИКСМЛ"). Часта можна ўбачыць ці пачуць інфармацыю, што гэта новая тэхналогія. Але гэта не зусім так. Справа ў тым, што Javascript і XML існуюць ужо даволі працяглы час, тады як "Аякс" з'яўляецца сінтэзам гэтых тэхналогій. Часцей за ўсё ён выкарыстоўваецца разам з тэрмінам Web 2.0 і маецца на ўвазе як выкарыстанне перадавых метадаў распрацоўкі.

А чым асаблівасць?

Такім чынам, мы ўжо маем агульнае ўяўленне пра тое, чым з'яўляецца AJAX. Што гэта дае нам на практыцы? Чаму вядуцца актыўныя размовы пра яго ўжыванне? Асаблівасць дадзенай тэхналогіі - у тым, што пры яе выкарыстанні ня трэба абнаўляць ўсю старонку пры першай жа патрэбы. Бо можна запытаць новыя дадзеныя толькі для яе часткі. Гэта і зручна (бо менш часу даводзіцца чакаць), і эканамічна (для тых, у каго не безлімітны інтэрнэт). Праўда, для інфармавання карыстача пра тое, што адбываецца абнаўленні пажадана выкарыстаць хоць бы індыкатар загрузкі або тэкставыя паведамленні, якія праінфармуюць пра новыя дадзеныя з сервера. У якасці мінусаў тэхналогіі часта згадваюць той факт, што яна не падтрымліваецца састарэлымі і тэкставымі браўзэрамі. Ды і магчымасць адключэння тэхналогіі Javascript ёсць у карыстальніка, чым многія і карыстаюцца. Таму не варта злоўжываць AJAX. Што гэта можа даць, калі не прадугледзець альтэрнатыўныя метады прадстаўлення інфармацыі? У лепшым выпадку інфармацыя проста не будзе адлюстравана на сайце. У горшым - яго знешні выгляд так пацерпіць, што карыстальнік на яго больш не вернецца.

Перавагі "Аякса"

Дадзеная тэхналогія прапануе два метаду, па якіх можа быць рэалізаваная вэб-старонка. Першы прадугледжвае ўнясенне змяненняў без перазагрузкі. Гэта можа быць ажыццёўлена з дапамогай дынамічных зваротаў да сервера. Другі прадугледжвае выкарыстанне асобных тэхналогій, найбольш папулярнай з якіх з'яўляецца XMLHttpRequest. Адносна саміх пераваг "Аякса" можна сказаць наступнае:

1. Можна ствараць зручнае вэб-дадатак, у якім інтэрфейс будзе мець цэлых шэраг прыемных для карыстальніка магчымасцяў, што ў выніку аблегчыць ўзаемадзеянне чалавека і сайта.
2. Замест поўнай перазагрузкі старонкі адбываецца частковая. Дзякуючы гэтаму эканомяцца рэсурсы машыны і аптымізуецца хуткадзейнасць.
3. Серверная частка сайта актыўна ўзаемадзейнічае з карыстальнікам.
4. Зручна выкарыстоўваць для рэалізацыі цэлага шэрагу задумак.

абмен дадзенымі

Вось, дапусцім, патрэбна форма зваротнай сувязі, з дапамогай якой можна будзе пракансультаваць кліентаў. Як яе можна зрабіць? Для пачатку неабходна паклапоціцца пра «носьбіце» інфармацыі. Для гэтага неабходна стварыць аб'ект XMLHttpRequest. Ён выступае ў ролі пасярэдніка паміж серверам і браўзэрам карыстальніка. З дапамогай гэтага аб'екта будуць адпраўляцца запыты, а таксама атрымлівацца адказы на іх. Для непасрэднага абмену дадзенымі нам патрэбен AJAX PHP. Гэты інструментар можа быць рэалізаваны з дапамогай GET- або POST-запытаў. У такім выпадку неабходныя аргументы будуць перадавацца непасрэдна праз URL. Адначасова будзе запушчана функцыя, сачыльная за тым, каб перадача дадзеных не перарывалася. Але які AJAX-запыт рэалізаваць? Рэкамендуюць выкарыстоўваць POST. Дзякуючы яму можна перадаваць неабмежаваную колькасць дадзеных, да якіх, да таго ж значна складаней атрымаць доступ.

Прынцып працы

Як жа функцыянуе асінхронны Javascript і XML на практыцы? Давайце разбяромся з гэтым на прыкладзе. Адносна структуры пабудовы неабходна паклапаціцца аб тым, каб кліенцкая частка забяспечвала ўвесь патрэбны функцыянал для бяспечнага абмену дадзенымі. Яна павінна прадастаўляць неабходныя метады для перадачы інфармацыі абранымі спосабамі. Серверная ж частка павінна забяспечваць апрацоўку атрыманых дадзеных, і, ужо грунтуючыся на іх, генераваць новую інфармацыю, каб у наступным перадаць яе да кліента. Самым распаўсюджаным узаемадзеяннем дадзенага тыпу з'яўляецца праца з базай дадзеных. Раней мы ўжо згадалі такі элемент шматлікіх бізнэс-сайтаў, як форма зваротнай сувязі. Перавагай "Аякса" у дадзеным выпадку будзе тое, што ён праводзіць асінхроннага перадачу дадзеных. Іншымі словамі, пакуль інфармацыя перасылаецца, карыстальнік можа здзяйсняць усе неабходныя яму дзеянні. Арыентуючыся на спецыфіку кожнага канкрэтнага выпадку, неабходна вырашыць, ці трэба пра гэты працэс інфармаваць наведвальніка сайта. Адносна той жа формы зваротнай сувязі варта сказаць, што ў дадзеным выпадку можна напісаць «аператар набірае адказ», ці нешта падобнае.

адказ сервера

Ён можа прыходзіць не толькі дзякуючы XML, як гэта можна падумаць з-за назвы тэхналогіі. Акрамя гэтага, ён можа перадавацца як звычайны тэкст ці JSON. У першым выпадку атрыманую інфармацыю можна адразу ж выводзіць на старонку. Калі ж выкарыстоўваецца XML, то неабходна паклапаціцца аб тым, каб AJAX-файл быў належным чынам апрацаваны ў браўзэры кліента. Усе дадзеныя ў гэтым выпадку ператвараюцца да (X) HTML. Калі ж выкарыстоўваецца фармат JSON, неабходна выканаць атрыманы код, каб атрымаць паўнавартасны аб'ект Javascript. Пры гэтым неабходна праявіць асцярожнасць і ўлічваць той факт, што многія зламыснікі любяць перадаваць з дапамогай гэтай тэхналогіі шкоднасны код. Таму неабходна прадугледзець працэдуру праверкі атрыманых дадзеных перад іх апрацоўкай. Асаблівасці рэалізацыі для розных браўзэраў могуць трохі адрознівацца, але, у цэлым, схема дзеянні тут адна.

Робім запыт да сервера і апрацоўку адказу

Уся паслядоўнасць дзеянняў будзе выглядаць наступным чынам:

1. Першапачаткова неабходна стварыць і пераканацца ў тым, што існуе XMLHttpRequest.
2. Затым ініцыялізуецца злучэнне з серверам.
3. Пасылаем да яго запыт.
4. Чакаем, пакуль прыйдуць дадзеныя, і апрацоўваем іх.

Варта распавесці аб некаторых асаблівасцях адносна стварэння аб'екта. Ён можа быць ініцыяваны ў любым месцы, дзе гэта толькі магчыма ў рамках мовы праграмавання. Але калі яму прысвоіць статус глабальнага, то ў нейкі адзін момант часу для яго будзе магчымай толькі праца з адным запытам. Гэтага моманту неабходна надаць пільную ўвагу. Адносна апрацоўкі - тут арыентуемся па выбраным інструменту. Так, пры XML дадзеныя неабходна апрацаваць DOM-функцыямі і прадставіць карыстачу ўжо канчатковы вынік у HTML. А што ж рабіць з JSON-ном? Варта разумець, што ён з'яўляецца аб'ектнай натацыяй Javascript. Што гэта значыць? Дзякуючы JSON можна прадстаўляць аб'ект як радок. Але пры гэтым неабходна памятаць, што дадзены спосаб не з'яўляецца бяспечным ў поўнай меры, і неабходна будзе ўлічваць кучу фактараў. Але, у цэлым, ён з'яўляецца вельмі лёгкім.

Серверныя мовы праграмавання

Практычна любы вэб-дадатак выкарыстоўвае іх у той ці іншай меры. Для перадачы дадзеных найбольш папулярным з'яўляецца PHP. На ім звычайна пішуць файлы для сайтаў, дзе не з'яўляецца крытычна важным хуткасць перадачы інфармацыі, а аддаецца перавага балансу паміж ёю і надзейнасцю. Метады перадачы XMLHttpRequest разглядаліся вышэй.

наладжвальны сервер

Якія праграмы неабходныя для таго, каб паўнавартасна працаваў AJAX? Што гэта нам дасць? Для чаго яны патрэбныя? Каб атрымаць адказы на гэтыя пытанні, варта азнаёміцца з наступным спісам:

1. HTML / XHTML. Яны патрэбныя для таго, каб сервер распазнаваў разметку старонкі.
2. CSS. Гэты інструмент неабходны для візуальнага падбору афармлення старонкі.
3. DOM. Ён патрэбны для таго, каб забяспечваць дынамічныя змены на старонцы як адказ на дзеянне з боку карыстальніка.
4. XML. Неабходны для перасылкі дадзеных паміж кліентам і серверам.
5. JavaScript. Патрэбен для стварэння рухавічка "Аякса" і забеспячэння інтэрактыўнасці.
6. XMLHttpRequest. Аб'ект, з дапамогай якога будуць перасылацца запыты да сервера.

Выкарыстанне на сайце

Такім чынам, цяпер у нас ёсць і тэарэтычныя веды, і ўяўленні аб тым, як працуе AJAX. Адпраўка дадзеных зараз патрабуе толькі пэўнай практыкі. Давайце ж у цэлым паглядзім, як можна падыходзіць да рэалізацыі пастаўленай задачы з выкарыстаннем "Аякса". Такім чынам, нам неабходна стварыць базу дадзеных драйвераў. Прычым адрознівацца яны будуць па прыладам, на якіх могуць працаваць. Варта адзначыць, што разгляданая база дадзеных вельмі вялікая, таму проста перасылаць яе кліенту і ўжо яму прапаноўваць рабіць выбарку з дапамогай JavaScript няма сэнсу. Таксама непажадана, каб сама вэб-старонка перазагружаць з-за аднаго параметру. На сэрвэры запыты будуць апрацоўваць спецыяльныя скрыпты РНР. БД рэалізавана ў выглядзе XML-файла.

Аб базе дадзеных

Неабходна прапрацаваць яе структуру. А што рабіць, калі парамэтры, якія з'яўляюцца аб'ектамі? У такім выпадку неабходна прадугледзець стварэнне зменнай, дзе будзе знаходзіцца спасылка на яго, на выпадак выкліку з боку функцыі. Для магчымасці звароту да яе з любога месца кода яе трэба зрабіць глабальнай. Для выгоды пажадана выкарыстоўваць сістэму кіравання базамі дадзеных. Вядома, гэта не абавязкова. Але ўсё ж выкарыстанне СКБД дазволіць працаваць з дадзенымі больш зручна і эфектыўна.

Прапрацоўваем працу рухавічка

Як жа ўсё будзе адбывацца? Такім чынам, надыходзіць пэўны падзея, якое будзе выклікаць асаблівую функцыю. Яна падрыхтуе GET або POST-дадзеныя, якія будуць перасылацца. Затым выклікаецца функцыя, якая зробіць зварот да URL сервернага скрыпту. У ёй неабходна прадугледзець стварэнне XMLHttpRequest-аб'екта. Спасылку на яго варта захоўваць у зменнай. Пасля таго як дадзеныя былі адпраўленыя серверу, неабходна чакаць ад яго адказу. Для гэтага можна ўключыць «праслухоўванне» да атрымання інфармацыі (калі вядома, што прыйдзе і калі) або прадугледзець функцыю, якая будзе заўсёды гатовая прыняць дадзеныя. Першы варыянт меней надзейны ў выпадку ўзнікнення пазаштатнай сітуацыі. Другая ж рэалізацыя - больш затратная з пункту гледжання рэсурсаў. Хоць, калі гэта робіцца толькі адносна адной зменнай, на хуткім інтэрнэце гэта не адаб'ецца. Але калі іх сотні і тысячы, і яны будуць мець вялікі памер, - тады гэта будзе іншая справа. Таму неабходна шукаць баланс паміж карыстаннем наяўнымі рэсурсамі і выніковасцю. Бо трэба разумець, што не ўсе валодаюць аператыўнай памяццю на 16 Гб. Для гэтага можа ўсталёўвацца пэўны час чакання, пасля якога падстаўляюцца папярэднія дадзеныя або інфармацыя аб тым, што сервер недаступны ў дадзены момант часу.

асаблівасці

Калі з дапамогай "Аякса" ствараецца інтэрфейс для старонкі або прыкладання, то неабходна паклапаціцца аб тым, каб атрыманы вынік добра працаваў як на розных аперацыйных сістэмах, так і на розных браўзэрах. У першым выпадку неацэнную дапамогу змогуць аказаць эмулятары. У другім выпадку дастаткова будзе проста ўсталяваць розныя праграмы і на іх праверыць працаздольнасць кода. Таксама неабходна прадугледзець пэўныя дзеянні і на выпадак, калі выкарыстоўваюцца карыстальнікам браўзэры будуць састарэлымі ці ён адключыць неабходныя налады. У такіх выпадках варта паклапаціцца пра выснову на старонку тэксту, у якім пазначана прычына таго, чаму прагляд сайта ў дадзеным выпадку не з'яўляецца магчымым. Так, цяпер пераважная большасць людзей выкарыстоўвае сучасную тэхніку, але не варта цалкам выпускаць з ўвагі верагоднасць і таго, што некалькі адсоткаў наведвальнікаў будуць выкарыстоўваць некалькі састарэлае праграмнае забеспячэнне. А ў маштабах бізнесу гэта можа мець значныя наступствы.

заключэнне

Вось і падыходзіць да лагічнага заканчэння гэты артыкул. Калі казаць пра "Аякс" у цэлым, то гэты інструмент дазваляе ствараць вельмі прывабныя і шматфункцыянальныя сайты, якія хутка працуюць і пры пісьменнай вёрстцы дастаўляюць сваім карыстальнікам адно задавальненне. Можна не сумнявацца, што ў будучыні з'явяцца яшчэ больш дасканалыя тэхналогіі, але пакуль будзем выкарыстоўваць тое, што ў нас ёсць. Па меры ўдасканалення моў праграмавання і іх метадаў цалкам магчымым з'яўляецца і такі варыянт, што стануць даступнымі спосабы рэалізацыі, якія дазволяць ствараць яшчэ больш якасны прадукт. Але як бы там ні было, працаваць трэба зараз з тым, што ёсць. І імя гэтаму - "Аякс".