ЈКуери Ајак: Употреба и функције

Термин Ајак се декодира као Асинкрони Јавасцрипт и КСМЛ (асинхрони Јавасцрипт и КСМЛ) и односи се на технологију изградње упита без поновног учитавања странице: ако пошаљете неке податке на сервер, он одговара, а страница се не ажурира. Најједноставнији примјер Ајак захтјева је претрага. Ако отворите претраживач и почнете да уносите упит, савети ће се појавити одмах испод њега, али страница се неће освежити. За скраћено позивање Јкуери метода, користи се знак за долар.

Предности Ајака

Ајак вам омогућава да сачувате саобраћај, а његово коришћење је погодније за корисника, јер не морате дуго да чекате на пуну страницу. Међутим, програмер који користи овај метод је принуђен да стално прати акције корисника и подстиче их да разумеју шта се дешава на страници. Важно је разумети да старе верзије претраживача, укључујући текст, не подржавају Ајак технологију. Понекад корисници онемогуће сопствену употребу ЈС-а, јер скрипте могу престати да раде. Зато је важно размишљати о алтернативама, а не ослањати се само на ову методу.

Ајак и јКуери Апплицатион

Постојање интерактивних апликација не би било могуће без Ајак технологије. Користи се у раду Ангулар (АнгуларЈС) - оквира за ЈС. Кориштење Ајак технологије на цијелој страници није обавезно. Може се користити само за неке елементе странице која се ажурира. На пример, за аутоматско исправљање, валидацију и претрагу форме.

ЈКуери библиотека је колекција готових решења написаних у ЈС. Можете га пронаћи по упиту “Ајак либс Јкуери”. Постоји варијанта његове везе преко посебне Гооглеове услуге. То се зове Ајак Гооглеапис. Јкуери се у овом случају директно повезује. Наравно, то убрзава учитавање странице. Најчешће корисници проналазе мини верзију Јкуери Ајак на Гооглеапис.цом. Има смањену функционалност, али је погоднија за почетнике. Мини верзија Ајак Јкуери на Гооглеапис.цом се зове - мин.јс.

Формати за пренос података

КСМЛ у скраћеницама за декодирање Ајак је формат за размену података. У почетку, када је технологија први пут створена, размена се десила само уз њену помоћ. КСМЛ је врло сличан ХТМЛ-у, али у њему морају бити затворене све ознаке. Касније се појавио нови формат у ЈС језику - ЈСОН. Било је тако једноставно и згодно да се проширило на друге језике и библиотеке. ЈСОН је боље прилагођен за пренос мале количине података, до 20 хиљада линија. Лакше је радити с њим, он је флексибилнији и разумљивији за програмера. Уз више информација, користите КСМЛ. На пример, слање захтева за Иандек претрагу се спроводи коришћењем овог формата.

Креирање најједноставнијег ЈСОН документа

У ЈС-у сва својства описују један глобални објекат прозора, тј. Прозор прегледника. Све библиотеке описују функције (методе) и својства овог објекта. ЈСОН је посебна класа која насљеђује од објекта и има двије властите методе: парсе и стрингифи. Овом методу ћемо детаљније дискутовати у наставку.

Можете да радите са Ајак-ом из ЈС-а без употребе јКуери-а. ЈСОН стринг се може претворити у ЈС објект и обрнуто. Размислите како да то урадите са примерима. Прво, креирајте документ и назовите га, на пример, “ман” са ЈСОН екстензијом. Затим следимо следеће кораке:

1. Отворите датотеку у уређивачу кода, на пример, ПхпСторм или Сублиме.
2. ЈСОН формат има своју синтаксу. Прво, објекат је креиран - потребно му је коврчаво заграда.
3. Кључ и његова вредност морају бити у заградама. Кључеви морају бити у двоструким наводницима. У стандардном ЈС, приликом креирања објекта, кључ се пише без наводника. На пример, за објекат “ман” у ЈСОН формату, потребно је да креирате тастере “наме” (име) и “аге” (старост). Као резултат, добијамо следећи код: {"наме": "Павел", "аге": 28}.

Ако вам је потребно неколико објеката, они се налазе у низу, који се разликује по угластим заградама. Важно је имати на уму да ЈСОН формат не подржава коментаре. У било којој форми, ово ће бити грешка. Али за њих нема посебне потребе.

Сами вредности кључа могу бити следећих типова:

• стринг;
• број;
• арраи;
• предмет.

Низ се пише у угластим заградама, објекти у њему су затворени у наводнике и раздвојени зарезом. Можете додати и придружени објекат, као што је адреса. Мораће да буде затворен у заградама. Тако брзо креирате најједноставнији ЈСОН документ. За погодност кориштења и заљубио се у програмере.

Конверзија низа у објект

Низ у ЈС-у се често мора конвертовати у ЈСОН објекат. Треба напоменути да у коду када се линија преломи на крају треба да буде коса црта, иначе ЈС неће разумети да је завршен. Код у ЈС-у ће изгледати овако:

Неопходно је осигурати да су кључеви у двоструким наводницима, у супротном ће доћи до грешке. Имамо најједноставнији низ. Може доћи са било ког сервера. Да бисте били сигурни да је то стринг, можете га извести на конзолу додавањем команде “цонсоле.лог (јсон)” коду. Сада конвертујте стринг у објекат. Да бисмо то урадили, прво декларишемо променљиву и позовемо посебну класу парсе за њу: вар јсонОбј = ЈСОН.парсе (). Онда пролазимо параметар. За рад са ЈСОН форматом у ЈС постоји посебна класа са истим именом. Дакле, можете конвертовати стринг у објекат. Ако из неког разлога конверзија није могућа, појавит ће се упозорење. Да бисте потврдили да је све урађено исправно, обе варијабле могу бити приказане у конзоли. У првом случају, приликом приказивања стринга у конзоли, размаци ће се појавити након вредности, пошто ће ЈС бројати њихов број пре сласх карактера. Ово није грешка, али због лепоте кода препоручљиво је уклонити додатне просторе.

Конвертујте објекат у стринг

Можете урадити супротно и претворити објекат у стринг. Да бисмо то урадили, декларишемо променљиву и поново користимо ЈСОН класу, додајући је преко тачке, али изаберемо другу методу - стрингифи: вар ОбјтоСтр = ЈСОН.стрингифи (). Тада преносимо неопходни параметар. Ова команда изводи инверзну трансформацију. Овај параметар може пренијети све што нам је потребно, на примјер, само име. Да би се то урадило, жељени кључ мора бити затворен у углате заграде. Тако можете радити са ЈСОН-ом из ЈС-а.

Пошаљите захтев серверу

Идемо сада на Ајак и пошаљите овај захтев серверу. Прво морате креирати КСМЛХттпРекуест објект. Ова класа је одговорна за слање захтјева и омогућава вам да га креирате без поновног учитавања странице. ЈСОН ће се користити, али име класе није промењено: КСМЛ. Код за слање захтева је: вар кхр = КСМЛХттпРекуест (). Још нећемо слати опције. Сада конфигуришите овај упит. Да бисте то урадили, напишите: кхр.опен (). Отворена метода ће конфигурисати адресу. Да бисте то урадили, додајте реч "ГЕТ" у заграде. Даље, одвојено зарезом у појединачне наводнике, уписујемо адресу хоста где да пошаљемо захтев. На крају реда, додајте име објекта, тј. Фајл који се може преузети - у нашем случају то је “ман.јсон”.

Синхрони и асинхрони захтев

Трећи параметар који је потребан за слање захтева је да се одреди да ли ће бити синхрони или не. Назива се асинц и има две вредности: фалсе - захтев се прави синхроно, а труе - у овом случају биће асинхрони. Ако је захтев синхрони, скрипт чека одговор. Ако одговор траје секунде, следећи редак кода неће бити обрађен. Синхрони захтев ће се извршити у засебној нити, а скрипта ће наставити извршавање команди. У нашем случају, требат ће нам прва вриједност, јер ће у супротном провјера одговора морати бити извршена кроз догађај и додијелити функцију која ће се извршити чим захтјев стигне.

Затим додајте још једну линију кода: кхр.сенд (). Сада, као одговор на захтев, код би требало да дође. Ово може бити код “200”, што значи да је сервер доступан, “404” - документ није пронађен, “300” - преусмеравање и “500” - грешка са сервера. Да бисте сазнали да ли постоји грешка, морате упоредити код са “200”. Да бисте то урадили, додајте следећу линију коду: иф (кхр.статус! = 200) и испишите вредност у конзолу. Ако је све добро, грана елсе ће почети да ради, на коју додамо излаз у конзолу са вредношћу „ОК“. Тако смо послали захтев серверу користећи ЈС и сазнали како Ајак ради из ЈС-а. Креирали смо КСМЛХттпРекуест, специфицирали методу, путању, синкроницитет или асинкронију и добили резултат.

Јкуери ајак

Искусни програмери не користе чисти ЈС за рад, већ користе било коју библиотеку - најчешће јКуери. ЈС Ајак захтјеви у јКуери је много лакше креирати, због чега је постао тако популаран. Покушајмо да побољшамо скрипту користећи ову библиотеку. Прво морате преузети јКуери. Долази у неколико верзија. Можете повезати библиотеку преко услуге Гоогле Цоде. Постоји опција за програмере, где постоји могућност коментарисања и прекида линија. Друга верзија је минимална. Налази се на адреси: ајак.гооглеапис.цом/ајак/либс/јкуери/1/јкуери.мин.јс. Има смисла повезати ову библиотеку на радном серверу. Можете додати библиотеку помоћу следећег кода путем услуге Гоогле Цоде:

Овај код користи верзију 3.1.0 као пример. Да бисте исправно радили, морате додати тренутну верзију. Важно је да адреса почне са "//ајак.гооглеапис.цом/ајак/либс/јкуери" .Онда креирамо нову датотеку у хтмл формату и повезујемо библиотеку наводећи адресу његове локације у тагу скрипте и стављајући је у главу. Покрећемо га са овом линијом: $ (доцумент) .реади () .Када је документ спреман, угнежђена функција ће се звати: (фунцтион () {}) Ово је неопходно да би се учитао ДОМ модел са којим радимо све што се налази у ознаци тијела, ако то није учињено, скрипта ће бити обрађена прије учитавања ДОМ модела.

Стварање форме

Као пример јКуери Ајак, направите форму. Да бисте то урадили, креирајте див са класом форми и додајте унос са типом "тект" и атрибут наме са вредношћу "наме". Затим додамо још један улаз, са типом “тект” и именом “аддресс”. Сваком улазу је додељен идентификатор. Као идентификатор можете користити вриједности атрибута имена. Додајте савет за оба уноса са понудом кориснику да унесе име и адресу. Опционално, можете додати још једну линију за године. Сада остаје да направите дугме за слање формулара. Унутар ознаке дугмета пишемо реч „пошаљи“ и додамо идентификатор бтн. Додамо граничнике - бр тагове - на сваку линију и проверавамо шта имамо.

Можете додати вањске алинеје тако што ћете их уписати у ознаку стила, али то није обавезно. Док форма не ради. За његово функционисање потребно је да се догађај повеже са дугметом, јер ће се подаци послати тачно када се притисне. Да бисте то урадили, изаберите дугме на селектору и унесите догађај “клик”: $ ('# бтн'). Сада када кликнете на ову функцију ће се извршити. Ми користимо методу он, која потписује одређену функцију на догађају кликом на неки елемент. То јест, када се притисне дугме, радиће. Проверавамо да ли све ради уз помоћ излаза на конзолу. Методе слања захтева у јКуери Ајак нису толико. Можете користити гет, пост или само Ајак. Пошто ови подаци могу нешто да промене, користићемо Јкуери Ајак пост методу.

Добијање вредности поља обрасца

У следећем кораку морамо да добијемо вредности свих поља обрасца. У јКуери Ајаку постоје две опције за то. Можете користити функцију или радити без ње. За прву опцију напишемо следећи код: вар име = $ ('# наме'). Затим додамо сличне линије за адресу и старост. Добили смо референце на елементе, а не на саме вредности. Сада користимо Јкуери Ајак пост методу. Да бисмо то урадили, пишемо: $ .пост (). Сада морате конфигурирати метод. Потребна је урл адреса на коју ће се послати. За ово ћемо користити валидатор. Да бисте то урадили, у загради пишемо '/валидатор.пхп'.

Додајте још један параметар - сами подаци: вар дата = 'наме =' + наме.вал () + '& аддресс =' + аддресс.вал () + '& аге =' + аге.вал (). Сада имамо податке добијене Јкуери Ајак методом. Остаје само да додате функцију повратног позива, која ће бити позвана када одговор стигне са сервера. Потребно је да региструје следеће параметре: податке о серверу, опис статуса и да ли је захтев извршен. Приказујемо параметар података у конзоли да бисмо проверили да ли све ради. Такође је важно узети у обзир да се Ајак захтев увек ради у Уницоде-у, јер кодирање документа мора бити утф-8. Ако су сајт и сервер у различитом кодирању, а Ајак се извршава у Уницоде-у, сервер ће вратити хијероглифе, а стринг ће морати да се рекодира. Да би се то избегло, препоручује се да се све уради у утф-8.

Рад са ПХП-ом

Сада користите јКуери Ајак са ПХП-ом. Направите нови фајл и назовите га валидатор.пхп. Хајде да прикажемо наше податке. Да бисмо то урадили, пишемо: $ арраи = $ пост. Сада испишите све податке у ЈСОН формату: ецхо ЈСОН_енцоде ($ арраи). Проверавамо како образац функционише попуњавањем поља и слањем захтева серверу. Ако је све урађено исправно, добићемо објекат са специфицираним параметрима. Добили смо податке, сада их треба обрадити и снимити. Пишемо: иф (иссет ($ пост ['наме']) && (иссет ($ пост ['аге']) && (иссет ($ пост ['адреса']). Иссет значи да таква варијабла постоји. : елсе {$ арраи ['статус'] = 'грешка'} Проверавамо да ли све ради.Ако има грешака у коду, ми тражимо и поправљамо их.Захваљујући асинхроном преносу захтјева, корисник може унијети додатне информације у тренутку када је пријенос укључен Можете користити не само ПХП програмски језик, већ и друге серверске језике.