Скрипты

istart-начальная-платформа-для-разработки-на-фреймворке-laravel iStart - начальная платформа для разработки на фреймворке Laravel, которая включает в себя админ панель и фронтэнд тему. Так же вы получаете большое...
utilcarousel-плагин-jquery-карусели UtilCarousel - плагин jQuery адаптивной карусели с поддержкой сенсорного ввода с помощью CSS3 аппаратное ускорение 3D-графики. API-функций для...
okdate-1-9-скрипт-знакомств OKDate - скрипт для создания сайта знакомств с большим количеством необходимых для этого сервиса функций и имеет удобную административную панель для...

Для Photoshop

абстрактные-линии-на-прозрачном-png Этот набор включает 4 изображения потрясающих абстрактных линий с высоким разрешением. Отлично подойдут для web-дизайна, рекламных материалов, открыток,...
celebratum-christmas-photoshop-action Celebratum – праздничный, новогодний экшин для программы Photoshop, создаёт на ваших фотографиях красивый эффект выполненный акварельными красками,...
gif-animated-crack-kit-photoshop-action Gif Animated Crack Kit – экшин для программы Photoshop, создаёт GIF анимацию с эффектом дезинтеграции (Disintegration), то есть распад. Используете...

Взаимодействие между клиентом и сервером, используя JQuery Ajax

Взаимодействие между клиентом и сервером, используя JQuery Ajax

Ajax с JQuery – несколько интерактивных примеров. Ajax – это группа технологий используемых в web разработке для создания интерактивных приложений. Ajex это технология клиент-сервер, который позволяет извлекать данные с сервера в асинхронном режиме без перезагрузки страницы. Всё это даёт отличный результат, удобство пользования вашим web сайтом и повышения скорости обработки запросов к серверу. Библиотека Jquery поможет нам в этом , потому как в ней есть все необходимые методы для работы с Ajax.

Во первых в Jquery для работы с Ajax есть два метода:

$ .ajax или jQuery.ajax

Используемые параметры могут быть разными:

$.ajax(Map properties) or $.ajax(String url [, Map properties])

URL – запрошенный адрес страницы.
Properties – Массив свойств для вашего запроса.

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

success (function) – эта функция вызывается, когда запрос выполнен успешно.
Функция возвращает несколько параметров, но первый параметр всегда возвращает данные с сервера, который мы и будем использовать.
data (object/string) – пользовательские данные, которые будут переданы на запрашиваемую страницу.
dataType (string) – возможны значения: XML , JSON или HTML. Описывает, какой тип данных мы ожидаем от сервера.
type (string) – Тип запроса, возможны значения GET или POST. По умолчанию – GET.
url (string) – адрес для запроса. Теперь перейдём к примерам использования.

Пример 1 - Самый простой, извлечение текстовой информации.

$.ajax({
url: 'response.php?action=sample1',
success: function(data) {
$('.results').html(data);
}
});

Мы создаём блок DIV .results для принятия ответов.

<div class="results">awaiting for response</div>

Что же сервер? Просто возвращает текстовое значение:

echo 'Sample 1 - success';

Пример 2 - мы будем посылать пользовательские данные в наш PHP скрипт.

$.ajax({
type: 'POST',
url: 'response.php?action=sample2',
data: 'name=Andrew&nickname=Aramis',
success: function(data){
$('.results').html(data);
}
});

Сервер просто возвращает текстовое значение переменных:

echo 'Sample 2 - success, name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

Пример 3 – мы будем использовать dataType = script.

$.ajax({
dataType: 'script',
url: 'response.php?action=sample3',
})

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

echo "$('.results').html('Sample 3 - javascript evaluating');";

Пример 4 – мы будем использовать Datatype = XML. Это полезно для работы с внешними XML, в качестве примера RSS каналы.

$.ajax({
dataType: 'xml',
url: 'response.php?action=sample4',
success: function(xmldata){
$('.results').html('');
$(xmldata).find('item').each(function(){
$('
<li></li>
').html( $(this).text() ).appendTo('.results');
});
}
});

Наш провайдер XML просто должен возвращать XML к нам:

header ('Content-Type: application/xml; charset=UTF-8');
echo <<
Item 1
Item 2
Item 3
Item 4
Item 5
XML;

Пример 5 – мы будем использовать Datatype = JSON. Это тоже интересно, только по тому, что мы будем иметь возможность использовать параметры ответов в качестве атрибутов объекта.

$.ajax({
dataType: 'json',
url: 'response.php?action=sample5',
success: function(jsondata){
$('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
}
});

Наш провайдер XML просто должен возвращать XML к нам:

$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);

Теперь вы знаете как использовать ajax методы с jQuery, для отправки и получения данных в необходимых режимах. Используйте этот материал в ваших проектах.


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

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

0
  • Комментарии не найдены

Векторная графика

абстрактные-геометрические-конструкции-векторные-фоновые-я-изображения Набор из 46 векторных изображений в виде абстрактных геометрических конструкций, отлично подойдут при создании рекламных материалов, фоновых...
плоские-круглые-иконки-векторный-микс Векторный микс плоских векторных иконок в форматах AI, EPS, PNG и PSD. Отлично подойдут при создании одностраничных сайтов, landing page. Формат файлов:...
20-плоских-модерн-круглых-значков Набор из 20 плоских модерн значков в форматах AI, EPS, PNG и PSD. Отлично подойдут при создании одностраничных сайтов, landing page. Формат файлов: AI,...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...