adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Примеры запросов ajax на jQuery

Логотип 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.

Последние из рубрики

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

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению