Скрипты

socialengine-v4-9-4-cms-социальных-сетей SocialEngine - это (CMS Critic) удостоенное наград программное обеспечение для социальных сетей для создания собственной социальной сети или веб-сайта...
ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Взаимодействие между клиентом и сервером, используя 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, для отправки и получения данных в необходимых режимах. Используйте этот материал в ваших проектах.


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

There are no comments posted here yet

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

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

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

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

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

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