Давно забутий AJAX

  1. Суть технології AJAX
  2. Витоки AJAX
  3. Сучасний стан AJAX
  4. Альтернативи AJAX
    • Повна відсутність AJAX
    • AJAX на старих дріжджах
  5. Область застосування AJAX
  6. Приклади застосування AJAX

Технологія AJAX (Асинхронний JavaScript + XML), що є однією з основних технологій, що лежить в основі, так званого, WEB 2.0, Була відомо ще, чи не, з часів кам'яного віку. Однак, завдяки появі терміна AJAX, Який ввів Джіс Джеймс Гаррет (Jesse James Garrett), вона стала надзвичайно модною. І якщо раніше, про неї могли говорити тільки найбільш просунуті програмісти, то тепер, завдяки появі спеціального терміна, сказати про неї може кожен, кому не лінь. Досить просто вимовити «AJAX», і ти вже про неї говориш.

Суть технології AJAX

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

Витоки AJAX

Перші прийоми динамічної подзагрузкі даних на WEB-сторінку з'явився в специфікації HTML 4.0 від 18 грудня 1997 року. У цій специфікації вперше було визначено:

Так само, був введений атрибут target для елементів, що створюють посилання (A, LINK), навігаційних карт (AREA) та форм (FORM).

У результаті цих революційних нововведень, стало можливим, не перезавантажуючи всю сторінку, міняти частина її вмісту. Наприклад, цілу сторінку можна було розділити на кілька фреймів і, вказавши в одному з них посилання, мета яких визначалася атрибутом target, міняти вміст іншого фрейму, не перезавантажуючи змісту (ця можливість застосовується на сайті webdesign.site3k.net). Аналогічно можна було вчинити з IFRAME і OBJECT, змінюючи їх вміст клацанням по посиланню (ця можливість застосовується на сайті bosportour.com – вміст гостьової книги укладено у власному IFRAME, окремо від змісту і загального оформлення). Завдяки JavaScript, стало можливим ще більше: Довільно змінювати SRC малюнків, таблиць стилів і скриптів, завантажуючи нові елементи у вже завантажену сторінку і, навіть, міняти зміст статичного тексту (ця можливість застосовується на сайті praktika.net – в сторінку вставляється вибраний відвідувачем малюнок і відповідно до нього змінюється підпис до малюнка; застосування динамічно завантажуваних скриптів вперше згадано мною в 2003 році на сторінці http://discoverer.h11.ru/webdesig/menus.html, тепер це webdesign.site3k.net/conjuncture/append/d/menus.html).

Так само, в 1997 році з'явилися Каскадні таблиці стилів (CSS), з їхнім атрибутом display, що дозволяє приховувати або відображати окремі частини сторінки, що, у взаємодії з JavaScript, могло миттєво частково або повністю змінювати її видиме вміст (застосовується в деревоподібному меню сайту webdesign.site3k.net).

Компанії Netscape цього здалося мало і в свій браузер, вони додали тег LAYER, вміст якої відображалася так само, як вміст тега DIV, але могло мати атрибут SRC і вантажиться з окремого файлу, завдяки чому, не перевантажуючи сторінку, можна було завантажити дані, прив'язані до заслання, навіть не в окремий фрейм або OBJECT, а прямо на один з елементів поточної сторінки – зовсім як це робиться зараз на AJAX.

Просто раніше нікому в голову не приходила придумати цьому особливу назву.

Остаточне формування всіх варіацій технології AJAX сталося 1998 року, коли в браузері Internet Explorer 5.0 з'явився нові об'єкти ActiveX – XMLHttpRequest, DTC, RDC та інші (використання TDC описано на стариці Обробка баз даних браузером відвідувача, для обробки прайсів і застосовано на cmk.net.ua – якщо ви використовуєте IE, вам вдасться його побачити). Однак саме XMLHttpRequest придбав найбільшу популярність і підтримку в інших браузерах.

XMLHttpRequest придбав популярність завдяки тому що, значно прискорював завантаження даних, дозволяючи включати у вже завантажену сторінку дані будь-якого типу. Його застосування дозволяло без особливих хитрувань вставляти в сторінку відповіді сервера і, таким чином, використовувати технологію AJAX змогли навіть люди, що не відрізняються особливими талантами (LAYER від Netscape дозволяв робити це з ще більшою легкістю, але, оскільки останній програв війну браузерів, перемогли саме стандарти Микрософт). Ця популярність змусила виробників інших браузерів включити підтримку XMLHttpRequest у свої продукти (Mozilla Firefox, починаючи з версії 1.0, Opera, починаючи з версії 8.0, Safari …) і застосування AJAX стало повсюдним. Незабаром з'явився і сам термін. Використання AJAX стало модним і про нього раптом всі заговорили. Сталося це на початку 2005 року і, таким чином, офіційне визнання технологія отримала через 8 років з моменту появи.

Сучасний стан AJAX

Оскільки AJAX – це по суті, тільки різноманітне застосування компонента XMLHttpRequest, то щоб зрозуміти роботу AJAX, потрібно розібратися з синтаксисом XMLHttpRequest. Зробимо це на прикладі:

<script type="text/javascript" language="JavaScript">
function doLoad() {
    req=false;
try {/ / визначити метод підтримки
        req=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
req = new ActiveXObject ("Microsoft.XMLHTTP"); / / спрацює в Internet Explorer
        } catch (e) {
if (window.XMLHttpRequest) {/ / спрацює в Mozilla і Safari
               req=new XMLHttpRequest();
            }
        }
    }
if (req) {/ / якщо якийсь із варіантів підтримується
req.onreadystatechange = readystate; / / призначимо обробник події об'єкта
req.open ("GET", document.getElementById ("edit1"). value, true); / / задати параметри методу open
req.send (null); / / відправити запит
    }
}
function readystate() {
if (req.readyState == 4) {/ / якщо запит завершено
if (req.status == 200) {/ / якщо він завершений без помилок
document.getElementById ("content"). innerHTML = "<pre>" + req.responseText + "</ pre>";
        } else {
alert ("Сталася помилка" + req.status + ":
" + req.statusText);
        }
    }
}
</script>
<input type="TEXT" size="50" id="edit1">
<input type="button" value="Через ActiveX" onclick="doLoad()">
<div id=content style="white-space:pre"></div>

І так:

Умова window.XMLHttpRequest визначає, яким чином працює об'єкт у даному браузері (можна додати перевірку, чи працює він взагалі і якщо window.ActiveXObject так само дає помилковий результат, даний метод взагалі не підтримується браузером). Потім створюється об'єкт одного з підтримуваних типів, після чого події onreadystatechange (зміна стану) призначається обробник. Так само, призначаються параметри методу open. Перший з них визначає тип запиту: POST або GET, другий визначає адресу (у даному випадку адреса береться з значення текстового поля), третій, якщо істинний, визначає що, запит повинен виконуватись асинхронно, тобто, відправивши запит не чекати відповіді сервера, а продовжувати роботу, очікуючи відповіді у фоновому режимі.

Після всього цього методом send відбувається фактична відправка запиту і, як тільки від сервера приходить відповідь, спрацьовує обробник події onreadystatechange.

При обробці події onreadystatechange потрібно перевірити код стану об'єкта (властивість readyState). Визначено 4 стану:

0 – об'єкт не инициализирован

1 – йде завантаження

2 – об'єкт вже завантажений

3 – Завантажено частково

4 – завершення завантаження

Як тільки код стає дорівнює 4, дані сервера можна використовувати і виводити в браузер. Однак, не завадило б перевірити, що саме витягли наші мережі, використовуючи код відповіді сервера, що зберігається в req.status. Якщо код дорівнює 200 (див. коди помилок ВЕБ сервера), дані дійсно можна виводити, інакше, можна вивести повідомлення про помилку, що зберігається у властивості req.statusText. Замість стандартного тексту помилки, можна вивести свій, що зручно зробити, створивши масив визначень, ключі якого будуть відповідати номерам помилок:

err [400] = "Запит містить синтаксичну помилку";

err [401] = "Для доступу необхідно ввійти в";

err [403] = "Доступ заборонено";

і т. д.

Все досить просто (хоча міняти src для IFRAME ще простіше). Однак цим методом можна звертатися тільки до ресурсів того ж сайту, з якого закачана запитуюча сторінка. Щоб звернутися до інших інтернет-ресурсів, доведеться використовувати серверний скрипт, на зразок такого:

<?php
if (! @readfile ($_GET["file"])){
echo "<font color=red> Файл не доступний </ font>";
}
?>

І тут задумаєшся: А може послати цей AJAX до дідька і використовувати більш простий і всеїдний IFRAME? Але IFRAME не можна використовувати безпосередньо всередині форм. У цьому випадку, застосування AJAX виявиться цілком розумним, і буде виглядати приблизно так:

<script type="text/javascript" language="JavaScript">
function doLoad2 () {
    req=false;
try {/ / визначити метод підтримки
        req=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
req = new ActiveXObject ("Microsoft.XMLHTTP"); / / спрацює в Internet Explorer
        } catch (e) {
if (window.XMLHttpRequest) {/ / спрацює в Mozilla і Safari
               req=new XMLHttpRequest();
            }
        }
    }
if (req) {/ / якщо якийсь із варіантів підтримується
req.onreadystatechange = readystate; / / призначимо обробник події об'єкта
req.open ("GET", "myscript.php? file =" + document.getElementById ("edit2"). value, true); / / myscript.php - це наведений вище серверний скрипт
       req.send(null);
    }
}
function readystate() {
if (req.readyState == 4) {/ / якщо запит завершено
if (req.status == 200) {/ / якщо він завершений без помилок
document.getElementById ("content"). innerHTML = "<pre>" + req.responseText + "</ pre>";
        } else {
alert ("Сталася помилка" + req.status + ":
" + req.statusText);
        }
    }
}
</script>

<input type="TEXT" size="50" id="edit2">
<input type="button" value="Через ActiveX і серверний скріпт" onclick="doLoad2()">
<div id=content style="white-space:pre"></div>

Але це не вирішує всіх проблем. Тому що:

  1. При використанні AJAX не спрацьовує навігація по посиланнях: заповнюючи багатосторінкову форму стандартного зразка, ви можете виявити помилку, допущену на попередній сторінці, і повернуться назад. Якщо в формі використовується AJAX ніякої «Назад» не спрацює. Аналогічна невдача спіткає, якщо на AJAX побудована вся навігація сайту.
  2. Пошукові роботи не інтерпретують JavaScript і не будуть ходити по AJAX посиланнях.
  3. AJAX підтримується тільки новими браузерами, у зв'язку з чим, його шанувальники вимагають щоб «Юзери міняли брузери». Але, це ж нахабство. Я, звичайно, розумію що, немає сенсу домагатися повної сумісності з браузерами 10 річної давності, але втрачати частину відвідувачів лише через те, що вам хочеться застосувати AJAX? Нерозумно. Для кого ви робите сайт? Якщо для себе, те добре. Якщо для відвідувачів, то постарайтеся зробити так, щоб максимально більшу їх кількість змогло їм користуватися.

Однак найважливіша проблема AJAX полягає в тому що, зберігаючи локальну копію завантаженого документа, відвідувач сторінки, насправді, нічого не зберігає! Звичайно, якщо ви хочете змусити його відвідувати сайт знову і знову, вам це має дуже сподобається, але якщо ви хочете допомогти відвідувачу, ви повинні засвоїти одну, банальну вещ: AJAX не призначений для завантаження контента! Завантажений матеріал є тимчасовим і існує тільки до закриття браузера, так як він не записується в текст сторінки, а тільки зберігається оперативної в пам'яті. Присвячений в ці речі відвідувач виділить текст і скопіює в файл, але не втаємничена, ніколи не зрозуміє, чому, відвідуючи сторінку на сайті, він бачить одне, а відкриваючи її локальну копію – інше.

Альтернативи AJAX

Повна відсутність AJAX

Першою альтернативою є старий добрий серверний скрипт. Код, що використовує серверний скрипт, може виглядати так:

<form action="myscript.php">
<input type="TEXT" size="50" name=file>
<input type="submit" value="Только через серверний скріпт">
</form>

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

Але це класичний варіант: результат видається на іншій сторінці, яку доведеться завантажити повністю. Ніякого AJAX.

Щоб наблизити це до AJAX, можна помістити мінливу частина сторінки (з формою або без), в IFRAME (наприклад, як зробив я на сторінці http://kazantip.net.ua/zajavka.html). Але можна піти ще далі:

AJAX на старих дріжджах

Як говорилося на початку статті, технології AJAX, насправді, просто давно забули і для цієї «технічної революції» ніякої XMLHttpRequest або ActiveXObject не потрібні. А значить, наведений нижче код буде працювати У БУДЬ-браузері:

 <form id=frm action="myscript.php" onsubmit="this.setAttribute("target","myframe");">
<input type="TEXT" size="50" name=file>
<input type="submit" value="Через серверний скрипт в дусі AJAX">
</form>
<Iframe onLoad = "window.document.getElementById (" content "). InnerHTML = myframe.document.body.innerHTML;" frameborder = "0" width = "0" height = "0" name = "myframe" id = " myframe "> </ iframe>
<div id=content style="white-space:pre"></div>

Якщо в браузері не працює JavaScript, подія onsubmit не буде оброблено і атрибут target не будуть перепризначений. У цьому, а так само, в тому випадку, якщо браузер не підтримує iframe, дані завантажаться в нову сторінку, як при звичайному використанні серверного скрипта. Однак, якщо ми маємо нормальний браузер, що підтримує HTML 4.0, після натискання кнопки submit, на сервер відправиться запит. Коли ж від туди повернеться відповідь, спрацює подія onLoad в iframe і прийшов текст відобразиться у div id = content, як і при використанні AJAX. І, що найголовніше, якщо відвідувач збереже сторінку, отриманий їм текст нікуди не зникне, тому що, разом з нею збережеться і текст iframe. При відкритті збереженої сторінки, цей текст відразу завантажитися і відобразиться.

Залишилося тільки придумати цьому назва, наприклад, JAI (JavaScript and iframe) і гордо сурмити про винахід нової, більш досконалої технології.

Область застосування AJAX

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

Наприклад, реєструєш сайт у Апорті. З'являється 1 сторінка – вводиш основні дані. Натискаєш «Далі». З'являється друга сторінка, вибираєш країну з великого списку, натискаєш «Далі». На наступній сторінці, відповідно до обраної перед цим країною, пропонується список міст цієї країни. Вибираєш, натискаєш «Далі» …

Було б добре, якби все було на одній сторінці. Але розмір сторінки, яка містить назви всіх країн і всіх міст цих країн був би неймовірно величезний. Ось Апорт і ділить на етапи, на кожному показую лише ту частину, яка відповідає раніше обраних параметрах (не всі міста світу, а тільки потрібної країни). Але можна ж зробити так: На сторінці список країн, при виборі країни, відбувається запит на сервер і той, на цю ж сторінку передає список міст цієї країни. Далі, вибираєш місто і, зробивши всі установки на 1 сторінці, завершуєш реєстрацію.

У такій ситуації AJAX значно прискорить процес. Ось тільки який AJAX? З використанням ActiveXObject або JavaScript + iframe? Виходячи з того що, всі, хто розуміє недоліки AJAX, намагаються звести їх до мінімуму, додаючи до нього ще й iframe, рекомендую відразу переходити до iframe і не намагатися догодити моді.

Приклади застосування AJAX

Для прикладу, наведу прайс, про який йдеться на сторінці Обробка баз даних сервером, тільки тепер, в дусі AJAX.

Ціні до …($)
Площі від … (М2)
Фірмі-виробнику

Модель Холод (фургони ізотермічні) Тепло (фургони ізотермічні) Потужність (Ват) Площа (М2) Ціна ($)
Fujitsu General 07 2 2,2 700 18 500
Fujitsu General 09 2,7 3,35 900 25 560
Fujitsu General 12 3,4 4,05 1200 35 650
Fujitsu General 14 4 4,8 1400 50 700
Fujitsu General 20 4,8 5,15 2000 50 1050
Fujitsu General 20 5,7 5,8 2000 50 980
Fujitsu General 24 6,8 7,7 2400 58 1200
Fujitsu General 24 6,9 7,3 2400 90 1190
Fujitsu General 30 7,6 8,2 3000 110 1470
Hitachi 09 2,7 3,3 900 25 490
Hitachi 12 3,4 4,6 1200 35 550
Hitachi 18 2,6 2,7 1800 60 750
Mitsubishi 07 1,9 2 700 18 510
Mitsubishi 09 2,5 2,9 900 25 550
Mitsubishi 13 3,2 3,5 1300 45 590
Mitsubishi 15 4,6 5 1500 50 770
Mitsubishi 18 4,5 4,9 1800 60 850
Samsung 28 7,1 7,6 2800 60 1300
Samsung 18 4,6 5 1800 45 990
Samsung 12 3,3 3,5 1200 35 820
Samsung 09 2,26 2,6 900 25 700
Toshiba 7 2 2,3 700 18 580
Toshiba 10 2,3 2,5 1000 30 620
Toshiba 13 3,6 4,2 1300 45 690
Toshiba 18 4,7 5 1800 60 1050
Toshiba 24 6,6 7 2400 90 1190
Akira 07 2 2,2 700 18 320
Akira 10 2,3 2,5 1000 25 335
Akira 13 3,6 4,2 1300 35 350
Akira 19 4,8 5,1 1900 60 550
Akira 24 6,6 7,2 2400 90 740
Yoko 07 2 2,2 700 18 340
Yoko 09 2,1 2,3 900 25 380
Yoko 12 3,2 4 1200 35 420
Yoko 18 4,6 5,1 1800 60 700
Yoko 24 6,5 7,1 2400 90 800
Akai 07 2 2,1 700 18 370
Akai 09 2,1 2,3 900 25 390
Akai 12 3,2 4,1 1200 35 430
Akai 18 4,6 5,1 1800 60 680
Sharp 07 2 2,2 700 18 640
Sharp 09 2,3 2,5 900 25 680
Sharp 12 3,2 3,5 1200 35 720
Sharp 18 4,6 5,1 1800 60 1080
Sharp 24 6,9 7,1 2400 90 1170
Midea 07 2,10 2,5 690 18 300
Midea 09 нов диз 2,6 3,2 890 25 355
Midea 12 нов диз 3,5 4,1 1140 35 395
Midea 18 5,3 6,2 2100 60 590
Midea 21 6,2 6,9 2350 80 610
Midea 24 6,9 7 2480 100 700
Відібрано: 51 модель

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


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

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

Ваш отзыв

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

*

*