• 90572
  • 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
2657

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

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

Исламская ипотека в Казахстане: в этом году выйдет на розничный рынок

Исламская ипотека в Казахстане: в этом году выйдет на розничный рынок

Многие клиенты, вздыхая о харамном ссудном проценте местных банков, сокрушались по поводу отсутствия у нас халяльного кредитования. Поддержка исламского банкинга на уровне МФЦА есть...
DanaJarlygapova
24 марта 2017 / 18:28
  • 20333
  • 59
Компания LG Electronics открыла предзаказ на новый флагман LG G6

Компания LG Electronics открыла предзаказ на новый флагман LG G6

LG Electronics объявляет о начале предварительного заказа онлайн на новый смартфон LG G6. Оформить предзаказ можно на сайтах магазинов электроники до 16 апреля 2017 года.
LG Electronics
24 марта 2017 / 14:20
  • 5162
  • 0
Беременность по-американски. Никто не ждет до 40 дней, с малышом гуляют с первого дня

Беременность по-американски. Никто не ждет до 40 дней, с малышом гуляют с первого дня

Мои волшебные 9 месяцев протекали в новой среде и далеко от всех родственников и подружек. Никто из моих знакомых в США на тот момент не успел обзавестись малышом, поэтому мне не с кем было...
Zarema_
23 марта 2017 / 9:25
  • 5132
  • 16
Страну, где так строят дороги, победить невозможно!

Страну, где так строят дороги, победить невозможно!

Шестиминутный ролик про строительство автомобильной дороги в США - это как острый нож в пузо нашим чиновникам. Они же подавятся бешбармаком, увидев его! Похлеще любого пропагандистского фильма...
Timur_Tregulov
24 марта 2017 / 11:26
  • 4578
  • 38
Это вам не Дисней. Реальный прототип «Красавицы и Чудовища»

Это вам не Дисней. Реальный прототип «Красавицы и Чудовища»

Многие уверенны на 100%, что сказка «Красавица и Чудовище» - это интересная выдумка ее создателей. Однако, действия, происходящие в мультфильме и фильме, имели место в истории, и у главных героев...
Naomi_K
24 марта 2017 / 18:42
  • 4807
  • 34
Семь причин почему вам надо перестать откладывать переезд за границу

Семь причин почему вам надо перестать откладывать переезд за границу

Вы думаете о переезде за границу, но постоянно откладываете дату, потому что вас беспокоит тысяча мелочей, которые могут пойти не так? У меня есть семь причин, почему пора перестать мотать нервы...
Lesch
24 марта 2017 / 17:50
  • 3732
  • 14
Гонения на «Свидетелей Иеговы». Кому это выгодно?

Гонения на «Свидетелей Иеговы». Кому это выгодно?

Я не "Свидетель Иеговы". Мне приходилось защищать в судах и кришнаитов и коммунистов, хотя я и не разделяю их убеждений. Я защищаю свободу совести. Сегодня "Свидетели Иеговы", завтра,- каждый из вас.
nasreddin
25 марта 2017 / 17:18
  • 3822
  • 43
Страна обыденной роскоши: Ташкент-Самарканд-Бухара

Страна обыденной роскоши: Ташкент-Самарканд-Бухара

Узбекистан - это страна, где роскошь стала обыденностью. Это и повсеместный зелёный крупнолистовой чай. И вкусная натуральная еда с минимумом специй. И то, что дети играют среди исторических памятнико
MadinaR
25 марта 2017 / 10:37
  • 3064
  • 59
Посчитав сколько я смогу сэкономить на еде, я понял, что это очень приличная сумма

Посчитав сколько я смогу сэкономить на еде, я понял, что это очень приличная сумма

Именно сейчас я начинаю понимать, как себя чувствуют иногородние студенты, которые живут общежитиях у нас в Алматы. Я не говорю, что они живут плохо, но многие из них рассчитывают только на свои...
noyanovmyras
23 марта 2017 / 0:18
  • 3449
  • 62