Съдържание
AJAX Той включва набор от техники и технологии, които ни позволяват да установим асинхронна комуникация между това, което клиентът вижда в мрежата, и информацията, която съществува от страна на сървъра на уеб страница.Една от основните характеристики, които можем да подчертаем, е, че разчита на различните методи HTTP Какво POST, GET, PUT или DELETE за да може да изпраща необходимите данни към приложенията на сървъра.
В ранния етап на развитие с AJAX повикванията трябваше да се изграждат с помощта Javascript flat, който обаче генерира много код за нас jQuery ни помага да опростим нещата, като въвеждаме тази техника и технологии в масите, всичко в полза както на разработчика, така и на потребителя.
Какво е AJAX?AJAX съответства на Асинхронен Javascript и XML а именно Javascript Y XML асинхронно, което също означава, че е нещо, което не зависи от фиксирана структура като скрипт PHP където инструкциите се изпълняват последователно, разбира се запазвайки повикванията към методи и функции на класове и обекти.
Описаното по -горе ни дава възможност да зареждаме информация или да я изпращаме, без да се налага да презареждаме или да правим „пълна“ заявка към сървъра, ние я поставяме в кавички, защото повикванията AJAX Това са нормални заявки, просто не е необходимо да опреснявате страницата изцяло, ако това не е желаното поведение.
Използването на тези техники и технологии представлява някои предимства, които не са много наясно с тяхното съществуване, много пъти го използваме само за въпрос на тенденция, но ако разберем ползите му, ще можем да знаем към кои проекти можем да го приложим, за да получим най -много от него. Нека видим по -долу някои от най -важните предимства на използването AJAX:
Намаляване на използването на честотна лентаПостигаме това благодарение на по -специално исканията на секции, като с това можем да постигнем, например, да не се налага да презареждаме общи стилове или изображения, ако това, което искаме, е да опресним текста.
По -добро потребителско изживяванеЧрез увеличаване на скоростта на уеб приложението, потребителят има значително подобрение в използването, освен че ни дава възможност като разработчици да увеличим степента на взаимодействие с елементите, които сме подредили.
Премахнете зависимостта на браузъраПри използване jQuery необходимостта от писане на код, който зависи от браузъра, се елиминира, това ни помага да подобрим скоростта на развитие и производителността на нашето време.
Тъй като при използване нищо не е перфектно AJAX Трябва също така да разберем, че има някои недостатъци, които могат да ни накарат да се замислим и да се замислим дали това е най -добрият вариант за нашия проект. След това ще видим някои от тези точки, за да имаме по -пълна картина, преди да започнем техническата част на урока.
ЗависимостАко клиент или потребител използва много стар браузър или използва Javascript деактивирано, нашето приложение може да страда или да не работи, което ни дава задължението да правим специални случаи, когато не можем да използваме AJAX.
Напишете допълнителен кодСпоред нашето приложение трябва да напишем допълнителен код, за да можем да интегрираме отговорите, които получаваме от заявките AJAX, като отговори, които идват с HTML Y CSS.
Разбира се, в момента е много трудно да се намери браузър, който да не е съвместим Javascript Y jQueryВъпреки това, в зависимост от нашия район, можем да намерим някои случаи, които могат да направят живота много труден.
Молба AJAX от jQuery трябва да има основна структура, където трябва да установим някои параметри, необходими за рамката, трябва да установим метода HTTP на заявката, маршрута, по който ще бъде направена заявката, формата на отговора и накрая, какво трябва да се направи в случай, че заявката е успешна или когато възникне грешка. Нека да видим в следния нефункционален код как можем да видим това:
$ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Type of data", / / html, xml, json success: функция при успех, грешка: функция при грешка}); Виждаме, че всеки от разделите, които описахме, са параметри, които нашата заявка получава и че се извършва чрез метода $ .ajax () която се доставя от jQuery директно и това е маска за кода Javascript равнина, която съответства на всеки двигател на всеки поддържан браузър, които по това време са почти всички най -нови реклами като Chrome, Firefox, Opera, Safari Internet Explorer, и тези, получени от двигателите на тези, които споменахме.
Сега ще приложим на практика това, което видяхме в предишния раздел при подаване на заявка AJAX от страница HTML който ще изградим в следния пример. Трябва да знаем, че ще се нуждаем от най -актуалната версия на jQuery можем да получим, но можем да използваме този, който съхраняват в своите CDN, ние също ще се нуждаем от малък уеб сървър, за да можем да маршрутизираме файловете, които ще получим асинхронно, за това можем да използваме WAMP в Windows, или инсталация ЛАМПА в системите Linux, по отношение на MAC платформите, които можем да използваме XAMP или подобен.
В следния код ще включим първо jQuery, след това ще създадем етикет в тялото с уникален идентификатор, където ще поставим съдържанието на отговора на нашата заявка, а близо до края на документа ще направим етикет скрипт където ще генерираме кода, за да направим заявката, в атрибута на url ще направим заявката към индекса на папката, където се намират нашите файлове, правим това, за да покажем работата на нашия код, но начинът да направим това е да поискаме друг файл, който да обслужва нужния отговор, нека вижте кода:
Пример за AJAX заявкаПроцес AJAX
На следващото изображение виждаме как всичко е работило, където можем да видим успешен отговор от нашия код.
Едно от нещата, които jQuery иска да не губим време и да кодираме нещата по дълъг път, затова ни предлага преки пътища за разговори AJAX най -често срещаните методи като ПОЛУЧАВАЙТЕ Y POST, така че с помощта на пряк път спестяваме няколко реда код и по този начин можем да намалим теглото на нашето приложение.
За това в официалната документация на jQuery Имаме всички съществуващи случаи, но ще преработим предишния пример, използвайки в този случай прекия път, но преди да видим функционалния код, нека видим нефункционалния пример:
$ .get (път, данни, SuccessFunction, ResponseType);
Тъй като забелязахме, че това обаждане е много по -малко, което ни помага да имаме по -чист и по -лесен код, сега прилагайки това към предишния ни пример, той ще бъде следният:
Пример за AJAX заявкаПроцес AJAX
Виждаме, че броят на редовете и знаците е значително намален, което би подобрило нашето предаване на данни чрез използване на по -ниска честотна лента. Ако стартираме всичко в браузъра, това ще ни даде следния отговор:
