Керівництво розробника, AJAX, Статті, Програмування - Програмування C, Delphi, C#
Цей приголомшливо продуманий і написаний у відповідності до стандартів код бере на себе чималу частину роботи, пов'язаної зі створенням функціонально-багатих інтерактивних сторінок, які характерні для Web 2.0.
Якщо ви вже намагалися використовувати цю бібліотеку, напевно, помітили, що документація не є її сильною стороною. Як і багато розробників до мене я розібрався з prototype.js шляхом читання коду та експериментів. Я подумав, що непогано було б, навчаючись, робити нотатки, а потім поділитися ними з усіма.
Також я пропоную неофіційну довідку щодо об'єктів, класів, функцій та розширень, що надаються цією бібліотекою.
Допоміжні функції
Бібліотека має у своєму розпорядженні безліч зумовлених об'єктів і допоміжних функцій. Очевидна користь цих функцій у скороченні необхідності набирати часто шматки коду, що часто повторюються.
Використання функції $()
Функція $() — це короткий запис для DOM Document.getElementById(), що дуже часто використовується. Як і функція DOM, вона повертає елемент, який має ID, переданий в аркументі.
Однак, на відміну від функції DOM, ця робить трохи більше. Ви можете передати більше одного аргументу і $() поверне масив ( Array ) об'єктів з усіма відповідними елементами. Приклад нижче демонструє це:
Інша прикметна особливість цієї функції полягає в тому, що ви можете передати їй як рядок з id, так і сам елемент, що робить цю функцію дуже зручною для створення інших функцій, які приймають той чи інший тип параметра.
Використання функції $F()
Функція $F() – це ще одне зручне скорочення. Вона повертає значення полів введення, таких як текстові поля або списки, що випадають.Функція приймає як параметр як id елемента, і сам елемент.
Використання функції Try.these()
Функція Try.these() дозволяє легко спробувати викликати кілька функцій, до тих пір, поки якась із них спрацює. спрацювала функції.
У наведеному нижче прикладі функція xmlNode.text працює в одних браузерах, а xmlNode.textContent працює в інших. Використовуючи функцію Try.these(), ми можемо отримати результат працюючої.
Об'єкт Ajax
Допоміжні функції згадані тут хороші, але не надто складні, чи не так? Ви, можливо, вже робили це самі і навіть маєте схожі функції у своїх скриптах. Але ці функції лише верхівка айсберга.
Я впевнений, що ваш інтерес до prototype.js викликаний переважно його можливостями, пов'язаними з AJAX. Давайте з'ясуємо, як ця бібліотека може полегшити життя при реалізації AJAX логіки.
Об'єкт Ajax - це визначений об'єкт, створений бібліотекою, для приховування та спрощення коду, в якому потрібна AJAX функціональність. Цей об'єкт містить кілька класів, що містять інкапсульовану логіку AJAX. Погляньмо на деякі з них.
Використання класу Ajax.Request
Якщо ви не використовуєте допоміжних бібліотек, то, ймовірно, пишете багато коду для створення об'єкта XMLHttpRequest , потім асинхронно відстежуєте його роботу, отримуєте відповідь сервера та обробляєте його. І щасливі, що вам не потрібна підтримка кількох браузерів.
Щоб допомогти з реалізацією AJAX функціональності, бібліотека визначає клас Ajax.Request.
Звернутися до сервера для отримання цього XML звикористанням Ajax.Request дуже легко. Приклад нижче показує, як це можна зробити.
Бачите другий параметр, переданий конструктору Ajax.Request? Параметр є анонімним об'єктом. Це означає, що ми передаємо об'єкт, який має властивість method , що містить рядок 'get' , властивість parameters , що містить рядок параметрів HTTP запиту та властивість/метод onComplete , що містить функцію showResponse .
Є ще кілька властивостей, які ви можете визначити і використовувати в цьому об'єкті, наприклад, властивість asynchronous , яка може приймати значення true або false , і чи буде запит до сервера асинхронним (значення за промовчанням true .)
Цей параметр визначає параметри AJAX запиту. У нашому прикладі ми запитуємо URL, вказаний у першому аргументі, за допомогою HTTP команди GET передаючи рядок запиту, вказаний у змінній pars, і об'єкт Ajax.Request викличе функцію showResponse, коли отримає відповідь сервера.
Як ви, можливо, знаєте, XMLHttpRequest повідомляє про прогрес під час запиту HTTP. Є чотири різні стани: Loading, Loaded, Interactive, або Complete. Ви можете вказати об'єкту Ajax.Request викликати різні функції на різних стадіях, найчастіше це використовується для стану Complete. Щоб повідомити об'єкт про свої функції, просто передайте властивості/методи onXXXXX в опціях запиту, наприклад onComplete , як у нашому прикладі. Функція, яку ви передаєте, буде викликана об'єктом з одним аргументом - об'єктом XMLHttpRequest . Ви можете використовувати цей об'єкт, щоб отримати дані, повернуті сервером або перевірити властивість status , яка містить код HTTP відповіді.
Дві інші цікаві опції можуть бути використані для обробки результату. Властивість onSuccess - цефункція, яка буде викликана, якщо AJAX запит виконається без помилок, а навпаки властивість onFailure може містити функцію, яка буде викликана, якщо трапиться помилка на сервері. Як і опції-функції onXXXXX , дві також будуть викликані з об'єктом XMLHttpRequest , який обслуговував запит, як аргумент.
Наш приклад не робив нічого цікавого з XML відповіддю. Ми просто виводили XML у текстове поле. Типовим використанням відповіді, мабуть, є знаходження необхідної інформації в XML та оновлення деяких елементів сторінки, або навіть застосування XSLT трансформації, щоб отримати HTML на сторінці.
Для більш повного пояснення дивіться довідку Ajax.Request і options.
Використання класу Ajax.Updater
Якщо ваш сервер може повертати інформацію, вже сформатовану в HTML, бібліотека може зробити ваше життя ще легшим за допомогою Ajax.Updater . З ним вам потрібно лише вказати, в який елемент повинен бути вставлений HTML, повернутий запитом AJAX. Приклад все розповість краще, ніж я зможу написати.
Як бачите, код дуже схожий на код з попереднього прикладу, за винятком функції onComplete, якої тепер немає, і id елемента, що передається конструктору. Змінимо трохи коду, щоб показати, як можна в клієнті обробляти помилки сервера.
Ми додамо в запит кілька опцій, що вказують на функцію, яка буде обробляти помилкові стани. Це робиться за допомогою опції onFailure. Ми також зазначимо, що елемент placeholder повинен оновлюватися лише у разі успішного запиту. Щоб досягти цього, ми замість простого id елемента першим параметром вкажемо об'єкт із двома властивостями, success (яке буде використано, якщо все спрацює) та failure (яке буде використано, якщо трапиться помилка). Ми не будемоВикористовувати властивість failure в нашому прикладі, а лише функцію reportError у властивості onFailure .