С приходом так называемого web2.0 стало модно и актуально использовать AJAX в веб-приложениях. Что такое AJAX - это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.
На сегодняшний день разработано уже множество готовых библиотек (фреймворков) для разработки AJAX-приложений. Одной из такой библиотек является JQuery, JavaScript-фреймворк, о котором сегодня и пойдет речь.
Чтобы познакомиться с библиотекой подробно, не будем рассматривать стандартные примеры, которые вы и так можете найти на сайте разработчиков. Сразу попробуем решить конкретную задачу, а именно - напишем скрипт, который при вводе никнейма любого из yvision-цев отобразит информацию о нем, такую как рейтинг, имя, место жительства, сфера деятельности и интересы. Конечно же, если эти данные присутствуют в профиле выбранного пользователя.
Разделим работу на 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 закончена, исходные тексты всех скриптов вы можете скачать здесь.