• 93398
  • 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
2713

Загрузка...
Loading...

Комментарии

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

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

Мой дом – не гостиница. Я не останавливаюсь у своей родни, потому что знаю, что это такое

Мой дом – не гостиница. Я не останавливаюсь у своей родни, потому что знаю, что это такое

Наступил долгожданный момент и мы смогли заселиться в собственную квартиру. А потом началось... Все знакомые, родственники, даже коллеги и соседи родителей вспомнили о нашем существовании.
Idealovnet
14 окт. 2017 / 20:38
  • 8864
  • 82
Работа на EXPO. «Улыбайтесь, вы – лица Казахстана»

Работа на EXPO. «Улыбайтесь, вы – лица Казахстана»

Продление перерывов, втыки от менеджеров, борьба за стенды, кучкования, как мы друг-друга прикрывали, защищали от гостей. Все эти события доставляли радость, и каждый день на работу я приходила...
madiNAtty
14 окт. 2017 / 22:34
  • 6111
  • 23
О проститутках, ЗППП и других сексуальных страстях

О проститутках, ЗППП и других сексуальных страстях

У меня обширный сексуальный опыт, и я этим не хвастаюсь. Будь у меня возможность, променял бы это всё на одного партнёра. Но так как с личной жизнью не заладилось, а секс я очень люблю, то приходилось изворачиваться.
bez_prav
18 окт. 2017 / 18:01
Я четко помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж»

Я четко помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж»

У нас была особенная атмосфера, мы постоянно были вместе, читали треки, летом часто поднимались в горы. Гуляли пешком по ночному городу, иногда до утра. Снимали хату и представляли совместную жизнь...
Dominator-kz
14 окт. 2017 / 22:29
Отчего в Казахстане предвзятое отношение к отечественному продукту?

Отчего в Казахстане предвзятое отношение к отечественному продукту?

Вы когда-нибудь пользовались казахстанской косметикой? Я тоже нет, поэтому сразу же откликнулась на приглашение своего фейсбук-френда протестировать отечественные крема… из Степногорска.
Shimanskaya
16 окт. 2017 / 11:32
  • 2767
  • 30
Я помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж». Часть 2

Я помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж». Часть 2

Я знал дату свадьбы. За неделю до свадьбы в соцсети "Вконтакте" на все мои последние фото, был проставлен лайк с её профиля. Сердце забилось сильнее. В душе загорелась наивная, крошечная надежда.
Dominator-kz
17 окт. 2017 / 15:41
Мой парень – «тиран». Почему я вступила в такие отношения?

Мой парень – «тиран». Почему я вступила в такие отношения?

История из моей жизни. Я вспоминаю эти отношения и сама не могу понять - как так произошло? А дело в том, что вы и сами не заметите. Это наступает плавно и динамично.
Altynai_JA
18 окт. 2017 / 14:17
«Автобусная неделя». Выдержит ли аким Шымкента давку в общественном транспорте?

«Автобусная неделя». Выдержит ли аким Шымкента давку в общественном транспорте?

Аким Шымкента Габидулла Абдрахимов нашёл решение накопившихся проблем городского транспорта. Все ключевые работники акимата некоторое время будут сами ездить на автобусах.
openqazaqstan
18 окт. 2017 / 10:53
  • 1657
  • 31
Аркадий Волож привел в Казахстан «Яндекс.Лицей». Плакать или радоваться?

Аркадий Волож привел в Казахстан «Яндекс.Лицей». Плакать или радоваться?

"Яндекс.Лицей" зашел в казахстанские школы. План - учить бесплатно программированию, формировать себе кадры и выйти на мощность 10 тысяч школьников в год.
Zhumanova
18 окт. 2017 / 8:36
  • 1448
  • 11