Урок за jQuery (част 5): AJAX Them All!

реклама

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

Ако не сте чели предишните уроци, предлагам да го направите, преди да се справите с това, тъй като се надграждат помежду си.

• Въведение: Какво е jQuery и защо трябва да се грижите? Направете уеб интерактивна: Въведение в jQueryjQuery е скриптова библиотека от страна на клиента, която почти всеки съвременен уебсайт използва - прави уебсайтовете интерактивни. Това не е единствената Javascript библиотека, но тя е най-развитата, най-поддържаната и най-широко използваната ... Прочетете още
• 1: Селектори и основи Урок за jQuery - Първи стъпки: Основи и селекториМиналата седмица говорих за това колко е важно jQuery за всеки модерен уеб разработчик и защо е страхотно. Тази седмица мисля, че е време да си изцапаме ръцете с някакъв код и да научим как ...
  instagram viewer
  Прочетете още
• 2: Методи Въведение в jQuery (Част 2): Методи и функцииТова е част от непрекъснатото въвеждане на начинаещи в серията за програмиране на jQuery. Част 1 обхваща основите на jQuery как да го включите във вашия проект и селектори. В част 2 ще продължим с ... Прочетете още
• 3: Изчакване за зареждане на страница и анонимни функции Въведение в jQuery (част 3): Изчакване на страницата за зареждане и анонимни функцииjQuery е несъмнено съществено умение за съвременния уеб разработчик и в тази кратка мини серия се надявам да ви дам знанията, за да започнете да го използвате в собствените си уеб проекти. В ... Прочетете още
• 4: Събития Урок за jQuery (Част 4) - Слушатели на събитияДнес ще го изритаме и наистина ще покажем къде блести jQuery - събития. Ако сте следвали предишните уроци, сега трябва да имате доста добро разбиране на основния код ... Прочетете още
• Отстраняване на грешки с Chrome Developer Tools Открийте проблеми с уебсайта с инструменти за разработчици на Chrome или FirebugАко досега следвах уроците ми за jQuery, може би вече сте се сблъскали с някои проблеми с кода и не знаете как да ги коригирате. Когато се сблъскате с нефункционален бит код, това е много ... Прочетете още

Какво?

AJAX е съкращение за Асинхронен Javascript и XML, но ключовата дума тук е асинхронни. Асинхронно се отнася до факта, че тези заявки се появяват на заден план, без да прекъсват опита на сърфиране на потребителя. Вероятно никога не сте го забелязали преди, но ако уебсайт се актуализира динамично, има голям шанс той да използва AJAX.

Преди AJAX, всяка форма на взаимодействие със сървър, било то извличане на нови данни или публикуване на информация обратно от потребителя, би трябвало да бъде направено с използване на зареждане на нова страница и пренасочвания.

Днес ще разгледаме използването на услуга на трети страни, Flickr - от която можем да използваме AJAX за извличане на някои снимки с помощта на JSON тип данни. Всъщност няма значение как Flickr изпълнява приемащата страна на нещата, защото това е красотата на APIs - всичко, което трябва да знаем, е URL адрес на API, какъв тип данни ще върнем и как да манипулираме.

За по-нататъшно четене, преди малко написах друг урок за работа с AJAX в WordPress за подаване на формуляр за контакт Урок за използването на AJAX в WordPressAJAX е забележителна уеб технология, която ни изведе отвъд простата връзка „щракнете, отидете на друга страница“ структура на Интернет 1.0. Тя дава възможност на уебсайтовете динамично да извличат и показват съдържание без потребител ... Прочетете още , така че може да искате да проверите и това; това включва да напишете свой собствен PHP манипулатор и да го интегрирате в „официалния“ процес на WordPress AJAX.

Методът AJAX

Ето основния формат на заявка за AJAX:

$ .ajax ({type: "GET or POST", url: "API или вашият PHP URL обработващ URL адрес", тип данни: "JSON", // в зависимост от това какъв вид данни искате да върнете, но JSON е най-много общи данни: {// набор от ключове: "стойност" двойки}, успех: функция (данни) {// обработка на успешно връщане на данни}, грешка: функция (съобщение) {// справяне с грешката } });

В началото изглежда доста сложно - не се подпомага от липсата на отстъпи от този кодов плъгин - но ще видите колко лесно е, когато стигнете до пример за реален свят.

Flickr API AJAX

В този пример ще вземем маркерите, свързани с текущата публикация в WordPress, и ще вземем някои изображения, които да се добавят в края на статията. Има подобен пример в документацията на jQuery, но той използва метод на пряк път наречен getJSON () вместо да обясняваме пълен формат AJAX. Въпреки че това е валиден начин за правене на неща, ако знаете, че ще получите само данни от JSON, усещам, че научаването на действителния метод AJAX е по-важно, така че така ще го направим.

Първо, един нагоре single.php и ще се опитаме да изведем един прост списък със запетая отделен списък на текущите маркери за публикации. Обикновено бихте използвали the_tags () да направим това, но това не е добре, тъй като искаме в крайна сметка да ги съхраняваме като променлива, докато the_tags () ехото им направо предварително форматирано. Вместо това ще използваме get_the_tags ():

PHP. $ tagslist = get_the_tags (); foreach ($ тагове като $ tag) { ехо $ tag-> име. ","; }

Това работи добре, така че ние ще изпратим това от AJAX заявка към Flickr API URL, както следва (забележете, това е екранна снимка - за да запазите вдлъбнатината, кодът е достъпен на този PasteBin).

В този момент всичко, което го прави, за да изведе на конзолата на браузъра или да предупреди съобщение за грешка, ако има такова. За да направите действително нещо с върнатите данни, добавете някъде за поставените изображения:

И редактирайте успех параметър на AJAX извикване за итерация над елементи които са върнати.

$ .each (data.items, функция (i, елемент) {if (i == 3) връща невярно; // спрем, когато имаме 3 $ ("# flickr"). append (""); });

И там го имаме. Бяха вмъкване за 3 елемента от върнатия JSON обект (данните са индексирани с нула, така че ако стигнете до елемент 3, всъщност сме на четвъртия елемент. Объркващо, знам. В този момент ние използваме върнете невярно да скочи от всеки () iterator). Вече разгледах съдържанието на върнатите обекти, така че знам структурата на данните и извличам само връзка и справка за IMG. Ако се интересувате да знаете какво е върнато, просто хвърлете console.log (елемент) вътре.

Ето резултатите от моя тестов сайт и пълен код в този PasteBin. Забележете, че върнатите резултати са основно боклуци - публикацията ми включваше маркера Направи си сам за разходка с пилешко месо, а Flickr ми даде плетене на сам. Ница. Разбира се, това е едно от препятствията, с които се сблъсквате, когато работите с API и правите нещата автоматично; можете или да маркирате отново своите публикации (значително начинание), да промените заявката, за да поискате „всички“ тагове, вместо „всякакви“ (вероятно ще се върне нищо в този случай) или измислете ново персонализирано поле, към което трябва да посочите насочена ключова дума, която да използвате с API (вероятно Най-лесният).

SEO съображения

Това не е основен момент, но тъй като се занимавате с разработване на уебсайтове, това трябва да бъде споменато: търсачките няма да индексират съдържание, което не съществува при зареждане на страницата, като нищо направено чрез AJAX. Абсолютното най-лошо нещо, което можете да направите е да напълно AJAXify вашия блог, така че началната страница да е просто контейнер, подобен на рамка за цялото съдържание, което се зарежда динамично. Използвайте разумно AJAX, за да повишаване на съдържанието на страницата, а не като замяна. Или се сблъскате с ужасни последици.

Благодаря за четенето и се надявам да ви дам няколко идеи. Разбира се, Flickr не е единственият API там - само Google „обществен API“И със сигурност ще намерите още неща, с които можете да играете.

Следващата седмица ще бъде последният урок в серията jQuery Tutorial, докато проверяваме приставката за jQuery UI. Както винаги, коментарите и предложенията са добре дошли; ако имате въпрос, от който другите ще се възползват, помислете дали да го публикувате на нашия сайт за отговори.