--- title: "AJAX - Учимся на примерах. Часть 1 - Знакомство с JQuery." description: "С приходом так называемого web2.0 стало модно и актуально использовать AJAX в веб-приложениях. Что..." author: "eudj1n" published: "2008-07-14T09:28:31+00:00" modified: "2008-07-14T09:28:31+00:00" locale: "ru" canonical_url: "https://yvision.kz/post/ajax-uchimsya-na-primerah-chast-1-znakomstvo-s-jquery-1569" markdown_url: "https://yvision.kz/post/ajax-uchimsya-na-primerah-chast-1-znakomstvo-s-jquery-1569/markdown" site_name: "Yvision.kz" --- # AJAX - Учимся на примерах. Часть 1 - Знакомство с JQuery. > С приходом так называемого web2.0 стало модно и актуально использовать AJAX в веб-приложениях. Что... ![](http://storage.yvision.kz/images/user/eudj1n/2hK67EsdNVX5OA3cLvuP2NCOWwXWuh.png) С приходом так называемого web2.0 стало модно и актуально использовать [AJAX](http://ru.wikipedia.org/wiki/Ajax) в веб-приложениях. Что такое AJAX - это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными. На сегодняшний день разработано уже множество готовых библиотек (фреймворков) для разработки AJAX-приложений. Одной из такой библиотек является [JQuery](http://jquery.com), 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, '', ''); $this->info['name'] = $name[0]; $raiting = $this->get_nums($data, '', ''); $this->info['raiting'] = $raiting[0]; $state = $this->get_nums($data, '', ''); $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 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. Вот простейшая форма для нашего запроса: Посколько мы работаем с кодировкой *utf-8*, не забываем указать нужный *charset*. Стоит отметить, что нет необходимости создавать обычную HTML-формы. Для решения нашей задачи достаточно всего два элемента: поле для ввода никнейма, и кнопку для отправки запроса. Теперь рассмотрим подробнее каждый элемент. Текстовое поле имеет name и id со значениями "username", это важно, так как по id будет получаться значение этого поля. Кнопка имеет событие onClick="get_result()", это и есть главная функция для обработки запроса с использованием **JQuery**. Подключаем скрипт библиотеки следующим кодом: Первый скрипт - это основной код библиотеки JQuery. Второй - библиотеки Block UI, которая создает визуальные эффекты (блокировка страницы или её отдельных элементов во время обработки запроса). Оба скрипта можно найти на [офф. сайте](http://jquery.com). Сама функция *get_result* выглядит так: **function** get_result(){ var nickname = document.getElementById("username").value; $.blockUI({ message: 'Обработка запроса…...' }); $.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). Теперь, чтобы проверь как все работает (да и работает ли вообще?) соберем весь код в отдельные файлы (исходные тексты вы можете скачать [здесь](http://www.filebar.kz/files/24702/j1.rar)): **index.html** - главная страница (форма, подключение библиотеки JQuery) **get.php** - вызов класса и получение данных (вызываем через AJAX-запрос) **parser.class.php** - главный класс нашего проекта (подключаем его в get.php) В итоге, мы получили готовый механизм получения, парсинга и вывода данных без перезагрузки страницы. Это лишь небольшая часть того, что можно сделать с использованием рассматриваемой библиотеки. На этом первая часть знакомства с библиотекой JQuery закончена, исходные тексты всех скриптов вы можете скачать [здесь](http://www.filebar.kz/files/24702/j1.rar). --- Source: [https://yvision.kz/post/ajax-uchimsya-na-primerah-chast-1-znakomstvo-s-jquery-1569](https://yvision.kz/post/ajax-uchimsya-na-primerah-chast-1-znakomstvo-s-jquery-1569)