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

Ползите от Ajax

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

Прилагане на Ajax и JQuery

Съществуването на интерактивни приложения не би било възможно без технологията Ajax. Той се използва в Angulara (AngularJS) - рамка за JS. Не е необходимо да използвате Ajax технологията на цялата страница. Може да се използва само за някои елементи на актуализираната страница. Например за автоматично подмяна, валидиране на формуляри итърсене. Библиотеката JQuery е колекция от готови решения, написани на PHP. Можете да го намерите от "Ajax libs jquery". Има възможност за свързване чрез специална услуга на Google. Тя се нарича Ajax Googleapis. Jquery в този случай се свързва директно. Разбира се, това ускорява зареждането на страницата. Потребителите често намират мини версията на Jquery, Ajax на Googleapis.com. Той има пресечен функционален, но по-удобен за начинаещи. Името на мини версията на Jquery, Ajax на Googleapis.com - min.js.

Формати на предаване на данни

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

Създаване на прост документ в JSON формат

В JS всички свойства описват един глобален обект на прозореца, т.е. прозорец на браузъра. Всички библиотеки описват функциите (методите) и свойствата на този обект. JSON е отделен клас, който наследява от обект и има два собствени метода: parse и stringify. За подробности вижте двата метода по-долу.
Работа с AjaxМожете да използвате JS без jQuery. Линията JSON може да бъде преобразувана в JS обект и обратно. Нека разгледаме как да го направим на примери. Първо, създайте документ и го наречете, например "man" с разширението JSON. След това последователно правим следното:

Отворете файла в редактора на код, например PhpStorm или Sublime.

JSON форматът има свой собствен синтаксис. Първо се създава обект - той изисква фигурни скоби.

В скоби трябва да се съдържа ключът и неговото значение. Ключовете трябва да са в двойни лапи. В стандартния JS при създаването на обект ключът се пише без кавички. Например, за обекта "man" в JSON формат, трябва да създадете ключовете "име" и "възраст". В резултат получаваме следния код: {name: Pavel, възраст: 28}.

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

ред;

номер;

масив;

обект.

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

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

JS низът често се трансформира в обект JSON. Струва си да се обърне внимание, че в кода при прехвърляне на линиятакраят трябва да стои наклонена, в противен случай JS няма да разбере, че е приключил. Кодът JS ще изглежда така: Трябва да се уверите, че ключовете са в двойни кавички, в противен случай ще има грешка. Имаме проста линия. Тя може да идва от всеки сървър. За да се уверите, че е една и съща линия, тя може да бъде показана на конзолата чрез добавяне на командата "console.log (json)" към кода. = 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 и има две стойности: "фалшива заявка се извършва синхронно, а true - в този случай тя ще бъде асинхронна. Ако заявката е синхронна, скриптът изчаква отговора. Ако отговорът отнеме секунда, следващият ред от кода няма да бъде обработен. В нашия случай, първата стойност ще бъде необходима, в противен случай ще бъде необходимо да проверите отговора през събитието и да зададете функция, която да бъде изпълнена веднага след като заявката дойде, след което добавяме друг ред: xhr.send ().Отговорът на заявката трябва да бъде код.Това може да бъде код "200", което означава, че сървърът е на разположение, "404" - документът не е намерен, "300" е пренасочване и "500" е сървърна грешка. дали има грешка, която трябва да сравнитекод "200". За да направите това, добавете кода към следния ред: if (xhr.status! = 200) и изведете стойността в конзолата. Ако всичко е наред, клонът ще започне, в който добавяме конзола със стойността "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:& lt;В този код се използва например версия 310. За правилната работа трябва да добавите актуална версия. Важно е адресът да започва с "//ajax.googleapis.com/ajax/libs/jquery". След това създаваме нов файл в HTML формат и свързваме библиотеката, като посочваме местоположението му в таг скрипта и го поставяме в главата. След това започваме да пишем самият скрипт. Нека започнем със следния ред: $ (document) .ready (). Когато документът е готов, той ще бъде извиканвложена функция: (function () {}). Това е необходимо, за да заредите DOM модела, от който работим, т.е. всичко в теглото на тялото. Ако не направите това, скриптът ще бъде обработен преди зареждането на DOM модела.

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

Като пример, Jquery, Ajax ще създаде форма. За да направите това, създайте div с клас на форма и го добавете към типа на въвеждане "text" и атрибута name със стойността "name". След това добавете друг вход, с типа "текст" и името "адрес". Всеки вход ще присвои идентификатор. Можете да използвате стойностите на атрибутите на името като идентификатор. Добавете намек за двата входа, като помолите потребителя да въведе името и адреса. Ако желаете, можете да добавите друга линия за възрастта. Сега трябва да направите бутон, за да изпратите формуляра. Вътре в етикета на бутоните пишем думата "send" и добавяме идентификатора btn. Добавете разделителите - тагове br - за всеки ред и проверете какво се е случило. Можете да добавите външни отстъпи, като ги напишете в стиловия етикет, но това не е задължително. Докато формулярът не работи. За неговото функциониране, бутонът трябва да е свързан със събитие, тъй като данните ще бъдат изпратени, когато се натисне. За да направите това, изберете бутона на селектора и въведете събитието "кликнете": $ ('# btn'). Сега тази функция ще се изпълни при кликване. Ние използваме метода on, който подписва определена функция на събитие при натискане на елемент. Това означава, че когато бутонът е натиснат, той ще работи. Проверете дали всичко работи с изхода на конзолата. Няма много начини да изпратите заявка до Jquery, Ajax. Можете да използвате get, post или просто Ajax. Тъй като тези данни могатЩе използваме метода Jquery, пост Ajax, за да променим нещо.

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

В тази стъпка трябва да получим стойността на всички полета на формуляри. В Jquery, Ajax има два начина да направите това. Можете да използвате функцията или без нея. За първата версия пишем следния код: var name = $ ('# name'). След това добавете същия адрес и възраст. Имаме връзки към елементите, а не към най-важните. Сега използваме метода Jquery, Ajax post. За да направите това, напишете: $ .post (). Сега методът трябва да бъде персонализиран. Той приема URL адреса, на който ще бъде изпратен формулярът. За да направим това, ще използваме валидатор. За да направите това, напишете скобите '/validator.php'. Добавете друг параметър - самите данни: var data = 'name =' + name.val () + '& amp; address =' ​​+ address.val () + '& amp; 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']) & amp; & amp; (isset ($ post ['age']) & amp; & amp; (isset ($ post ['address'].) Това означава, че След това добавяме условието: else {$ array ['status'] = 'error'} Проверете дали всичко работи.Ако има грешки в кода, ние ги търсим и поправяме.Асинхронно, потребителят може да въведе допълнителна информация в заявката за трансфер. момента, в който се прехвърля към сървъра, можете да използвате не само езика за програмиране на PHP, но и други сървърни езици.