Аякс за начинаещи

Какво е асинхронен обаждане?

Ако не използвате Аякс, всеки обмен на данни между сървъра и клиента ще се проведе на традиционния модел, това е, за обновяване на уеб-страници или да изтеглите нов.

Например, ако искаме да попълните някои влизане форма и натиснете изпрати, въведените данни се изпраща на сървъра, и след лечението се връща, което води до пълно опресняване на страницата, т.е. тази страница се зарежда като нов документ, заместващ предишния.

Благодарение на Аякс вместо, сървърът и клиентът може да комуникира "във фонов режим" на интервали от време или когато определено събитие се случи.

Ако все още не правя JQuery библиотека. го изтеглите от официалния сайт.

Създаване на уеб страница, която ще съдържа ajax.html проста форма вход, където искате да въведете име и фамилия.

Както можете да видите, след като формата е добавен DIV блок с ID доведе то ще по-късно изходни резултатите от форми на обработка.

Сега се създаде страница, result.php който ще бъде изпратен до данните от нашия вид. И сложи в него на следващия.

Този код просто показва съобщение с заместените предаваните данни от метод форма POST.

Включването на JQuery и функции за обучение

Нека сега се върнем към файла ajax.html го свържете с JQuery библиотеката и да предпише необходимите функции.

Сега се създаде желаната JQuery код, който ще бъде описан по-подробно по-долу.

И така, ние казваме на първия ред:

Елементът с ID "input_form", когато "представя" събитие се случи, за да изпълнява тази функция.

През второто и третото редове:

Var фамилия = $ ( "# фамилия") ATTR ( "стойност") .;

Ние определяме името на променливата, за премахване на елемент атрибут "стойност", с идентификатор "име" и "фамилно име".

Ние продължаваме да приложи Аякс повикване. В JQuery има три методи за контрол за асинхронни разговори е $ .post, $ .get и $ .ajax. В този първи пример ще използваме $ .post, който изпраща данни към сървъра по пощата.

- ние трябва да се направи отговор, който ще бъде изпратен на нашия сървър, създаване на «данни».

В нашия случай, ние изпращаме запитване result.php, осигуряване на данни като името на параметъра и името на променливата (по-рано разширени съдържание назоват поле за въвеждане на форма), а променлива величина и фамилия.

В случай, че използвате метода с $ .ajax, получаваме същия резултат, но само трябва да се пренапише функцията.

Този метод е малко по-сложно синтаксис, но е и по-адаптивни, отколкото метод $ .post и $ .get. Пълен списък на параметрите може да се намери в документацията.

Как да се управлява заявката Аякс с помощта на JSON.

В този пример, ние ще, когато натиснете бутон, който ще получите текущото време и дата на сървъра. Нека да започнем с PHP страница (result2.php).

Вземете показателя време, час и дата, и след това да я показва в Json формат

Сега е ред на Ajax json.html страница

Тук под формата се състои от един-единствен бутон, устройството също присъства Разделение идентификатор = "резултат", който ще бъде заменен от стойността на резултата от търсене.

Сега zaberom този код по-подробно.

В #input_form елемент, когато настъпи събитие представя изпълнява тази функция. На следващо място, да направи искане result2.php страница Аякс.

Сега успяхме да изградим ценности тип данни на параметрите чрез JSON. Това казва на JQuery какво отговорът трябва да е в този формат, следователно, отговора от сървъра ще бъде въведена в «данни» обекта. Поради тази причина, например, стойността, която изпратихме с името на ден ( "ден": "$ ден"), ние получаваме data.day.

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

Ние трябва да се даде достатъчно внимание на работата с Аякс, като се вземат предвид различните фактори, които влияят върху обмена на данни със сървъра. Да предположим, че искането е сложен или сървърът е зает, може да отнеме известно време. В типичен заявка към сървъра в прозореца на браузъра, ние може да видите съобщението "В очакване на откриването на WWW" "прехвърляне на данни от мрежата. "И т.н., но ако тя е подадена в Аякс, че няма да се случи. В следствие на това, че потребителят може да си помисли, че нищо не се случва, че е грешка използваемост.

Ето защо е необходимо да се замени цялата дължина на заявката всяко анимационен знак, от което става ясно, че за да се случи някакво действие.

Да вземем последния пример (Аякс-json.html), и нещо в него се промени:

Поставяне на изображението до бутона