Приветствую вас, люди, идущие в ногу в техническим прогрессом, использующие на своих веб-проектах AJAX или только собирающиеся это делать.

jquery ajax

Этот акроним (А именно Asynchronous Javascript and XML) появился в 2005 году, хотя сама технология существовала уже несколько лет, с момента, когда корпорация Microsoft в 1998 году реализовала возможность выполнять асинхронные запрсы в обзод iframe’ов. Асинхронный значит, что запросы к серверу происходят в фоновом режиме, что не мешает нам дальше взаимодействовать со страницей. Что довольно приятно отражается на юзабилити сайта – ведь не хочется, чтобы страница обновлялась после каждого комментария или ответа на голосование. И конечно же во всем есть и плохая, и хорошая сторона. Не очень хорошей стороной являться будет недоступность асинхронно подгружаемого контента для поисковых систем, но мы этим злоупотреблять не будем.

Не используя на своих сайтах jQuery, нам бы пришлось намного дольше проектировать код на JavaScript. Во-первых, нам бы пришлось создать XHR – объект (XMLHttpRequest), учитывая особенности всех современных веб-браузеров, по большей части конечно же всех любимыми нами продуктов Microsoft’а. Одно создание этого объекта займет несколько строк. Посмотрите на пример.

1
2
3
4
5
6
7
8
9
10
var xhr_obj;
if (window.XMLHttpRequest) {
   xhr_obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
   xhr_obj = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
   throw new Error("AJAX не поддерживается");
}

Мы не будем рассматривать AJAX на низком уровне, ограничимся лишь AJAX’ом на jQuery. Что вы заметите немногим позже в разы легче и нагляднее. Начнем как всегда с описание команд, а дальше разберем все подробнее на примерах.

Первой командой в наборе будет load, которая подгружает с сервера данные и замещает обернутый набор.
Синтаксис ее таков load(url, parameters, callback)
где url – адрес, которому направляется запрос
parameters – параметры, которые передаются, если заданы, методом POST по url-адресу
callback – функция, которая будет вызвана после завершения AJAX-запроса, в которую передаются текст ответа, статус и рассмотренный нами чуть выше объект XMLHttpRequest.
Небольшой пример на эту команду.

1
2
3
$('p:first').load('/testajax.php',{}, function() {
   alert('данные загружены');
});

Данные пример отправляет асинхронный запрос серверу, ответом от него заменяет текст первого абзаца на нашей странице, по завершении мы получаем сообщение о том, что данные загружены. В этом примере мы не передаем никаких параметров скрипту, этим мы займемся немного позже. Хотя этот скрипт уже можно использовать для показа произвольной новости.
Еще одно применение данной команды можно найти при показе информации о стране, которую мы будем выбирать из выпадающего списка и отображать полезную информацию.

1
2
3
4
5
6
7
$(function() {
   $('#country').change(function() {
      var Country = $(this).val();
      $('div').load('country.php?country=' + country);
   })
   .change();
});

После выбора из списка страны мы отправляем нашему скрипту country.php выбранную страну и получаем от него описание, которое мы выводим в div.
Этот country.php может выглядеть примерно так.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
    $a = $_GET['country'];
    switch ($a) {
        case 'france':
            echo 'Столица — город Париж. Название страны происходит по этнониму германского племени франков, хотя большинство населения Франции имеет смешанное галло-романское происхождение и говорит на языке романской группы. Население — 64,5 млн человек, в том числе свыше 90 % — граждане Франции. Верующие — преимущественно католики (свыше 76 %). Законодательный орган — двухпалатный парламент (Сенат и Национальное собрание). Административно-территориальное деление: 26 регионов (22 в метрополии и 4 заморских региона), включающих 100 департаментов (96 в метрополии и 4 заморских департамента).';
            break;
        case 'england':
            echo 'Англия - наиболее крупная историческая и административная часть Соединённого Королевства Великобритании и Северной Ирландии, официально страна (country) в его составе, занимающая юго-восточную часть большого острова Великобритания, известного как англ. mainland. Население Англии составляет 83 % от общего числа населения Великобритании.';
            break;
        case 'usa':
            echo 'Соединённые Штаты Америки, США (англ. The United States of America, USA, исп. Estados Unidos de America) — государство в Северной Америке. Занимает четвёртое место в мире по территории (9 518 900 км, 9 522 057 км) и третье место по численности населения (307 млн. человек). Столица — город Вашингтон.';
            break;
        case 'china':
            echo 'Китайская Народная Республика буквально: «срединное государство»; о происхождении русского названия см. Китай (этимология)) — государство в Восточной Азии, крупнейшее по численности населения государство мира (свыше 1,3 млрд, большинство населения — этнические китайцы, самоназвание — хань); занимает третье место в мире по территории, уступая России и Канаде. Со времени провозглашения Китайской Народной Республики в 1949 правящей партией является Коммунистическая партия Китая  (КПК). Существуют также еще восемь зарегистрированных политических партий, тесно связанных с КПК.';
            break;
        case 'russia':
            echo 'Россия — государство, расположенное в Евразии (восточной части Европы и в северной части Азии). Крупнейшее государство мира (17 075 400 км или 11,46 % (1/9) площади всей суши Земли, или 12,65 % (1/8) заселённой человеком суши, что почти вдвое больше, чем у занимающей второе место Канады). Население — 141 903 979 человек (на 1 января 2009 года, по данным Росстата), причём 79,3 % жителей проживает в Европейской части России (Центральный федеральный округ, Южный федеральный округ, Северо-Кавказский федеральный округ, Северо-западный федеральный округ, Приволжский федеральный округ), в Азиатской части России (Сибирский, Дальневосточный федеральный округа и Тюменская область, административно отнесённая к Уральскому федеральному округу) — 20,7 %. В настоящее время Россия занимает девятое место в мире по этому показателю. Большая часть населения проживает в городах — 73,1 %. Русские составляют 79,83 % населения страны. Государственный язык России — русский.';
            break;
        case 'kazakhstan':
            echo 'Республика Казахстан  или Казахстан — государство, находящееся в Центральной Азии и Восточной Европе. Граничит на севере и западе с Россией, на востоке — с Китаем, на юге — с Киргизией, Узбекистаном и Туркменией. Омывается водами внутриконтинентальных Каспийского и Аральского морей.';
            break;
        case 'ethiopia':
            echo 'Эфиопия, официальное название Федеративная Демократ?ческая Республика Эфиопия — страна в Восточной Африке, не имеющая выхода к морю (после отделения Эритреи 24 мая 1993 г.); Вторая (после Нигерии) по численности населения страна в Африке, граничит с Эритреей на севере, Джибути на северо-востоке, Сомали и непризнанной Сомалиленд на востоке, Кенией на юге и с Суданом на западе. Эфиопия — старейшая христианская страна в Африке и одно из старейших государств в мире. В 1936—1941 являлась частью колонии Итальянская Восточная Африка.';
            break;
    }
?>

Работающий пример вы можете посмотреть тут.
Продолжение очень скоро проследует…