Освоєння Ajax: Частина 4. Використання DOM для створення Web-додатків з швидкою реакцією

Вододіл між програмістами (які працюють з серверними
додатками) і Web-програмістами (витрачають свій час на HTML, CSS і
JavaScript) існує вже давно. Однак Document Object Model (DOM)
ліквідувала прірву і зробила роботу з XML на сервері і з HTML на клієнтському
комп'ютері можливою і ефективною. У цій статті Брет МакЛафлін знайомить з
Document Object Model, пояснює її використання в Web-сторінках і починає
дослідити її використання з JavaScript.


Як і багато Web-програмісти ви, можливо, працювали з HTML. З HTML
програмісти починають роботу над Web-сторінкою; HTML часто є останньою
річчю, яку вони роблять по завершенні роботи з додатком або сайтом,
вилизуючи до останнього біта розміщення, колір або стиль. І, таким же звичайним,
як і використання HTML, є неправильне уявлення про те, що на
насправді відбувається з HTML, коли він надходить в браузер для візуалізації на
екрані. Перед тим як я заглиблюючись у те, що, на вашу думку, може відбуватися
(І чому це, ймовірно, не правильно), я хочу прояснити інформацію про процеси,
залучених до проектування та обслуговування Web-сторінок:



  1. Хтось (звичайно, ви!) Створює HTML в текстовому редакторі або IDE.
  2. Потім ви завантажуєте HTML на Web-сервер, наприклад, Apache HTTPD, і робите
    його загальнодоступним по Інтернет або інтранет.
  3. Користувач запитує вашу Web-сторінку в браузері, наприклад Firefox або
    Safari.
  4. Браузер користувача виконує запит HTML на ваш Web-сервер.
  5. Браузер візуалізує сторінку, отриману від сервера, в графічному і
    текстовому вигляді; користувачі переглядають і активують Web-сторінку.

Хоча все це загальновідомо, речі швидко стають цікавими. Фактично,
величезна кількість "речей", що відбуваються між кроками 4 і 5, і є
предметом розгляду даної статті. Термін "річ" дійсно застосуємо,
оскільки більшість програмістів ніколи не замислюються про те, що
дійсно відбувається з їх розміченим документом, коли браузер користувача
запитує його для відображення:



Виявляється, відповіддю на всі ці питання є Document Object Model.
Тому давайте без зайвої суєти заглибимося в DOM.


Web-програмісти та розмітка

Для більшості програмістів їх робота закінчується там, де починається
Web-браузер. Іншими словами, закинувши файл в каталог на вашому Web-сервер, ви
зазвичай робите позначку "зроблено" і (з надією) ніколи про нього більше не
згадуєте
! Це відмінна мета, коли потрібно написати ясні,
добре-організовані сторінки, нема нічого поганого в очікуванні того, що ваша
розмітка відображається належним чином у всіх браузерах, з різними версіями
CSS і JavaScript.


Проблема полягає в тому, що такий підхід обмежує розуміння
програмістом того, що насправді відбувається в браузері. Більш важливо те, що
він обмежує вашу здатність оновлювати, змінювати і реструктуризувати
Web-сторінку динамічно, використовуючи JavaScript на стороні клієнта. Позбудемося
цього обмеження і навіть підвищимо інтерактивність ваших Web-сайтів.


Що робить програміст

Як типовий Web-програміст, ви, можливо, запускаєте ваш текстовий редактор
і IDE і починаєте вводити HTML, CSS або навіть JavaScript. Легко думати про всі
цих тегах, селекторах і атрибутах тільки як про невеликі завданнях, які ви
вирішуєте для того, щоб сайт виглядав належним чином. Але ви повинні розширити
ваші уявлення за ці рамки – уявіть, що ви організуєте ваше
вміст. Не турбуйтеся, я обіцяю, що не перетворю це в лекцію про красу
розмітки або про те, що ви повинні зрозуміти справжній потенціал вашої Web-сторінки
або що-небудь ще метафізичне. Що ви дійсно повинні розуміти точно –
це яка ваша роль в Web-розробці.


Коли справа стосується зовнішнього вигляду сторінки, ви, в кращому випадку, можете
тільки давати поради. Якщо ви надаєте таблицю стилів CSS, користувач
може перевизначити ваші варіанти стилю. Коли ви надаєте розмір шрифту,
браузер користувача може змінити ці розміри для людей з проблемами зору
або масштабувати їх для великих моніторів (з однаково великими дозволами).
Навіть вибрані вами кольори і гарнітури шрифтів залежать від монітора користувача і
від встановлених на його системі шрифтів. Звичайно, здорово зробити зі сторінки
шедевр, але на все це ви маєте не саме великий вплив.


Єдине, що знаходиться під вашим абсолютним контролем – структура
Web-сторінки. Ваша розмітка є незмінною, і користувачі не можуть
зіпсувати її; їх браузери можуть тільки витягти її з вашого Web-сервера і
відобразити (хоча й у стилі, більше відповідному смаку користувача, а не
вашому). Але організація цієї сторінки (чи знаходиться слово у цьому параграфі,
або в іншому теге div) Повністю залежить від вас. Коли справа
стосується дійсного зміни вашої сторінки (що й роблять більшість
Ajax-додатків), ви працюєте зі структурою сторінки. Хоча цікаво змінити
колір фрагмента тексту, набагато більш вражаючим є додавання тексту або
цілої секції на існуючу статтю. Не важливо, як користувач змінює стиль
цій секції – ви працюєте з організацією самого сторінки.


Що робить розмітка

Як тільки ви усвідомлюєте, що ваша розмітка, насправді, тільки структура
сторінки, то зможете поглянути на неї по-іншому. Замість того, щоб вважати,
що тег h1 робить текст великим, жирним і чорним, думайте про нього,
як про заголовку. Як його бачить користувач (чи використовує він ваш CSS, свій
власний або комбінацію обох) – це другорядне питання. Тобто,
уявляйте розмітку як засіб забезпечення даного рівня структури;
p вказує, що текст знаходиться у параграфі, img
відзначає зображення, div розділяє сторінку на секції і т.д.


Ви повинні також чітко розуміти, що стиль і поведінку (обробники подій і
JavaScript) застосовуються до цієї структури після її створення. Розмітка
вже має бути перед тим, як з нею можна працювати і накладати стиль.
Тобто, так само як ви можете зберігати CSS в окремому файлі від вашого HTML,
структура вашої розмітки відокремлена від її стилю, форматування і поведінки. Хоча
ви безумовно можете змінювати стиль елемента або фрагмент тексту з JavaScript,
більш цікавим є дійсне зміна структури, на якій
заснована ваша розмітка.


Як тільки ви будете пам'ятати, що ваша розмітка забезпечує тільки структуру
або "скелет" для вашої сторінки, ви будете "на коні". І більше того, ви побачите,
як браузер бере цю текстову структуру і перетворює її у щось набагато
більш цікаве – набір об'єктів, кожен з яких може змінюватися,
додаватися або видалятися.





Ресурси

Навчитися


  • Оригінал статті "Mastering
    Ajax, Part 4: Exploiting DOM for Web response”.

  • Попередні статті цієї серії developerWorks, що знайомлять з Ajax:

    • "Введення в
      Ajax: Освоєння Ajax, ефективний підхід до створення Web-сайтів і як ця
      технологія працює "Частина 1: демонструє, як компоненти технології Ajax
      працюють спільно, і розкриває центральні концепції Ajax, включаючи об'єкт
      XMLHttpRequest (грудень 2005).
    • "Виконання
      асинхронних запитів з JavaScript і Ajax: Використання XMLHttpRequest для
      Web-запитів "Частина 2: показує, як створити екземпляри XMLHttpRequest
      способом, підходящим для різних браузерів, складати і передавати запити,
      отримувати відповіді від сервера (січень 2006).
    • "Вдосконалені
      запити та відповіді в Ajax "Частина 3: демонструє, як стандартні Web-форми
      працюють з Ajax, і розповідає про коди стану HTTP, станах готовності і
      об'єкті XMLHttpRequest (лютий 2006).

  • Домашня сторінка DOM на World Wide Web
    Consortium: Завітайте відправний пункт для всього, що стосується DOM.

  • DOM Level
    3 Core Specification: Визначення основ Document Object Model, від доступних
    типів і властивостей до використання DOM в різних мовах
    програмування.

  • "Правила
    з'єднання мови ECMAScript з DOM ": Якщо ви є
    JavaScript-програмістом і хочете використовувати DOM, це додаток до "Level 3
    Document Object Model Core definitions "вас зацікавить.

  • "Ajax для
    Java-розробників: Створення динамічних Java-додатків ", Philip McCarthy
    (DeveloperWorks, вересень 2005): Погляньте на Ajax з боку сервера та мови
    Java, познайомтеся з принципово новим підходом до створення динамічних
    Web-додатків.

  • "Ajax для
    Java-розробників: Серіалізация Java-об'єктів для Ajax ", Philip McCarthy
    (DeveloperWorks, жовтень 2005): Дізнайтеся про п'ять підходах до серіалізациі
    Java-об'єктів, про передачу об'єктів по мережі і взаємодії з Ajax.

  • "Виклик
    SOAP Web-служб за допомогою AJAX, Частина 1: Створення клієнта Web-служб "
    (DeveloperWorks, жовтень 2005) – досить просунута стаття з інтеграції Ajax
    з існуючими web-службами, заснованими на SOAP. Дізнайтеся, як реалізувати
    заснованих на Web-браузері клієнтів SOAP Web-служб, використовуючи шаблон
    проектування Ajax.

  • “Ajax:
    Новий підхід до Web-додатків "- стаття, яка створила поняття Ajax,
    обов'язкова для читання всіма Ajax-розробниками.

  • Коди
    стану HTTP: Огляд повного переліку кодів стану з W3C.

  • Head Rush
    Ajax
    ", Елізабет Фрімен, Ерік Фрімен і Брет МакЛафлін (O" Reilly Media,
    Inc., Березень 2006): Завантажує ідеї з цієї статті у вашу голову в стилі "Вперед
    головою ".

  • Java і XML“,
    друга редакція, Брет Маклафлін (Серпень 2001, O "Reilly Media, Inc.): Обговорення
    автором перетворень XHTML і XML.

  • JavaScript:
    Повне керівництво
    ", Девід Фленаган (Листопад 2001, O" Reilly Media, Inc.):
    Вичерпні інструкції по роботі з JavaScript, динамічними Web-сторінками, а
    в підготовлюваному виданні додані дві голови з Ajax.

  • Вперед
    головою в HTML з CSS & XHTML
    ", Елізабет і Ерік Фрімен (Грудень
    2005, O "Reilly Media, Inc.): Досконально джерело інформації для вивчення
    XHTML, CSS і їх об'єднання.

  • Зона Web Architecture на
    developerWorks: Удоскональте ваші навички в Web-будівництві.

  • Технічні
    події і Web-трансляції на developerWorks: Слідкуйте за брифінгами для
    технічних розробників.


Отримати продукти і
технології

  • Пробне
    програмне забезпечення IBM: Створіть ваш наступний проект з програмним
    забезпеченням, доступним для завантаження безпосередньо з
    developerWorks.


Обговорити

  • Блоги developerWorks:
    Приєднуйтесь до спільноти developerWorks.

Про автора










Брет Маклафлін працює з комп'ютерами з часів Logo (пам'ятаєте маленький
трикутник?). За останні кілька років він став одним з найбільш відомих
авторів і програмістів співтовариства за технологіями Java і XML. Він працював у
Nextel Communications над реалізацією складних корпоративних систем, в Lutris
Technologies, фактично, над створенням сервера додатків, а з недавнього
часу – в O "Reilly Media, Inc., де продовжує писати і редагувати книги з
даної тематики. Його готується книга "Head
Rush Ajax
"Розглядає інноваційний підхід" Вперед головою "до вивчення Ajax; вона
пишеться спільно з відомими співавторами Еріком та Бет Фрімен. Його недавня
книга "Java
5.0 Tiger: Нотатки розробника
"Є першою доступною книгою по
новітньої технології Java, а його класична "Java
і XML
"Залишається однією з найбільш авторитетних робіт з використання
технологій XML у мові програмування Java.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*