AJAX. Так що ж це?

  1. властивості
  2. МЕТОДИ:
  3. Список корисної літератури:

зміна фонаДрайвера

Наше життя непостійна. Все в цьому світі еволюціонує і змінюється. У тому числі і віртуальна реальність. І одне з слів, з яким пов'язані ці зміни, - це AJAX. Про AJAX вже чули не тільки веб-програмісти, а й рядові користувачі. Що реально криється за цією магічною абревіатурою? Як це використовувати на своєму сайті? На ці питання я і спробую відповісти в даній статті.

Вперше про AJAX я почув навесні цього року. Відразу зацікавився цією технологією, і, як і належить в таких випадках, відправився в пошук за статтями, які змогли б відповісти на виниклі у мене питання: "Що це таке? Як це працює? І в чому переваги? Що потрібно додатково встановити на сервер / клієнт для роботи з AJAX? Як це можна використовувати на своєму сайті? ". Прочитавши з десяток статей, я отримав відповідь лише на перші два питання, але на інші відповіді так ніде не знайшов. І лише після прочитання кількох публікацій англійською мовою я остаточно зрозумів, що до чого. Це і спонукало мене до написання даного матеріалу.

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

Під час викладу під терміном "браузер" ми будемо розуміти браузери: Internet Explorer 5.0, Safari 1.3 і 2.0 +, Netscape 7 +, Opera 8.5+, Mozilla Firefox (плюс означає дану версію і більш нові). Якщо мова стане заходити про інші версії, про це буде згадуватися окремо. "Що це таке? Як це працює і в чому переваги?"

Для того щоб розуміти, які переваги дає AJAX, потрібно знати, як працюють веб-додатки в даний час. А працюють вони по клієнт-серверної технології (рис. 1). Для того щоб розуміти, які переваги дає AJAX, потрібно знати, як працюють веб-додатки в даний час

Робота веб-програми по клієнт-серверної технології

Користувач в браузері відкриває будь-яку сторінку page. На сторінці є посилання, які ведуть на інші сторінки. При натисканні на будь-яку з них браузер посилає запит URL на сервер, з яким пов'язана ця посилання. Якщо в природі не існує сервера, пов'язаного з цією посиланням (наприклад, коли, набираючи URL в адресному рядку, ви помилилися при написанні імені ресурсу), або є проблеми зв'язку з інтернетом, то браузер згенерує сторінку, подібну показаної на зображенні (так вона виглядає в Operа-е): Користувач в браузері відкриває будь-яку сторінку page

У разі існування сервера, але відсутності на ньому документа, зазначеного в запиті сервер сам створить HTML сторінку з описом помилки. Наприклад, це може бути всім відома 404-ая помилка (документ не знайдене). Або, якщо все вірно, у відповідь сервер віддасть нову сторінку. У будь-якому випадку, в браузер буде завантажена нова сторінка new_page, навіть якщо в порівнянні зі старою на ній змінилася лише пара слів. Досить істотний мінус даної технології. Крім того, робота ведеться в синхронному режимі. Тобто після того як браузер відіслав на сервер запит він очікує від нього відповідь, і поки відповіді не отримано нічого робити не буде. А часом відповідь, і завантаження нової сторінки може тривати занадто довго. Настільки довго, що користувач може не дочекатися завантаження сторінки і просто закрити її. Тому веб-программмісти вдаються до деяких хитрощів.

Наприклад, використовуючи DOM методи мови JavaScript [ 1 ], Можна динамічно змінювати фоновий малюнок блоку без перезавантаження сторінки. Це забезпечує необхідну інтерактивність. При наведенні курсора миші на елемент таблиці вихідна фонова картинка pic_1.gif замінюється pic_2.gif. При догляді курсора з осередку відбувається зворотний процес.

Або такий приклад. У файл із зображенням у форматі JPEG можна записати (і прочитати) метадані EXIF. Багато інтернет фоторесурс дозволяють для відображається фотографії показати і ці дані. Але вони з'являються тільки після натиснення відповідної кнопки на екрані. При цьому оновлення сторінки не відбувається. Робиться це дуже просто. EXIF дані знаходяться на сторінці, але розташовані в прихованому блоці за допомогою CSS (display: none). При натисканні на кнопку блок стає видимим (display: block). Мінуси очевидні: разом зі сторінкою передаються дані, які, можливо, не будуть використані; відобразити можна лише ті дані, які були надіслані разом зі сторінкою.

Колись клієнт-серверна технологія сприяла розвитку мережі. Але як це нерідко буває те, що рухало прогрес в певний період історії, трохи пізніше починає цей прогрес гальмувати. В даному випадку ставало очевидним, що клієнт-серверна технологія в чистому вигляді не може задовольнити всім вимогам, які пред'являються до деяких веб-додатків. Було потрібно якесь нове рішення. І воно з'явилося у вигляді AJAX підходу до написання веб-додатків.

Широке поширення цього поняття почалося з публікації в англомовній частині інтернету статті Джессі Джеймса Гарретта "Новий підхід до веб-додатків" в лютому 2005 року [ 2 ]. Стаття писалася проектувальником і для проектувальників. Але до статті ознайомилося багато людей, в тому числі і програмісти. Які і поспішили закидати автора електронними посланнями з питаннями про технічні деталі реалізації даного підходу. Листів, мабуть, було настільки багато, що вже в грудні того ж року Гаррету в передмові одній з книг по AJAX довелося дати пояснення, що він не є програмістом, і з конкретної реалізації AJAX-додатків немає нього ( "The truth is, I've never built an Ajax application. Sure, I've worked on Ajax projects. ... ").

Так у чому ключова відмінність AJAX технології від класичної клієнт-серверної? Це наявність AJAX-движка, що складається з двох частин: клієнт-додаток (написаний на мові JavaScript) і сервер-додаток (написане на будь-якому серверній мові). Також трохи іншою логікою спілкування програми-клієнта з сервером (рис. 2). Так у чому ключова відмінність AJAX технології від класичної клієнт-серверної

Робота веб-програми за технологією AJAX

Тепер при активації будь-якого елементу управління інтерфейсу браузер не робить запит нової сторінки з сервера, а запускає клієнтську частину. А вже додаток-клієнт, в свою чергу, звертається до сервера через запит requst і вимагати лише ті дані, які повинні змінитися на сторінці. Після отримання даних data від програми-сервера клієнт-додаток виробляє оновлення сторінки через DOM методи без перевантаження всієї сторінки в цілому. При цьому можлива робота в асинхронному режимі. Тобто коли користувач не чекає отримання відповіді з сервера і перевантаження сторінки, а триває працювати зі сторінкою page, як ні в чому не бувало.

Великий плюс даного підходу в тому, що він не виключає роботу по клієнт-серверної схемою. Тобто на одній і тій же сторінці частина елементів управління може реалізовувати клієнт-серверну технологію, а частина - технологію AJAX.

Тут мені хочеться зробити невеликий ліричний відступ. Чимало статей, в яких йдеться про те, що AJAX це не технологія, це підхід до написання програми, ідея. В принципі, вірно, все, що нас оточує і є ідеї, але особисто я наполягаю на терміні "технологія AJAX" для підкреслення того факту, що це ще одна технологія взаємодії клієнтського і серверного додатків (поряд з клієнт-і файл-серверними технологіями) . "Що потрібно додатково встановити на сервер / клієнт для роботи з AJAX?"

Все вищевикладене було чисто теоретичними міркуваннями розробника, які і написав Гарретт. Настав час перейти до практичного розгляду того, на чому грунтується AJAX і що конкретно потрібно використовувати для написання AJAX-додатків.

AJAX розшифровується як Asynchronous JavaScript + XML (асинхронний JavaScript + XML) і вже це вказує, на що спирається технологія. А спирається практично на все те ж саме, що і інші веб-додатки:

  • HTML / XHTML [ 3 ] / [ 4 ] Для написання розмітки сторінки;
  • CSS [ 5 ] Для візуального оформлення сторінки;
  • DOM [ 1 ] Для динамічної зміни сторінки у відповідь на дії користувача;
  • XML [ 6 , 7 ] Для обміну даними між клієнтською і серверними частинами;
  • JavaScript [ 8 ] Власне для написання AJAX движка, для забезпечення інтерактивності;
  • XMLHttpRequest об'єкт [ 9 ] Для здійснення запитів до сервера.

Коли я вирішив попрацювати з AJAX-додатком, то подумав, що для підтримки потрібно щось поставити на сервер. Якоїсь модуль, може, у вигляді dll. Але як потім зрозумів, нічого нікуди встановлювати не потрібно. Потрібно лише коректно написати движок і все. Виникає питання, а що за AJAX-движки поширюються в мережі? Відповідь проста: це вже готові програми, які призначені для будь-яких завдань, і які в готовому вигляді можна використовувати на своєму сайті. Наприклад, існує бібліотека для PHP, яка називається xAjax. Вона включає в себе як клієнтський скрипт, написаний на JavaScript, так і серверний скрипт, з яким JavaScript взаємодіє. Пам'ятайте про це! У мене був випадок, коли людина думала, що AJAX-додаток це тільки JavaScript, що використовує XMLHttpRequest об'єкт, і все. Але це далеко не все. Є ще скрипт на стороні сервера, логіку роботи якого також доведеться проектувати, а потім писати код.

Розглядати готові бібліотеки я не буду. У документації, що йде з ними, все розписано досить докладно. Залишається лише, використовуючи їх API, підключити їх до свого сайту. Наша мета ознайомиться з начинкою таких додатків. Ці знання допоможуть, як самому написати Ajax-додаток, так і розібратися в уже готовому рішенні.

Основа будь-якого AJAX-додатки - це XMLHttpRequest об'єкт, з його розгляду і почнемо.

У даного об'єкта чимало властивостей і методів [ 10 ], Але не всі з них підтримуються провідними браузерам. Повна підтримка є тільки в FireFox-е. Тому наводжу тільки те, що буде працювати в сучасних браузерах [ 9 ].

властивості

readonly onreadystatechange function

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

readonly readyState integer

Стан запиту. Може приймати значення:

  • 0 - не неініціалізованих (uninitialized), метод open () ще не був викликаний;
  • 1 - завантажується (loading), метод send () ще не викликаний;
  • 2 - завантажений (loaded), метод send () був викликаний і відповідні заголовки / статус (властивість status) отримані;
  • 3 - інтерактивний (interactive), йде прийом даних, які доступні через властивість responseText;
  • 4 - завершений (completed), у відповідь на запит отримано не тільки все заголовки і статус, а й прийняті всі дані від сервера, відповідь завершено.

readonly responseText string

Відповідь сервера у вигляді звичайного тексту. Тільки читання.

readonly responseXML object

Відповідь сервера у вигляді об'єкта DOM Document. Використовується, якщо відповідь сервера є коректним XML документом. Якщо документ не коректний, дані не отримані або ще не вставлені, то властивість одно NULL. Тільки читання.

readonly status string

Статус відповіді. Наприклад: 200 (ОК), 404 (документ не знайдене), 503 (тимчасове перевантаження сервера).

МЕТОДИ:

void abort ()

Перериває HTTP запит або отримання даних. Очищає всі властивості об'єкта, яким присвоюються початкові значення. Метод корисний в зв'язці з таймером, коли після певного часу з моменту запиту (вильоті в тайм-аут) відповідь від сервера так і не було отримано.

string getAllResponseHeaders ()

Повертає всі заголовки відповіді сервера у вигляді відформатованої рядки. Кожен новий заголовок починається з нового рядка.

string getResponseHeader (string header)

Повернути заголовок з ім'ям header.

void open (string method, string uri, [boolean asynch])

Готує запит за адресою uri методом method (POST або GET) із зазначенням режиму asynch, асинхронний режим чи ні. В результаті виклику властивість readyState ставати рівним 1.

void send (string data)

Ініціює запит до сервера. У запиті передаються дані data.

void setHeader (string header, string value)

Присвоює заголовку з ім'ям header, значення value. Перед початком використання цього методу не забудьте викликати open ()! "Як це можна використовувати на своєму сайті?"

Тепер, коли у нас є не тільки необхідні теоретичні знання, а й уявлення про те, на що практично спирається AJAX, можна приступати до написання свого застосування. Далі я привожу один приклад від моменту формулювання завдання до повної їй реалізації, у вигляді додатку, пояснюючи деякі тонкощі по ходу викладу.

Отже, у нас завдання: потрібно реалізувати базу даних (БД) драйверів для різних пристроїв. При цьому БД настільки велика, що немає сенсу пересилати її додатку-клієнта і робити вибірку з неї за допомогою JavaScript. Через зміни одного значення на сторінці перевантажувати її теж небажано. Особисто я для реалізації даного завдання застосовую для серверних скриптів PHP, а реалізації БД застосовую XML файл.

Структуру БД вибираю наступну:

Лістинг БД файл data.xml: ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR (128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR (256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR ( 128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 La ser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Як в цій БД людина веде пошук? Швидше за все, він від кореневого елемента йшов би по дереву документа до тих поки в потрібної галузі не знайшов посилання або переконався, що драйвера для даного пристрою немає в базі. Також зробимо і ми, використовуючи для знаходження потрібного вузла або набору вузлів вираження мови XPath [ 11 ].

Лістинг форми для відправки даних index.htm:

відео картазвуковая картапрінтерсканер

У формі є дві змінні: path і flag. У першій зберігається запитуваний шлях, який відправляється на сервер. Так як один елемент у формі вже є, то у цієї змінної вже є початкове значення. Друга змінна служить для того, щоб вказати серверному скрипту, що з документа потрібно витягти певний елемент Device. Крім того, формат повертаються даних з сервера зміниться.

Тепер розглянемо JS-движок. Всі функції клієнтської частини зібрані в скрипті ajax.js: y = new Object (); function httpRequest () {if (window.XMLHttpRequest) {// створення об'єкта для всіх браузерів крім IE requestObj = new XMLHttpRequest (); } Else if (window.ActiveXObject) {// для IE requestObj = new ActiveXObject ( "Msxml2.XMLHTTP"); if (! requestObj) {requestObj = new ActiveXObject ( "Microsoft.XMLHTTP"); }; }; }; function sendRequest (url, data) {httpRequest (); // визначаємо call-back функцію requestObj.onreadystatechange = responseServer; // підготовка відправки даних, readyState = 1 requestObj.open ( 'POST', url, true); / * Оскільки дані відправляються POST методом, то необхідно сервера відіслати заголовок інформує його про це * / requestObj.setRequestHeader ( "Content-Type", "application / x-www-form-urlencoded; charset = UTF-8"); // відправка даних на сервер requestObj.send (data); }; function responseServer () {if (requestObj.readyState == 4) {var status = requestObj.status; if (status == 200) {addSelect (y); } Else if (status == 400) {alert ( 'Неправильний запит'); } Else if (status == 500) {alert ( 'Внутрішня помилка на сервері'); } Else if (status == 503) {var time = requestObj.getResponseHeader ( 'Retry-After') * 1000; alert ( 'Сервер перевантажений. Запит буде повторений через:' + time + 'секунд'); setTimeout (sendRequest (url, path), time); } Else {alert ( 'Помилковий відповідь сервера'); }; }; }; function sendData (obj) {var Elpath = document.form.path; var url = 'index.php'; if (document.form.flag.value == '0') {var path = Elpath.value + '/' + obj.value; } Else {var path = Elpath.value + '/ Device [ "' + obj.value + '"]'; / * Методом GET відправляємо серверному скрипту інформація про те що необхідний конкретний елемент Device * / url = 'index.php? Flag = 1'; }; // присвоюємо змінної форми path значення поточного запиту Elpath.value = path; // кодируем передану рядок path path = 'path =' + encodeURIComponent (path); y = obj; sendRequest (url, path); }; function addSelect (obj) {// відповідь сервера у вигляді звичайного тексту var docTEXT = requestObj.responseText; obj.setAttribute ( 'disabled', true); // створюємо елемент div var div = document.createElement ( 'div'); // додаємо відповідь сервера в div div.innerHTML = docTEXT; // додаємо div з відповіддю сервера в дерево документа document.form.appendChild (div); }; function reset () {document.form.path.value = '// Devices'; document.form.flag.value = '0'; var NodeListDiv = document.form.getElementsByTagName ( 'div'); var length = NodeListDiv.length; if (length> 1) {while (NodeListDiv [1]! = undefined) {document.form.removeChild (NodeListDiv [1]); }; }; document.form.Devices.removeAttribute ( 'disabled'); };

Як я вже говорив, в функцію властивості onreadystatechange не можна передати параметри. Точніше не можна передавати параметри, які є об'єктами. Тому на самому початку створюємо змінну, в якій і будемо зберігати посилання на який викликав функцію об'єкт. Оскільки дана змінна знаходиться в глобальній зоні видимості змінних, то звернутися до неї можна буде з будь-якої частини програми. На даний момент це самий розумний спосіб передати параметри call-back функції властивості onreadystatechange об'єкта.

А тепер розберемо по кроках роботу движка.

При настанні події onblur (елемент select втратив фокус) викликається функція sendData (), яка і готує POST дані для оправлення запиту. Крім того, вона формує XPath вираз в залежності від значення змінної flag = 0 (наприклад, // Devices / VideoCards) або flag = 1 (наприклад, // Devices / VideoCards / AGP / Sapphire / Device [ "ATI 9600XT 256 DDR (128bit ) "]).

Далі віклікаємо функцію sendRequest (), в якові передаємо URL серверного скрипта, а такоже змінну типу рядок, в Якій містяться Готові POST-дані. І в Першу Черга створюємо XMLHttpRequest об'єкт, посилання на агентство Який зберігаємо в змінної requestObj. Функція httpRequest () є крос-браузерної, і буде працювати у всіх браузерах.

Колись звернення до функції httpRequest () я робив відразу при завантаженні сторінки через і більше не створював XMLHttpRequest об'єкт. Але як виявилося, це працює для всіх браузерів крім IE, який кожного разу вимагає створювати новий об'єкт. Тому виклик даної функції робиться кожен раз перед відправкою даних.

Після відправки даних браузер чекає відповіді з сервера. При кожній зміні властивості readyState буде викликатися функція responseServer (). Якщо статус відповіді прийшов з кодом "200" (все нормально), то буде викликана функція addSelect (), яка і додасть отриманий дані в DOM поточного документа. Всі браузери будуть чекати відповіді від сервера. Однак через деякий час (time-out) примусово призначать XMLHttpRequest.readyState = 4 і перестануть чекати відповіді з сервера. Наприклад, для Opera значення тайм-ауту становить 10 секунд. Використовуючи інші статуси, можна додати в движок обробник помилок у відповідях сервера.

Функція addSelect () додає в DOM поточного документа ще один вузол DIV, в який і поміщає відповідь з сервера. Може виникнути питання, чому використовується властивість responseText, а не responseXML? У кого-то обов'язково виникне бажання, використовуючи цю властивість, імпортувати відповідь сервера (а серверний скрипт у відповідь надсилає XML документ) прямо в DOM документа. Виникло таке бажання і у мене. Я хотів імпортувати кореневий елемент надісланого XML файлу і всі його нащадки методом importNode. Але браузер імпортував елемент без нащадків, навіть незважаючи на те, що другий параметр даного методу був встановлений в true: importNode (Object importedNode, true). Тому не точна реалізація цього методу поки виключає його використання.

Рівнозначне рішення було знайдено, використовуючи innerHTML метод елемента.

На цьому робота клієнтської частини закінчується. Залишилися нерозглянутими функція reset () покликана повернути DOM документа до початкового вигляду. Досягти того ж можна, відновивши сторінку по F5, але AJAX-движок якраз і пишеться для того, щоб уникнути перезавантаження сторінки. Тому всі елементи, додані в документ скриптом, повинні бути видалені з нього також скриптом.

У відповідь на запит серверний скрипт формує XML дані види: childrenElementName_1 .... childrenElementName_1

Якщо запитуваний вузол має ім'я Device, то повертається звичайний відформатований текст. Серверний скрипт написаний на PHP V5 і не буде працювати на більш ранніх версіях цього інтерпретатора, так як розширення для роботи з DOM було введено в цю мову тільки з п'ятої версії, і замінило собою розширення DOM XML, інтерфейс якого не відповідав специфікації. А тепер подивимося на код серверного скрипта.

Лістинг файлу index.php: load ( 'data.xml'); // створюємо об'єкт XPath $ DOMXPath = new DOMXPath ($ doc); $ DOMNodeList = $ DOMXPath -> query ($ _ POST [path]); // згідно із запитом витягаємо потрібний елемент $ DOMNode = $ DOMNodeList -> item (0); // створюємо об'єкт XML-документ $ replyXML = new DOMDocument ( '1.0', 'windows-1251'); / * Якщо flag НЕ дорівнює одиниці, означає поточний елемент не є елементом Device і необхідно знайти всі елементи-нащадки поточного елемента DOMNode * / if ($ _GET [flag]! = 1) {// отримуємо список все нащадків елемента $ childNodes = $ DOMNode -> childNodes; / * Оскільки нащадки можуть бути не тільки елементи, але і вузли, то створюємо індексний масив який містить тільки елементи-нащадки * / foreach ($ childNodes as $ Node) {if ($ Node-> nodeType == 1) {$ arrayNodes [ ] = $ Node; }; }; // створюємо кореневий елемент XML-документа $ root = $ replyXML-> createElement ( 'select'); $ Optgroup = $ replyXML-> createElement ( 'optgroup'); / * Якщо елементи-нащадки не є Device, то задаємо атрибути для кореневого елемента і його елемента-нащадка optgroup * / if ($ arrayNodes [0] -> nodeName! = 'Device') {$ root-> setAttribute ( 'name' , $ DOMNode-> nodeName); $ AttributeNode = $ arrayNodes [0] -> getAttributeNode ( 'title'); $ Optgroup-> setAttribute ( 'label', $ AttributeNode-> value); $ Root-> setAttribute ( 'onblur', 'sendData (this)'); } Else {/ * в іншому випадку створюємо атрибут з JS кодом який і привласнить змінною в формі flag значення '1' * / $ root-> setAttribute ( 'onblur', "document.form.flag.value = 1; sendData (this ); "); }; / * Цикл створює для кожного елемента-нащадка нові елементи option; скільки нащадків, стільки і елементів * / foreach ($ arrayNodes as $ Node) {$ option = $ replyXML-> createElement ( 'option'); $ SetNode = $ Node-> nodeName; if ($ Node-> nodeName == 'Device') {$ setNode = $ Node-> nodeValue; }; $ Option-> nodeValue = $ setNode; $ Option-> setAttribute ( 'value', $ setNode); $ Optgroup-> appendChild ($ option); }; // вставляємо в XML-документ отримані елементи $ replyXML-> appendChild ($ root); $ Root-> appendChild ($ optgroup); / * Якщо flag = 1, то значить поточний елемент є Device елементом; елементи-нащадки не потрібні, а потрібні атрибути поточного елемента * /} else {// створюємо кореневий елемент $ root = $ replyXML-> createElement ( 'pre'); $ DOMText = new DOMText ( "OS URL"); $ Root -> appendChild ($ DOMText); $ NamedNodeMapAttr = $ DOMNode-> attributes; $ I = 0; / * Цикл який знаходить все атрибути елемента Device і для кожного атрибута створює рядок з даними зміст посилання * / while (($ NodeAttr = $ NamedNodeMapAttr-> item ($ i))! = Null) {if ($ NodeAttr-> name! = 'id') {$ DOMText = new DOMText ( "$ NodeAttr-> name"); $ DOMElement = $ replyXML-> createElement ( 'a'); $ DOMElement -> setAttribute ( 'href', $ NodeAttr-> value); $ DOMElement -> nodeValue = $ NodeAttr-> value; $ Root -> appendChild ($ DOMText); $ Root -> appendChild ($ DOMElement); }; $ I ++; $ NodeAttr = $ NamedNodeMapAttr-> item ($ i); }; $ ReplyXML-> appendChild ($ root); }; // відсилаємо відповідь клієнту echo $ replyXML-> saveHTML (); ?>

Список корисної літератури:

  1. W3C. Document Object Model (DOM) .
  2. Jesse James Garrett. Ajax: A New Approach to Web Applications. ( переклад )
  3. W3C. HTML 4.01 Specification . ( переклад )
  4. W3C. XHTML 1.0 . ( переклад )
  5. W3C. CSS 2 Specification . ( переклад )
  6. W3C. Extensible Markup Language (XML) 1.0 (Third Edition) . ( переклад )
  7. Д. Лебедєв. XML: специфікація і функції DOM в PHP .
  8. Mozilla Developer Center. JavaScript 1.6 . ( Ядро JavaScript. Довідник. )
  9. W3C. The XMLHttpRequest Object .
  10. XULPlanet. nsIXMLHttpRequest .
  11. W3C. XML Path Language (XPath) Version 1.0 . ( переклад )

Що реально криється за цією магічною абревіатурою?
Як це використовувати на своєму сайті?
Відразу зацікавився цією технологією, і, як і належить в таких випадках, відправився в пошук за статтями, які змогли б відповісти на виниклі у мене питання: "Що це таке?
Як це працює?
І в чому переваги?
Що потрібно додатково встановити на сервер / клієнт для роботи з AJAX?
Як це можна використовувати на своєму сайті?
Що це таке?
Як це працює і в чому переваги?
Так у чому ключова відмінність AJAX технології від класичної клієнт-серверної?