AJAX, AJAH, AHAH и AJAJ

Ну вот, наконец, и добрался до темы AJAX`а. Начну с определения. AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») – это технология асинхронной передачи данных между браузером и сервером. Асинхронность подразумевает передачу данных без перезагрузки страницы. Другими словами, Вы можете реагировать на действия пользователя более оперативно, что сделает Ваше приложение более интерактивным. Например, в форме проверки логина на занятость, проверку можно выполнить сразу, после того как введен логин, не перезагружая страницу (я думаю все уже встречались с таким).

Прежде чем перейти к примерам, еще немного расскажу про способы передачи данных… В названии AJAX`а упоминается XML, хотя в настоящее время, для асинхронной передачи данных он используется не так часто (в чистом виде, по крайней мере). Помимо XML, используют HTML (технология называется AJAH), HTML+HTTP (AHAH) и Javascript + JSON (AJAJ).

Примеры я буду приводить на javascript Фреймворке – jQuery, о котором я писал в одной из предыдущих статей. jQuery поддерживает все три вида асинхронной передачи данных.

Для работы с AJAX в jQuery есть много функций, но основными являются .get() и .post().

Их синтаксис такой:

    $.post(url[, params[, callback]])
    $.get(url[, params[, callback]])

url – адрес куда отправлять запрос POST (GET),
params – параметры в формате {param1: value1, param2:value2}
callback – функция, которая будет выполняться после возвращения страницей ответа за запрос (в качестве аргумента ей передается сам ответ).

Итак, первый пример:

index.html

<html>
<head>
    <title>AJAX test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    function LoadPhpVersion() {
        $.post('version.php', {}, show_version);
    }

    function show_version(version) {
        $('#version_box').html(version);
    }
    </script>
</head>

<body>
    <a href="javascript:void(0);" onClick="LoadPhpVersion('version_box');">AJAX it!</a><br />
    Your php version is : <span id="version_box"></span>
</body>
</html>

version.php

<?
    echo phpversion();
?>

Также в каталоге с этими файлами должен лежать файл jquery.js с библиотекой jQuery (далее это подразумевается всегда).

В этом примере мы просто отправили POST запрос без параметров скрипту version.php, который возвратил в ответ версию Вашего PHP. А функция show_version вывела ее на html-страницу. Как видите все очень просто.
Но, в нашем случае все может быть ЕЩЕ ПРОЩЕ.

Используем AHAH.

В предыдущем примере результатом нашего запроса был полученный html-код (просто текст), который просто вывели в нужное место. Такая операция очень часто используется при совместной работе шаблонизаторов и AJAX`а (т.е. AHAH`а).

Для работы именно с AHAH`ом в jquery предусмотрен метод .load().
Перепишу предыдущий пример, но в этот раз буду использовать AHAH.

index.html

<html>
<head>
    <title>AJAX test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    function ShowVersion(elem_id) {
        $('#'+elem_id).load('version.php');
    }
    </script>
</head>

<body>
    <a href="javascript:void(0);" onClick="ShowVersion('version_box');">AJAX it!</a><br />
    Your php version is : <span id="version_box"></span>
</body>
</html>

version.php

<?
    echo phpversion();
?>

В этом примере javascript-код значительно сократился. Как видите, для работы метода .load необходимо просто указать элемент, куда будет подгружен результат и передать ему имя скрипта которому отправлять запрос.
Все стало еще проще.

AJAJ

Напоследок рассмотрю еще один, очень удобный формат передачи данных – JSON.
С помощью этого формата и технологии AJAJ в jQuery, есть возможность передавать от PHP данные не одним куском, а уже в виде полей объекта, то есть за раз можно вернуть несколько переменных.
Работа с AJAJ в jQuery реализована через метод .getJSON()

Пример…

index.html

<html>
<head>
    <title>AJAX test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    function GetVersion() {
        $.getJSON('version.php', {}, function(obj){
            $('#version_box').html(obj.version);
            $('#text_box').html(obj.text);
        });
    }

    </script>
</head>

<body>
    <a href="javascript:void(0);" onClick="GetVersion(); return false;">AJAX it!</a><br />
    Your php version is : <span id="version_box"></span><br />
    Text : <span id="text_box"></span>
</body>
</html>

version.php

{
    version: '<?=phpversion();?>',
    text: 'Hello'
}

В этом примере на стороне сервера генерируется две переменных в формате JSON : version, text и выводятся.
На стороне клиента (браузера) этот блок преобразуется в объект (через функцию eval) с двумя полями – obj.version и obj.text.

Кстати, в jQuery еще есть метод .getScript().
Синтаксис:

    $.getScript(‘script.js’);

Этот код загрузит с сервера файл с javascript`ом script.js и выполнит в браузере его код.

Вот, в принципе и все.

P.S. При разработке приложений с использованием ajax`а, рекомендую использовать браузер Firefox с плагином Firebug (очень удобно отслеживать заголовки передаваемые от браузера клиенту асинхронно).



Теги: ,


Читайте также:



10 Ответов на “AJAX, AJAH, AHAH и AJAJ”

  1. Skill00

    Кстати, очень большая перспектива сейчас у связки PHP+Ajax, все больше и больше сайтов создаются уже не на чистом пхп. Даешь отдельную рубрику теме! :)

  2. novice

    Хм. Как только наберу статьей немного по этой теме - выделю в отдельную рубрику обязательно :)

  3. MegaS MegaS

    спасибо за пост, собираюсь тоже немного юзать аджакс в своем коде, пока в закладки добавлю

  4. Андрей

    {
    version: ”,
    text: ‘Hello’
    }

    Как передать ” ?
    Где использовать eval() ?

  5. cryptus

    2 Андрей: eval() делается автоматически в ядре библиотеки. ” прям так и передать.

  6. Андрей

    Скажи а почему когда я передаю данные в пхп файл то данные в пхп файле принимаются закорлючками ?

  7. novice

    Вы наверно передаете данные в кириллице. Попробуйте сделать так, чтобы кодировка страницы (с которой передаете) была в UTF-8. И принимайте в PHP файле соответственно в этой же кодировке. Можно и не UTF-8. Главное - чтобы кодировки совпадали с обеих сторон.

  8. Ruslan

    тест AHAH с внутренними javascripts

    jQuery [ссылка] - load page ~ 36.7 second

    Fullajax [ссылка] - load page ~ 3.5 second

  9. lostpassword

    Спасибо, это как раз то что мне очень надо:)

  10. Zerohold

    Тема знатная.
    Много ей уделяю времени - не жалею что изучаю. Все больше и больше прелестей нахожу. Но особо увлекаться тоже не стоит ибо есть еще и поисковая оптимизация. Поисковые системы и AJAX пока не нашли между собой общий язык.


© Copyright. . I-Novice. All Rights Reserved. Terms | Site Map