Примеры запросов ajax на jQuery
Сегодня я хочу внести ясность новичкам об ajax запросах. Как я уже говорил, все движется к простому и удобному. И заставлять пользователя, например, при подписке на новости сайта переходить по нескольким страницам уже давно не разумно. Он просто покинет Ваш ресурс. Гораздо интересней и удобней, когда все происходит здесь и сейчас.
Выполнение операций без перезагрузки страницы осуществляется с помощью ajax-запросов из javascript. Мы же рассмотрим варианты ajax-запросов из jQuery.
Что, по сути, является ajax-запросом? Это данные, которые Вы отправляете указанному скрипту и получаете результат работы скрипта (если такой имеется).
Например, при подписке на новости сайта, пользователь вводит в фору свой email и кликает на кнопку “Подписаться”. Скрипт отправляет пользовательский email в файл — обработчик, а тот отправляет обратно результат операции: успешно или ошибка. Наш скрипт выводит полученный результат пользователю. И все это без перезагрузки страницы.
Самым простым ajax-запросом является jQuery(…).load. Он подгружает html-код в выбранный элемент DOM. Метод принимает такие параметры:
- url подгружаемой страницы
- передаваемые данные (необязательно)
- callback-функция
$('#hint').load('primer.html');
В элемент с id= “hint”, в него будет загружен html-код файла primer.html
Далее рассмотрим основной метод отправки ajax-запроса – jQuery.ajax. У него один входящий параметр, который является объектом с настройками:
- async – асинхронность запроса, по умолчанию true
- cache – вкл/выкл кэширование данных браузером, по умолчанию true
- contentType – по умолчанию “application/x-www-form-urlencoded”
- data – передаваемые данные – строка иль объект
- dataFilter – фильтр для входных данных
- dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
- global – тригер – отвечает за использование глобальных ajax событий, по умолчанию true
- ifModified – тригер – проверяет,были ли изменения в ответе сервера, по умолчанию false
- jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
- processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем
- scriptCharset – кодировочка – актуально для JSONP и подгрузки JavaScript’ов
- timeout – время таймаут в миллисекундах
- type – GET-запрос либо POST-запрос
- url – url запрашиваемой страницы
Выделенные параметры нужно запомнить. Результат запроса можно определить локальными ajax событиями:
- beforeSend – срабатывает перед отправкой запроса
- error – если произошла ошибка
- success – если ошибок не возникло
- complete – срабатывает по окончанию запроса
$.ajax({ url: ‘primer.php’,// указываем url type: ‘POST’, // тип запроса dataType: ‘html’, // тип загружаемых данных data: ‘x=’ + x + ‘&y=’ + y, // передаем скрипту данные x и y success: function (data) { // обрабатываем результат через success }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode + '; Текст ошибки: ' +str); } });
Следующие методы являются лишь походными от jQuery.ajax.
Методы jQuery.get и jQuery.post схожи между собой и имеют одинаковые параметры. Разница между ними лишь в типе передачи данных: для метода jQuery.get используется GET запрос, для метода jQuery.post – POST запрос. Параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- callback функция (необязательный параметр)
- тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
$.post(‘primer.php’, {}, function(){}, 'html'); // указываем тип данных
jQuery.getJSON
Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- callback функция (необязательный параметр)
$.getJSON('primer.json', {}, function(json){ // загрузку JSON данных из файла primer.json });
Вот как бы и всё, что хотел Вам рассказать об ajax. На сайте Вы найдете много примеров работы с ajax jQuery.