Один простой пример онлайн урок.


Для того, чтобы показать, что AJAX - это не сложно, приведем простой пример. Что нам надо:

  1. jQuery. Можно и без jQuery - на чистом JS, но для простой демонстрации мы будем использовать эту библиотеку
  2. HTML документ.
  3. PHP скрипт

В нашем HTML документе, мы разместим элемент span, по клику по которому будет отправлен запрос на сервер, но страница не перезагрузится, а обновится.
<span id="ajax_test">Click me!</span>

Главное понимать, что после отправки запроса, мы будем ждать ответа сервера. Если мы получим ответ сервера, то, как правило, нас интересует тело ответа сервера. А это означает, что исполняемый скрипт должен генерировать эти данные, а именно - выводить (output). Создадим файл script.php и запишем в нем простую инструкцию:

 <?php echo 'Hello';


Абсолютно очевидно, что при явном обращении к этому скрипту мы получим на экране текст Hello. Это и будет телом ответа сервера.

Теперь попробуем обратиться к этому скрипту при помощи AJAX. Для начала, создадим JS скрипт, который обрабатывает клик по элементу #ajax_test
<script>
$('#ajax_test').click(function(){

// something

});
</script>

Теперь осталось применить одну из функций jQuery для работы с AJAX. В этом примере мы используем функцию $.get() - она отправит GET запрос на указанный ресурс. В нашем случае - это файл script.php.
<script>
$('#ajax_test').click(function(){

$.get('script.php', function(data) {
$('body').append(data);
})

});
</script>

Тут первым аргументом указан наш скрипт, а вторым указана анонимная функция, которая зависит от переменной, которая будет содержать тело ответа сервера. В теле самой этой функции мы просто добавляем полученный контент в объектную модель (метод append()).

Как результат - после каждого клика, на странице будет появляться новое слово Hello.

В следующих уроках мы рассмотрим более интересные примеры AJAX, реализуя запросы как посредством чистого JS, так и при помощи jQuery.