Реклама
Како се ближи крај наше мини туториал серије јКуери, време је да детаљније размотримо једну од најкоришћенијих функција јКуери-а. АЈАКС омогућава веб локацији да комуницира са сервером у позадини без потребе да се целокупна страница поново учита. Од бесконачних статусних токова на Фацебооку до слања података обрасца, постоји милион различитих ситуација из стварног живота у којима ова техника може бити корисна.
Ако нисте прочитали претходне туторијале, предлажем да то урадите пре него што се бавите овим путем како надолазе.
- Увод: Шта је јКуери и зашто би се требало бринути? Израда Интернета интерактивна: увод у јКуеријКуери је библиотека скрипта на страни клијента коју користи готово свака модерна веб локација - веб странице чине интерактивном. То није једина Јавасцрипт библиотека, али је најразвијенија, највише подржана и најчешће коришћена ... Опширније
- 1: Селектори и основе јКуери Туториал - Први кораци: Основе и изборнициПрошле недеље сам говорио о томе колико је јКуери важан сваком модерном веб програмеру и зашто је то феноменално. Ове недеље мислим да је време да се умажемо руке неким кодом и научимо како ... Опширније
- 2: Методе Увод у јКуери (други део): Методе и функцијеОво је део сталног увода за почетнике у јКуери серију веб програма. Први део је покренуо основе јКуери-а о томе како га укључити у свој пројекат и селекторе. У другом делу, наставићемо са ... Опширније
- 3: Чекање на учитавање странице и анонимне функције Увод у јКуери (део 3): Чекање на страницу за учитавање и анонимне функцијејКуери је засигурно суштинска вештина модерног веб програмера, а у овој краткој мини серији надам се да ћу вам дати знање да је почнете користити у сопственим веб пројектима. Ин ... Опширније
- 4: Догађаји јКуери Туториал (Дио 4) - Слушаоци догађајаДанас ћемо то подићи и заиста показати где јКуери блиста - догађаји. Ако сте пратили прошле туторијале, сада бисте морали да добро разумете основни код ... Опширније
- Отклањање грешака са Цхроме алаткама за програмере Откријте проблеме са веб локацијама помоћу алата за програмере Цхроме или Фиребуг-аАко сте досад пратили моје јКуери туторијале, можда сте већ наишли на неке проблеме са кодом и нисте знали како да их решите. Када се суочите са нефункционалним битним кодом, то је врло ... Опширније
Шта?
АЈАКС је скраћеница за Асинхрони Јавасцрипт и КСМЛ, али кључна реч овде је асинхрони. Асинкроно се односи на чињеницу да се ови захтеви појављују у позадини, не прекидајући искуство прегледавања корисника. То вероватно никада раније нисте ни приметили, али ако се веб локација динамички ажурира, постоји велика шанса да то користи АЈАКС.
Пре АЈАКС-а, било који облик интеракције са сервером, било да се ради о дохваћању нових података или о објављивању информација од корисника, морао би се урадити коришћењем нове странице и преусмеравања.
Данас ћемо гледати коришћење услуге треће стране, Флицкр - од кога можемо да користимо АЈАКС за дохваћање неких слика помоћу ЈСОН врсте података. У ствари није важно како Флицкр имплементира примање ствари, јер у томе је лепота АПИ-ји - све што требамо знати је АПИ УРЛ, какве ћемо податке добити и како њима манипулирати.
За даље читање написао сам пре неко време још један туториал руковање АЈАКС-ом у ВордПресс-у ради слања контакт форме Туториал о коришћењу АЈАКС-а у ВордПресс-уАЈАКС је изванредна веб технологија која нас је одвела изван једноставне „клик везе, иди на другу страницу“ структура Интернета 1.0. Омогућава веб локацијама да динамички дохваћају и приказују садржај без корисник ... Опширније , па ћете то можда желети и да проверите; То укључује писање властитог ПХП хандлера и његово интегрисање у "званични" ВордПресс АЈАКС процес.
АЈАКС метод
Ево основног формата АЈАКС захтева:
$ .ајак ({типе: "ГЕТ ор ПОСТ", урл: "АПИ или УРЛ вашег ПХП хандлера", тип података: "ЈСОН", // зависно од тога које врсте података желите да вратите, али ЈСОН је највише уобичајени подаци: {// скуп кључева: парови "вредност"}, успех: функција (подаци) {// руковање успешним повратком података}, грешка: функција (порука) {// руковање грешком } });У почетку ово делује прилично сложено - не помаже им недостатак увлачења у овом додатку за код - али видећете колико је лако када дођете до примера из стварног света.
Флицкр АПИ АЈАКС
У овом примјеру, узећемо ознаке повезане са тренутним ВордПресс постом и дохватити ћемо неке слике које ћемо додати на крају чланка. Постоји сличан пример у јКуери документацији, али користи пречицу која се зове гетЈСОН () уместо да објашњава пуни АЈАКС формат. Иако је ово валидан начин вршења ствари ако знате да ћете добити само ЈСОН податке, сматрам да је учење стварне АЈАКС методе важније, тако да ћемо то и урадити.
Прво, један горе сингле.пхп и покушаћемо да поновимо једноставну листу тренутних ознака поста одвојене зарезом. Типично, ти би користили тхе_тагс () да то урадимо, али то није добро јер желимо да их на крају сачувамо као променљиве, док тхе_тагс () одјекује их унапред форматирано. Уместо тога, користићемо гет_тхе_тагс ():
пхп. $ тагслист = гет_тхе_тагс (); фореацх ($ таглист као $ таг) { ецхо $ таг-> наме. ","; }Ово лепо функционише, па ћемо га послати унутар АЈАКС захтева на Флицкр АПИ УРЛ на следећи начин (имајте на уму, ово је снимак екрана - да бисте сачували одступање, код је доступан на овај ПастеБин).
У овом тренутку, све то чини како би се приказао на конзоли прегледача или упозорио на поруку о грешци ако постоји. Да бисте заиста направили нешто са враћеним подацима, додајте негде за слике које ће бити постављене:
И уредите успех параметар позива АЈАКС за понављање преко предмети који су враћени.
$ .еацх (дата.итемс, функција (и, ставка) {иф (и == 3) враћа лажно; // стани када имамо 3 $ ("# флицкр"). аппенд ("
"); });И ту га имамо. Су додавање 3 ставке из враћеног ЈСОН објекта (подаци су индексирани нула, тако да ако дођемо до тачке 3, ми смо заправо четврта ставка. Збуњујуће, знам. У том тренутку користимо ретурн фалсе искочити из сваки () итератор). Већ сам прегледао садржај враћених објеката, тако да знам структуру података и издвајам само везу и ИМГ референцу. Ако вас занима шта се још врати, једноставно баците цонсоле.лог (ставка) тамо.
Ево резултата на мом тестном месту и пуни код на овом ПастеБин-у. Примјетите да су враћени резултати у основи смеће - мој пост је укључивао ознаку Уради сам За ход за пилетину, а Флицкр ми је поклонио уради сам. Леп. Наравно, ово је једна од препрека са којима се сусрећете када радите с АПИ-ом и радите ствари аутоматски; можете или поново означити своје постове (значајан подухват), променити захтев и затражити „све“ ознаке уместо „било које“ (вероватно ће се вратити ништа у овом случају) или смислите ново прилагођено поље у којем бисте одредили циљану кључну реч која се користи са АПИ-јем (вероватно најлакше).
СЕО разматрања
То није главна поанта, али будући да се бавите развојем веб локација то би требало бити споменуто: претраживачи неће индексирати садржај који не постоји при учитавању странице, као што је било шта учињено преко АЈАКС. Апсолутно најгора ствар коју бисте могли учинити је да у потпуности АЈАКСификујете свој блог, тако да је почетна страница само контејнер сличан ифраме-у за сав садржај који се динамички учитава. Користите АЈАКС мудро, за Побољшати садржај странице, а не као замена. Или се суочите са тешким последицама.
Хвала на читању, и надам се да сам вам дао неколико идеја. Наравно, Флицкр није једини АПИ тамо - само Гоогле „јавни АПИ“И сигурно ћете пронаћи више ствари са којима бисте могли да се играте.
Следеће недеље ће бити задња лекција из серије јКуери Туториал док проверимо јКуери УИ додатак. Као и увек, коментари и предлози су добродошли; ако имате питање од кога ће други имати користи, размислите о томе да га поставите на нашу страницу с одговорима.
Јамес има диплому о вештачкој интелигенцији и сертификат је ЦомпТИА А + и Нетворк +. Он је водећи програмер МакеУсеОф-а и своје слободно време проводи играјући ВР паинтбалл и таблегамес. Градио је рачунаре још од детета.
