Prototype спрощення роботи з ajax

Чому варто використовувати Prototype?

Зрештою, Prototype також виконує функції XMLHttpRequest. маючи свій Ajax.Request і пов'язані з ним об'єкти. Вам вже не потрібно писати код для використання цього об'єкта в різних браузерах.

Директорія, яка містить HTML-файл програми, містить також директорію з ім'ям js. Ця директорія містить prototype.js. код об'єкта цієї статті в файлі co2.js. а так само і решті код додатка в файлі eevapp.js.

зміна клімату

Як Prototype може нам допомогти в роботі з нашими додатками? Які вимоги ці додатки мають?

CO2 аплет

На зображенні 1-1 показаний екран браузера для додатка. У верхньому лівому кутку програми - аплет, який показує рівень вмісту CO2 в атмосфері в обраний користувачем рік.

Малюнок 1-1. Елемент select показує рівень CO2

Ці дані були отримані з обсерваторії Мауна-Лоа в результаті досліджень, призначених до проведення урядом США на Гаваях. Вимірювання проведені на великій висоті в заповідниках. Вчені всього світу використовують цю інформацію в своїх дослідженнях кліматичних змін.

Коли Prototype починає працювати

У eevapp.js файлі міститься код, який виконується, коли користувач вибирає рік зі списку.

Значення "co2_select" - це id списку вибору, за яким клікає користувач, вибираючи рік.

повертає посилання на DOM-елемент. Це еквівалетнно виконання document.getElementById ( "co2_select"); .

Простими словами, коли користувач вибирає рік в річному меню, браузер виконує цю функцію. Що виконує дана функція? Функція отримує посилання на HTML div елемент з id "co2ppm", знову ж таки, використовуючи скорочення Prototype'а. Властивість innerHTML об'єкта div. показує, що бачить користувач в браузері, - немає значення, що повертається в результаті виклику методу

Об'єкт під назвою co2lev описаний у верхній частині файлу eevapp.js.

лаконічний синтаксис

Цей символ долара знову з'являється в синтаксисі: $ F ( "co2_select"). Функція Prototype $ F () видає значення елемента в форматі HTML. Додаток використовує цю функцію для зміни показуваного рівня CO2 кожен раз, коли користувач вибирає інший рік.

Є одна порада щодо $ F (): для списку вибору значення видається тільки якщо елемент option містить атрибут value: . У всякому разі, версія Prototype'а, яку я використовував (1.4.0) не видавала значення з $ F (). якщо я пропускав частина value = ".".

огляд об'єкта

Визначення об'єкта CO2Levels з'являється в файлі co2.js. На зображенні 1-2 представлена UML-діаграма класу, що описує об'єкт.

Малюнок 1-2. діаграма класу

Ось повний код для об'єктів CO2Levels. Перший рядок створює новий об'єкт, використовуючи базовий синтаксис Prototype, локальна змінна levels - це об'єкт, схожий на асоціативний масив, який з'єднує року з рівнями змісту CO2. Я не написав велику частину років для того, щоб зробити це все Новомосковскбельним.

Створення об'єктів Prototype

Prototype-об'єкт Hash

Наприклад, метод Hash.keys () повертає масив всіх Hash -Ключі (таких як все року). Метод values () повертає масив значень (рівні вмісту СО2). Метод merge () додає нові ключі і значення в Hash.

Наш об'єкт CO2Levels використовує принцип делегування, за яким він звертається до своїх же методам keys (). values (). і add (). Ці методи делегують роботу у вбудований об'єкт Hash. який зберігається як локальна змінна: levelsHash.

Давайте подивимося на getYear ().

Додавання в існуючий хеш

Об'єкт CO2Levels включає метод add (). який може додавати нові ключі і значення (додаткові року і рівні вмісту СО2) до існуючої інформації.

Код потім передає цей об'єкт для обробки методом merge () Prototype-об'єкта Hash. Цей метод об'єднує новий об'єкт з існуючою інформацією в хеше, поєднуючи їх повністю в одну групу даних або асоціативний масив.

Метод merge () повертає існуючі дані з новою парою властивість-значення, додаючи її до кінця.

З невеликим рефакторингом код може використовувати XMLHttpRequest для здійснення вибірки будь-якої нової інформації про рівні вмісту СО2 від Mauna Loa Observatory, потім додати її до існуючих даних на стороні клієнта.

Зрештою, в об'єкті Prototype Hash є також метод inspect (). Завдяки йому з'являється Новомосковскбельное відображення змісту хеша, як на зображенні 1-3.

Малюнок 1-3. Хеш. Як він виглядає.

Об'єкт CO2Levels делегує завдання inspect () методу внутрішньому об'єкту Prototype Hash.