5.7.3. Обработка событий

С появлением jQuery реализация Ajax упростилась. Начнем с рассмотрения загрузки HTML кода в элемент DOM с помощью метода load() с параметрами: url - запрашиваемой страницы, data - данные (необязательный параметр), callback – функция, вызываемая при завершении запроса к серверу (необязательный параметр). Например: $("#content").load("/mypage.htm") вставит в элемент с id=content указанный код HTML.

// передаем данные на сервер

$("#content").load("/mypage.htm", {id:l8});

// обрабатываем полученные данные

$("#content").load("/mypage.htm", function (){ alert("Ничего строка");

});

Второй пример может выручить, когда надо реализовать загрузку AJAX'ом, а доступа к сервер-сайту нет.

Метод ajax() главный. Метод принимает параметры и URL:

$.ajax({

url: "/mypage.html", // указываем URL и тип загружаемых данных

success: function (data) {

// вешаем свой обработчик события success

$("#content").html(data)

}

});

Тут мы обрабатывали HTML ответ от сервера, но данные лучше передавать в «правильном» формате XML. Проще выбрать JSON:

{

"note": {

"time":"2012.09.21 13:11:15", "text":"Рассказать про JSONP"

}

}

Фактически это и есть JavaScript код. Для загрузки JSON существует быстрая функция-синоним - jQuery.getDSON(url [,data] [,success(data, textStatus, jqXHR)] ) обязательный параметр лишь ссылка, куда стучимся. Опционально можно указать данные, для передачи на сервер и функцию обратного вызова

Обработчики AJAX событий

AJAX запросы имеют несколько событий:

ajaxStart — событие возникает момент, когда послан первый AJAX запрос, а других активных AJAX запросов нет. beforeSend — локальное событие возникает до отправки запроса и позволяет редактировать XMLHttpRequest. ajaxSend — возникает до отправки запроса, аналогично beforeSend. success — локальное событие возникает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных.

ajaxSuccess — возникает по возвращению ответа, аналогично success error — возникает в случае ошибки, локальное событие ajaxError — возникает в случае ошибки

complete — локальное событие всегда возникает по завершению текущего AJAX запроса (с ошибкой или без), ajaxComplete — глобальное событие, аналогичное complete

ajaxStop —событие возникает в случае, когда больше нет активных запросов

jQuery позволяет обрабатывать эти события для каждого AJAX запроса локально либо глобально. Пример для отображения элемента с id="loading" во время выполнения любого AJAX запроса (глобальное событие):

$("#loading").bind("ajaxSend", function(){

$(this).show(); // показываем элемент }).bind("ajaxComplete", function(){

$(this).hide(); // скрываем элемент

});

Можно глобальные обработчики отключить принудительно, используя флаг global= false, и писать функционал в обход событий ajaxStart и ajaxStop.

Для локальных событий - вносим изменения в опции метода ajax():

$.ajax({

beforeSend: function(){// обработчик будет вызван перед отправкой запроса

},

success: function(){//будет вызван при удачном завершении

},

error: function(){//будет вызван при возникновении ошибки

},

complete: function(){//будет вызван по завершению запроса

}

});

Рассмотрим примеры

$.ajax({//url, к которому обращаемся

url: '/ajax.php?act=jquery_test',

type: 'GET', //тип: GET или POST

success: function(response){ //вызывается, когда //запрос //прошёл успешно и данные (data) получены

alert('Сервер вернул ответ: ' + response);

}

});

Это простейший пример использования ajax в JQuery. Теперь посмотрим, как можно отдать сереверу данные методом POST:

$.ajax({

url: '/ajax.php?act=ajax_jquery_post',

type: 'POST',

contentType: 'application/x-www-form-urlencoded',

//Тип передаваемых данных

data: 'text='+$('#text').val()+'&id=282&c=w',

//а это, собственно, данные (произвольные)

success: function(response){

alert('Данные отправлены! Сервер вернул ответ: ' + response);

}

});

Это был пример отправки данных на сервер с помощью JQuery AJAX.

Рассмотрим пример отправки комментария.

<form id="comment">

<input type="hidden" id="contentid" value="номер статьи (вставляется с помощью PHP)" />

<input type="text" name="nick"><br />

<textarea name="comment"></textarea><br />

<button id="sendcomment">Отправить</button>

</form>

<script type="text/javascript">

$(document).ready(function(){

$('#sendcomment').click(function(){

$.ajax({

url: '/some-url/content_id='+$('#contentid').val(), //Указываем УРЛ

type: 'POST', //Указываем метод:

data: 'nick='+$('input[name=nick]').val()+'&comment='+ $('textarea[name=comment]').val(),

//Указываем данные, отправляемые POSTом

success: function(data){ //будет выполняться при успехе

alert('Ваш комментарий отправлен!');

},

error: function(){ // будет выполняться при неудаче

alert('Ошибка! Попробуйте ещё раз!');

}

});

});

});

</script>

Теперь немного о других форматах:

$.ajax({

url: 'ajax.php?act=ajax_jquery',

type: 'POST',

dataType: 'JSON',//форматы могут быть:JSON, XML, HTML, text data: someData,

success: function(response){

//какие-нибудь действия

}

});

Кроме того, можно создать обработчик события "успех" (success) и других событий:

Событие success вызывается, когда запрос завершился успешно. Его обработчику передаются параметры: возвращаемые сервером данные, строка с кодом ответа сервера, и объект xmlHttpRequest. Аналогично error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки

Событие complete вызывается, когда запрос завершился, независимо от того, удачей или нет. Передаются: xmlHttpRequest и строка, указывающая код успеха или ошибки.

dataFilter вызывается перед вызовом success. Ему передаются полученные от сервера данные. В ней данные обрабатываются и возвращаются в success. beforeSend вызывается до отправки запроса на сервер

Теперь еще один пример:

$.ajax({

url: 'ajax.php?act=something',

type: 'GET', //что-нибудь получим

success: function(response, code){

//пропустили последний параметр — он не нужен

if (code==200){

alert('Сервер вернул: ' + response);

}else{

alert('Сервер вернул непонятный код ответа: ' + code);

}

},

error: function(xhr, str){

alert('Возникла ошибка: ' + xhr.responseCode);

}

complete: function(){

//тут ничего из предложенных параметров не берем :)

$('#something').hide(); //например, спрятали какую-то кнопочку, которая вызывала запрос

}

});

Это уже пример посерьёзней,— с обработкой ошибок.

С помощью ajaxSetup() можно глобально во всём скрипте задать все необходимые опции. Пример:

$(document).ready(function(){

$.ajaxSetup({

url: 'ajax.php',

type: 'POST',

success: function(data){

$('#somefield').val(data);

}

error: function(){

$('#somebutton').addClass('error');

}

});

$('#somebutton1').click(function(){

$.ajax({data: 'act=1'});

});

$('#some2').click(function(){

$.ajax({data: 'act=2'});

});

});

Опции $.ajax

• async (true или false). По умолчанию true. Включает или выключает асинхронные запросы как в компоненте xmlHttpRequest.

• cache (true или false). Включает или выключает кеширование браузером

• contentType (строка). Тип содержания, передаваемого на сервер. При сабмите форм используйте application/x-www-form-urlencoded

• data (строка). Данные, отправляемые на сервер.

• dataType (строка). Тип ожидаемых от сервера данных: xml, json, script, html. Если не указан, JQuery попытается определить результат, основанный на MIME-типе ответа. ifModified (true или false (по умолчанию)). Если установлено в true, то запрос будет успешным только тогда, когда ответ изменился с момента прошлого запроса (достигается путём проверки заголовка Last-Modified)

• timeout (в милисекундах). Период, после которого, соединение с сервером будет обрываться.

• type (запрос: GET или POST).

• url (строка). Страница сервера, к которой будет сделан запрос.

Для того, чтобы примеры работали корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8. 2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Создадим простую программу, отображающую текущее время, обновляемое по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

Содержимое файла index.html.

<!-- Пример 1. Динамическое обновление контента по таймеру-->

<html><head>

<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

<div id="content"></div>

<script>

function show()

{

$.ajax({

url: "time.php",

cache: false,

success: function(html){

$("#content").html(html);

}

});

}

$(document).ready(function(){

show();

setInterval('show()',1000);

});

</script>

</body> </html>

Файл time.php

<?php echo date("H:i:s"); ?>

<!-- Пример 2. Динамическое обновление контента по выбору пользователя

-->

<html><head>

<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">

<script type="text/javascript" src="jquery.js"></script>

</head>

body>

<p>Какую страницу желаете открыть?</p>

<form>

<input id="btn1" type="button" value="Страница 1"> <input id="btn2" type="button" value="Страница 2">

</form>

<div id="content"></div>

<script>

$(document).ready(function(){

$('#btn1').click(function(){

$.ajax({

url: "page1.html",

cache: false,

success: function(html){

$("#content").html(html);

}

});

});

$('#btn2').click(function(){

$.ajax({

url: "page2.html",

cache: false,

success: function(html){

$("#content").html(html);

}

});

});

});

</script>

</body> </html>

Page2.htm

<h1>Страница 2</h1>

<p>Текст второй страницы</p>

<p>Продолжение</p>

<p> Продолжение</p>

Page1.htm

<h1>Страница 1</h1>

<p>Первая страница</p>

<p>Продолжение </p>

<!-- Пример 3. Отправка данных на сервер в фоновом режиме и получение контента-->

<html><head>

<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

<form id="myForm">

Введите имя:<br/>

<input id="username" type="text" size="20"><br/><br/>

<input type="submit" value="Отправить">

</form>

<div id="content"></div>

<script>

$(document).ready(function(){

$('#myForm').submit(function(){

$.ajax({

type: "POST",

url: "greetings.php",

data: "username="+$("#username").val(),

success: function(html){

$("#content").html(html);

}

});

return false;

});

});

</script>

</body></html>

Файл greetings.php

<?php

echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>";

echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";

?>