• 88558
  • 417
  • 44
Нравится блог?
Подписывайтесь!

AJAX - Учимся на примерах. Часть 1 - Знакомство с JQuery.

С приходом так называемого web2.0 стало модно и актуально использовать AJAX в веб-приложениях. Что такое AJAX - это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

На сегодняшний день разработано уже множество готовых библиотек (фреймворков) для разработки AJAX-приложений. Одной из такой библиотек является JQuery, JavaScript-фреймворк, о котором сегодня и пойдет речь.

Чтобы познакомиться с библиотекой подробно, не будем рассматривать стандартные примеры, которые вы и так можете найти на сайте разработчиков. Сразу попробуем решить конкретную задачу, а именно - напишем скрипт, который при вводе никнейма любого из yvision-цев отобразит информацию о нем, такую как рейтинг, имя, место жительства, сфера деятельности и интересы. Конечно же, если эти данные присутствуют в профиле выбранного пользователя.

Разделим работу на 2 этапа:

  1. Разработка парсера страницы профайла пользователя
  2. Создание механизма фонового обмена данными между страницей с формой для ввода никнейма и парсером.

Для удобства работы выделим функции, связанные с парсингом страницы в отдельный класс, и назовем его yvision_parser. Исходный код класса (parser.class.php) приведен ниже:

class yvision_parser
{

var
$username; //Никнейм введенного пользователя
var $html; //Данные парсинга страницы профайла
var $info; //Возвращаемый массив с данными пользователя

/**
* Функция получения ХТМЛ-кода страницы профайла пользователя
* через CURL-соедение с сервером. Если данные не могут быть
* получены (размер меньше или равно 0) - выводим сообщение
* об ошибке и завершаем работу скрипта.
*/

private function get_html()
{

$ch = curl_init('http://' . $this->username . '.yvision.kz/profile/');
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
if (
strlen($data) > 0)
{
return
$data;
} else
{
die(
'Введеного пользователя не существует. Попробуйте ещё раз.');
}
curl_close($ch);
}

/**
* Главная функция класса. В качестве входного параметра
* передается введеный в форме никнейм пользователя. При
* успешном получении данных ( фунцией get_html() ),
* парсим ХТМЛ-код и получаем нужные данные. Как таковой
* обработки полученных данных нет, просто делаем дамп
* массива ( функцией var_dump() ) и выводим на экран.
*/

public function start($nickname)
{
$this->username = $nickname;
$this->html = $this->get_html();

if (
$this->html)
{
var_dump($this->parse_html($this->html));
} else
{
echo
'Ошибка получения данных. Попробуйте ещё раз.';
}

}

/**
* Функция обработки ХТМЛ кода и нахождения нужных значений.
* Все данные собираем в массив $info и возвращаем функции start().
*/
private function parse_html($data)
{

$name = $this->get_nums($data,
'<div style="font-size: 16px; font-weight: bold; color: #FF7F00;">', '</div>');
$this->info['name'] = $name[0];

$raiting = $this->get_nums($data, '<div class="user_rating">', '</div>');
$this->info['raiting'] = $raiting[0];

$state = $this->get_nums($data, '<a class="alogin" href="#">', '</a>');
$this->info['country'] = $state[0];

$city = $this->get_nums($data, 'href="http://yvision.kz/people/geo/', '/">');
$this->info['city'] = $city[0];

$act = $this->get_nums($data, 'href="http://yvision.kz/people/activity/', '/">');
$this->info['activity'] = $act[0];

$int = $this->get_nums($data, 'http://yvision.kz/people/interests/', '/">');
for (
$i = 0; $i < count($int); $i++)
{
$in .= $int[$i] . ', ';
}
$this->info['interests'] = $in;

if (
count($this->info) > 0)
{
return
$this->info;
} else
{
return
false;
}
}

/**
* Функция нахождения интересующих значений в ХТМЛ-коде.
* В качестве параметров передается исходный текст (код),
* начальный и закрывающий маркеры, внутри которых
* находится искомый фрагмент данных.
*/
private function get_nums($text, $openingMarker, $closingMarker)
{
$openingMarkerLength = strlen($openingMarker);
$closingMarkerLength = strlen($closingMarker);

$result = array();
$position = 0;
while ((
$position = strpos($text, $openingMarker, $position)) !== false)
{
$position += $openingMarkerLength;
if ((
$closingMarkerPosition = strpos($text, $closingMarker, $position)) !== false)
{
$result[] = substr($text, $position, $closingMarkerPosition - $position);
$position = $closingMarkerPosition + $closingMarkerLength;
}
}
return
$result;
}
}

Пример работы с классом приведен ниже (в качестве параметра передается переменная $username из POST запроса):

include 'parser.class.php';

$yv = new yvision_parser;

if(
$_POST['username']!=''){
$yv -> start($_POST['username']);
}

Сохраним этот фрагмент, и назовем файл get.php, он нам пригодится.

В итоге мы получаем массив $info с полученными данными. Никаких действий производить не будет, просто убедимся что данные отображаются корректно и выведем содержимое массива функцией var_dump().

Парсер готов, теперь принимаемся за этап номер 2. Вот простейшая форма для нашего запроса:

<input type="text" value="" name="username" id="username">

<input type="button" value="узнать!" onClick="get_result()" id="submit">

Посколько мы работаем с кодировкой utf-8, не забываем указать нужный charset.

Стоит отметить, что нет необходимости создавать обычную HTML-формы. Для решения нашей задачи достаточно всего два элемента: поле для ввода никнейма, и кнопку для отправки запроса. Теперь рассмотрим подробнее каждый элемент.

Текстовое поле имеет name и id со значениями "username", это важно, так как по id будет получаться значение этого поля.

Кнопка имеет событие onClick="get_result()", это и есть главная функция для обработки запроса с использованием JQuery.

Подключаем скрипт библиотеки следующим кодом:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="jquery.blockUI.js"></script>

Первый скрипт - это основной код библиотеки JQuery. Второй - библиотеки Block UI, которая создает визуальные эффекты (блокировка страницы или её отдельных элементов во время обработки запроса). Оба скрипта можно найти на офф. сайте.

Сама функция get_result выглядит так:


function get_result(){

var nickname = document.getElementById("username").value;

$.blockUI({ message: '<b>Обработка запроса…...</b>' });
$.post(
'/get.php',
{
username: ""+nickname+""
},
onAjaxSuccess
);
}

function onAjaxSuccess(data)
{
$("#result")
.html(data)
.animate({height: "show"}, 900);
$.unblockUI();
}

Пояснения:

nickname- значени введенного поля (никнейм пользователя);

$.blockUI - этой функцией мы блокируем всю страницу до получения данных и выводим сообщение об обработке данных;

$.post - отправляем POST запрос нашему скрипту get.php, в качестве единственного параметра передается никнейм пользователя;

При получении данных - вызываем функцию onAjaxSuccess, в которую и передаем полученные данные. При этом используем эффект анимации (animate), и присваиваем полученные данные элементу с id = "result". Когда все завершено - разблокируем страницу, и вернем форму к первоначальному виду ($.unblockUI).

Теперь, чтобы проверь как все работает (да и работает ли вообще?) соберем весь код в отдельные файлы (исходные тексты вы можете скачать здесь):

index.html - главная страница (форма, подключение библиотеки JQuery)

get.php - вызов класса и получение данных (вызываем через AJAX-запрос)

parser.class.php - главный класс нашего проекта (подключаем его в get.php)

В итоге, мы получили готовый механизм получения, парсинга и вывода данных без перезагрузки страницы. Это лишь небольшая часть того, что можно сделать с использованием рассматриваемой библиотеки.

На этом первая часть знакомства с библиотекой JQuery закончена, исходные тексты всех скриптов вы можете скачать здесь.

14 июля 2008, 21:28
2573

Загрузка...

Комментарии

arti
0
0
Хорошо написано, но все-таки, на мой взгляд, "onClick="get_result()" " не очень правильно. Лучше что-то вроде $('#submit').click(get_result).
eudj1n
0
0
да, можно и так.
пишу по старинке :)
eudj1n
0
0
если быть точным, то:

$('#submit').bind("click", get_result);

спасибо за замечание.

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

США открыла у нас лабораторию смерти. Даже Есимов не знал о её существовании

США открыла у нас лабораторию смерти. Даже Есимов не знал о её существовании

Думаю, не многие знают, что 9 сентября этого года в городе Алматы была открыта сверхсовременная биолаборатория, предназначенная для хранения опаснейших патогенов. Конечно же, с ее строительством...
Duraton
26 сент. 2016 / 18:50
  • 18814
  • 77
Что дал Казахстану переход к трехступенчатой судебной системе?

Что дал Казахстану переход к трехступенчатой судебной системе?

С 1 января 2016 года Казахстан перешел на трехступенчатую судебную систему. Данные изменения действуют уже более 8 месяцев, и в данной публикации мы попробуем разобраться, что это дало Казахстану?
RuSnake
24 сент. 2016 / 11:50
  • 13162
  • 3
В октябре 2016 года состоится VII съезд судей Казахстана

В октябре 2016 года состоится VII съезд судей Казахстана

Проведение съездов судей позволяет принимать стратегические решения по вопросам развития судебной системы и способствует укреплению принципов независимости судейского сообщества.
elawkz
23 сент. 2016 / 13:45
  • 11186
  • 0
О законе законов: Замолвите слово о справедливости

О законе законов: Замолвите слово о справедливости

Акимат г. Астаны предлагал собственнику компенсацию...4 тенге 13 тиын за землю. Потолкуем о справедливости?
mirabeisenova
23 сент. 2016 / 16:39
  • 10983
  • 5
Я –живой пример того, что для начала собственного дела не нужны большие деньги

Я –живой пример того, что для начала собственного дела не нужны большие деньги

Сегодня утром ко мне позвонила тетя и сообщила, что хочет открыть свое дело, но не знает с чего начать и не уверена, хватит ли ей первоначального капитала. Вы не представляете, как она удивилась, когд
toskanbayev_a
21 сент. 2016 / 16:45
  • 10670
  • 28
Кызылорда: перезагрузка, или что изменилось за последние несколько лет

Кызылорда: перезагрузка, или что изменилось за последние несколько лет

В преддверии Дня города мы решили вспомнить, как росла и развивалась наша родная Кызылорда в последние годы. Хотим поделиться своей любовью к родному городу с читателями Юви в этой фотоподборке ...
socium_kzo
22 сент. 2016 / 10:09
  • 6968
  • 9
Сватовство в Казахстане или Заберите скорее мою дочь к себе

Сватовство в Казахстане или Заберите скорее мою дочь к себе

Всю мою сознательную жизнь мне приходилось ходить в гости. В гостях неплохо, не спорю. Бесплатная еда и напитки. В особо продвинутых семьях ещё предоставляются услуги Free Wi-Fi. В особо весёлых...
almatinec_92
23 сент. 2016 / 9:33
Apple – это уже прошлое. XIAOMI тихо стал настоящим и будущим

Apple – это уже прошлое. XIAOMI тихо стал настоящим и будущим

Безусловно мы все относимся с большим уважением с Стив Джобсу. Но его уже больше 5 лет нет с нами. Бессмысленно продолжать фанатеть от продукции Apple...
GALAN
22 сент. 2016 / 23:19
  • 3943
  • 14
Оралманка из Китая! Надеюсь, ты встретила того, кто по достоинству оценил тебя...

Оралманка из Китая! Надеюсь, ты встретила того, кто по достоинству оценил тебя...

В один прекрасный день я все же подошел к ней и попытался с ней нормально поговорить и пригласить куда-нибудь погулять или поужинать. Мы разговаривали с ней минут 20, я использовал весь свой...
Timurkhan
23 сент. 2016 / 12:26
  • 3774
  • 11