Давно забутий AJAX, Розгляд технології Ajax, AJAX, статті

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

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

    Витоки AJAX

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

    • семантика для елемента SCRIPT,
    • елементи IFRAME і OBJECT,
    • елемент FRAME.

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

    В результаті цих революційних нововведень, стало можливим, не перезавантажуючи всю сторінку, міняти частина її вмісту. Наприклад, цілу сторінку можна було розділити на кілька фреймів і, вказавши в одному з них посилання, мета яких визначалася атрибутом target, міняти вміст іншого фрейма, не перезавантажуючи змісту (ця можливість застосовується на сайті webdesign.site3k.net/conjuncture/append/d/menus.html).

    Так само, в 1997 році з'явилися Каскадні таблиці стилів (CSS), з їх атрибутом display, що дозволяє приховувати або відображати окремі частини сторінки, що, у взаємодії з JavaScript, могло миттєво частково або повністю змінювати її видиме вміст (застосовується в деревоподібному меню сайту Обробка баз даних браузером відвідувача, Для обробки прайсів та застосовано на 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 (див.

    І тут задумаєшся: А може послати цей 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

    Для прикладу, наведу прайс, про який йдеться на сторінці

    Ціні до …($)
    Площі від … (М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>

    *

    *