JQuery Ajax: Използване и функции

Терминът Ajax се декодира като асинхронен Javascript и XML (асинхронен Javascript и XML) и се отнася до технологията за създаване на заявки без презареждане на страницата: ако изпращате данни на сървъра, той отговаря и страницата не се актуализира. Най-простият пример за Ajax заявка е търсене. Ако отворите търсачка и започнете да въвеждате заявка, съветите ще се появят веднага под нея, но страницата няма да се обнови. За запис на съкратено обаждане на методите Jquery се използва знакът за долар.

Предимства на Ajax

Ajax ви позволява да спестите трафик и използването му е по-удобно за потребителя, тъй като не е нужно да чакате дълго за пълно презареждане на страницата. Но разработчикът, използващ този метод, е принуден постоянно да следи действията на потребителите и да ги подтиква да разберат какво се случва на страницата. Важно е да се разбере, че старите версии на браузъри, включително текстът, не поддържат технологията Ajax. Понякога потребителите забраняват използването на JS, защото скриптовете може да спрат да работят. Ето защо е важно да се мисли за алтернативи и да не се разчита само на този метод.

Ajax и jQuery Application

Съществуването на интерактивни приложения не би било възможно без технологията на Ajax. Използва се в работата на Angular (AngularJS) - рамка за JS. Използването на Ajax технологията по цялата страница е по избор. Може да се използва само за някои елементи на актуализираната страница. Например за автоматично коригиране, проверка на формуляри и търсене.

Библиотеката jQuery е колекция от готови решения, написани в JS. Можете да го намерите по запитването “Ajax libs Jquery”. Има вариант на връзката му чрез специална услуга на Google. Тя се нарича Ajax Googleapis. Jquery в този случай се свързва директно. Разбира се, това ускорява зареждането на страницата. Най-често потребителите намират мини версия на Jquery Ajax на Googleapis.com. Тя е с намалена функционалност, но е по-удобна за начинаещи. Мини версията на Ajax Jquery на Googleapis.com се нарича - min.js.

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

XML в декодиращи съкращения Ajax е формат за обмен на данни. Първоначално, когато технологията е била създадена за първи път, обменът е станал само с негова помощ. XML е много подобен на HTML, но в него всички маркери трябва да бъдат затворени. По-късно в JS езика се появи нов формат - JSON. Беше толкова просто и удобно, че се разпространи и в други езици и библиотеки. JSON е по-подходящ за прехвърляне на малко количество данни, до 20 хиляди редове. По-лесно е да се работи с него, той е по-гъвкав и разбираем за програмиста. С повече информация използвайте XML. Например, изпращането на заявки до търсенето на Yandex се извършва с този формат.

Създаване на най-простия JSON документ

В JS всички свойства описват един глобален обект на прозореца, т.е. прозорец на браузъра. Всички библиотеки описват функциите (методите) и свойствата на този обект. JSON е отделен клас, който наследява от обект и има два собствени метода: parse и stringify. По-долу ще разгледаме по-подробно двата метода.

Можете да работите с Ajax от JS, без да използвате jQuery. JSON низ може да бъде преобразуван в JS обект и обратно. Помислете как да направите това с примери. Първо, създайте документ и го наречете, например „man“ с разширение JSON. След това изпълняваме последователно следните стъпки:

1. Отворете файла в редактор на код, например PhpStorm или Sublime.
2. JSON форматът има свой собствен синтаксис. Първо се създава обект - той се нуждае от къдрави скоби.
3. Ключът и неговата стойност трябва да присъстват в скоби. Клавишите трябва да са в двойни кавички. В стандартния JS, при създаването на обект, ключът се пише без кавички. Например, за обект "man" в JSON формат, трябва да създадете ключовете "име" (име) и "възраст" (възраст). В резултат получаваме следния код: {"name": "Павел", "възраст": 28}.

Ако имате нужда от няколко обекта, те се поставят в масив, който се отличава с квадратни скоби. Важно е да имате предвид, че форматът JSON не поддържа коментари. При всяка форма това ще бъде грешка. Но няма специална нужда от тях.

Самите ключови стойности могат да бъдат от следните типове:

• низ;
• номер;
• решетка;
• обект.

Масивът е записан в квадратни скоби, обектите в него са затворени в кавички и разделени със запетая. Можете също да добавите прикрепен обект, например адрес. Тя трябва да бъде затворена в скоби. Така бързо се създава най-простият JSON документ. За удобството на използването му и се влюбих в разработчиците.

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

Низа в JS често трябва да се преобразува в JSON обект. Трябва да се отбележи, че в кода, когато преместите линията в края трябва да бъде наклонена черта, в противен случай JS няма да разбере, че е приключил. Кодът в JS ще изглежда така:

Необходимо е да се гарантира, че ключовете са в двойни кавички, в противен случай ще възникне грешка. Имаме най-простия низ. Тя може да идва от всеки сървър. За да сте сигурни, че е низ, можете да го изведете на конзолата като добавите командата "console.log (json)" към кода. Сега конвертирайте низ в обект. За да направим това, първо декларираме променлива и извикаме специален клас parse за него: var jsonObj = JSON.parse (). След това преминаваме параметъра. За работа с JSON формат в JS има специален клас със същото име. По този начин можете да конвертирате низ в обект. Ако по някаква причина конвертирането не е възможно, ще се появи предупреждение. За да потвърдите, че всичко е направено правилно, и двете променливи могат да бъдат показани в конзолата. В първия случай, когато се показва низът в конзолата, интервалите ще се появят след стойностите, тъй като JS ще преброи техния номер преди символа на сляпа. Това не е грешка, но за красотата на кода е препоръчително да се премахнат допълнителни пространства.

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

Можете да направите обратното и да конвертирате обекта в низ. За да направим това, ние обявяваме променливата и използваме JSON клас отново, като я добавяме през точката, но избираме друг метод - stringify: var ObjtoStr = JSON.stringify (). След това прехвърляме необходимия параметър. Тази команда изпълнява обратното преобразуване. Този параметър може да прехвърли всичко, от което се нуждаем, например само името. За да направите това, желаният ключ трябва да бъде заграден в квадратни скоби. Така че можете да работите с JSON от JS.

Изпращане на заявка към сървър

Сега да отидем в Ajax и да изпратим тази заявка на сървъра. Първо трябва да създадете обект XMLHttpRequest. Този клас отговаря за изпращането на заявката и ви позволява да го създадете, без да презареждате страницата. Ще се използва JSON, но името на класа не се е променило: XML. Кодът за изпращане на заявка е: var xhr = XMLHttpRequest (). Още няма да изпращаме опции. Сега конфигурирайте тази заявка. За да направите това, напишете: xhr.open (). Отвореният метод ще конфигурира адреса. За да направите това, добавете думата "GET" в скоби. Освен това, разделени със запетая в единични кавички, пишем адреса на хоста, където да изпратим заявката. В края на реда добавете името на обекта, т.е. файла за сваляне - в нашия случай той е “man.json”.

Синхронна и асинхронна заявка

Третият параметър, който е необходим за изпращане на заявка, е да се определи дали ще бъде синхронно или не. Тя се нарича async и има две стойности: false - заявката се прави синхронно и true - в този случай тя ще бъде асинхронна. Ако заявката е синхронна, скриптът изчаква отговор. Ако отговорът отнеме секунда, следващият ред от кода няма да бъде обработен. Синхронна заявка ще бъде изпълнена в отделна нишка и скриптът ще продължи изпълнението на команди. В нашия случай ще ни е нужна първата стойност, защото в противен случай проверката на отговора ще трябва да се извърши през събитието и да се зададе функция, която ще бъде изпълнена веднага след като заявката дойде.

След това добавете нов ред код: xhr.send (). Сега, в отговор на искането, кодът трябва да дойде. Това може да е код "200", което означава, че сървърът е достъпен, "404" - документът не е намерен, "300" - пренасочване и "500" - грешка от сървъра. За да разберете дали има грешка, трябва да сравните кода с “200”. За да направите това, добавете следния ред към кода: if (xhr.status! = 200) и изведете стойността в конзолата. Ако всичко е наред, клонът else ще започне да се изпълнява, към който добавяме изход към конзолата със стойността “OK”. По този начин изпратихме заявка до сървъра с помощта на JS и научихме как Ajax работи от JS. Създадохме XMLHttpRequest, посочихме метода, пътя, синхронността или асинхронността и получихме резултата.

Jquery ajax

Опитни програмисти не използват чиста JS за работа, а използват всяка библиотека - най-често jQuery. JS Ajax заявките в jQuery са много по-лесни за създаване, поради което е станал толкова популярен. Нека се опитаме да подобрим скрипта с тази библиотека. Първо трябва да изтеглите jQuery. Той се предлага в няколко версии. Можете да свържете библиотеката чрез услугата Google Code. Има възможност за разработчици, където има възможност за коментиране и прекъсване на редове. Друга версия е минимална. Той се намира на адрес: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Има смисъл да свържете тази библиотека на работещ сървър. Можете да добавите библиотека, като използвате следния код чрез услугата Google Code:

Този код използва версия 3.1.0 като пример. За да работите правилно, трябва да добавите текущата версия. Важно е адресът да започва с "//ajax.googleapis.com/ajax/libs/jquery". След това създаваме нов файл в html формат и свързваме библиотеката, като посочваме адреса на неговото местоположение в таг скрипта и го поставяме в главата. Ще го стартираме с този ред: $ (document) .ready (). Когато документът е готов, вложената функция ще бъде извикана: (function () {}) Това е необходимо, за да заредите DOM модела, с който работим всичко, което е в маркера на тялото, ако това не е направено, скриптът ще бъде обработен преди зареждането на DOM модела.

Създаване на форма

Като пример за jQuery Ajax, създайте формуляр. За да направите това, създайте div с клас на форма и добавете вход с типа “text” и атрибута name със стойността “name”. След това добавяме друг вход, с типа “текст” и името “адрес”. На всеки вход се присвоява идентификатор. Като идентификатор можете да използвате стойностите на атрибутите на името. Добавете намек за въвеждане с предложение към потребителя да въведе име и адрес. По избор можете да добавите друг ред за възрастта. Сега остава да направите бутон за изпращане на формуляра. Вътре в етикета на бутоните пишем думата „send“ и добавяме идентификатора btn. Добавяме разделители - br тагове - на всеки ред и проверяваме какво имаме.

Можете да добавите външни отстъпи, като ги напишете в стиловия маркер, но това не е задължително. Докато формулярът не работи. За неговата работа е необходимо да свържете събитието с бутона, тъй като данните ще бъдат изпратени точно при натискане. За да направите това, изберете бутона на селектора и въведете събитието “click”: $ ('# btn'). Сега, когато щракнете върху тази функция ще се изпълни. Ние използваме метода on, който подписва специфична функция на събитие на кликване върху някакъв елемент. Това означава, че когато бутонът е натиснат, той ще работи. Проверяваме дали всичко работи с помощта на изхода към конзолата. Методите за изпращане на заявка в jQuery Ajax не са толкова много. Можете да използвате get, post или просто Ajax. Тъй като тези данни могат да променят нещо, ще използваме Jquery Ajax post метод.

Получаване на стойности от полето за формуляри

В следващата стъпка трябва да получим стойностите на всички полета на формуляра. В jQuery Ajax има две възможности за това. Можете да използвате функцията или без нея. За първата опция пишем следния код: var name = $ ('# name'). След това добавяме подобни линии за адреса и възрастта. Получихме препратки към елементите, а не към самите ценности. Сега използваме Jquery Ajax post метод. За да направите това, пишем: $ .post (). Сега трябва да конфигурирате метода. Отнема URL адреса, където формулярът ще бъде изпратен. За това ще използваме валидатора. За да направите това, в скоби пишем '/validator.php'.

Добавете още един параметър - самите данни: var data = 'name =' + name.val () + '& address =' ​​+ address.val () + '& age =' + age.val (). Сега имаме данните, получени чрез метода Jquery Ajax. Остава само да добавите функцията за обратно извикване, която ще бъде извикана, когато отговорът идва от сървъра. Тя трябва да регистрира следните параметри: данни за сървъра, описание на състоянието и дали заявката е изпълнена. Показваме параметъра за данни в конзолата, за да проверим дали всичко работи. Също така е важно да се вземе под внимание, че Ajax заявка винаги се прави в Unicode, защото кодирането на документа трябва да бъде utf-8. Ако сайтът и сървърът са в различно кодиране, а Ajax се изпълнява в Unicode, сървърът ще върне йероглифите и низът ще трябва да бъде прекодиран. За да се избегне това, препоръчително е да се направи всичко в utf-8.

Работа с PHP

Сега използвайте jQuery Ajax с PHP. Създайте нов файл и го извикайте validator.php. Нека покажем нашите данни. За да направим това, пишем: $ array = $ post. Сега изведете всички данни в JSON формат: echo JSON_encode ($ array). Проверяваме как работи формата, като попълваме полетата и изпращаме заявка до сървъра. Ако всичко е направено правилно, ще получим обект с посочените параметри. Получихме данните, сега те трябва да бъдат обработени и записани. Пишем: if (isset ($ post ['name']) && (isset ($ post ['age']) && (isset ($ post ['address']). Издание означава, че съществува такава променлива. : else {$ array ['status'] = 'грешка'}. Проверяваме дали всичко работи.Ако има грешки в кода, ние търсим и поправяме.Поради асинхронното предаване на заявката, потребителят може да въведе допълнителна информация в момента, когато предаването е включено Можете да използвате не само езика за програмиране на PHP, но и други сървърни езици.