Без всякого сомнения, технология Ajax взяла веб-разработки штурмом и это одна из самых успешных парадигм, когда-либо созданных в этой отрасли. В данной статье я не буду обсуждать такие широко используемые методы как $.get(), $.post() и $.load(), а приоткрою вам занавес более глубокого понимания метода $.ajax().
Иногда нам нужно больше власти/контроля над функцией, чем обычно при работе с Ajax-запросами. К примеру, мы хотим указать, что должно произойти в случае, если вызов Ajax не удаётся, или выполнить запрос Ajax, но его результат нам нужен только в том случае, если он будет обработан в течение определенного времени. В таких ситуациях, мы можем рассчитывать на замечательную функцию $.ajax (), которая и является темой данного урока.
Функция $.ajax()
Функция $.ajax() от библиотеки jQuery используется для выполнения асинхронного HTTP-запроса. Она была добавлена в библиотеку много лет назад и крепко обосновалась там ещё с версии 1.0. В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.
$.ajax(url[, options]) $.ajax([options]) Параметр url является строкой и отвечает за адрес файла (по умолчанию: текущая страница), который нам нужно достичь посредством Ajax-запроса, в то время как options — параметры данного запроса.
Список опций, поддерживаемых данной функцией, очень велик, так что в этой статье я приведу только основные/главные из них с кратким описанием. В случае, если вы хотите ознакомиться с ними ближе, вот ссылка на официальную документацию.
Параметры Ajax-запроса
Существует множество различных параметров, которые вы можете указать при вызове функции $.ajax. В списке ниже вы можете найти их имена и их описание отсортированы в алфавитном порядке:
- async: По умолчанию, все запросы отсылаются асинхронно (т.е. значение true). Если Вам необходимо посылать запросы синхронно, установите данную опцию в false.
- beforeSend: Функция для модификации объекта XMLHttpRequest перед отправкой. Используйте её для установки пользовательских заголовков и т.д.;
- cache: Отключает кеширование браузером запрашиваемых Вами страниц;
- complete: Функция, которая исполняется всякий раз после завершения AJAX-запроса;
- contentType: Строка, которая содержит тип отправляемых на сервер данных;
- context: Объект, использованный в качестве контекста (this) для соответствующей callback-функции;
- crossDomain: Позволяет осуществлять переадресацию на другой домен на стороне сервера;
- data: Данные, которые будут отправлены на сервер;
- dataFilter: Функция, используемая для обработки «сырых» данных ответа XMLHttpRequest;
- dataType: Тип данных, который вы ожидаете получить с сервера;
- error: Функция, которая исполняется всякий раз после неудачного запроса;
- global: Определяет, нужно-ли вызывать глобальные обработчики событий AJAX для данного запроса;
- ifModified: Определяет, что запрос является успешным только тогда, когда ответ изменился с момента последнего запроса;
- jsonp: Переопределяет имя функциив в запросе jsonp;
- jsonpCallback: Указывает имя функции обратного вызова для запроса JSONP;
- password: Пароль, который будет использован для HTTP запроса авторизации;
- processData: По умолчанию, данные, переданные в параметр data в качестве объекта (с технической точки зрения, что-либо кроме строки), будут обработаны и преобразованы в строку запроса, для соответствия типу данных по умолчанию — «application/x-www-form-urlencoded». Если необходимо отослать документ DOM или другие специфические данные, то установите данную опцию в false.
- scriptCharset: Только для запросов типа GET со значениями jsonp’ или ’script’ в качестве dataType. Заставляет интерпретировать запрос как конкретную кодировку;
- success: Функция, которая исполняется всякий раз после удачного завершения запроса;
- timeout: Устанавливает локальное время ожидания для запроса;
- type: Тип запроса (»POST» или «GET»), по умолчанию «GET»;
- url: Отвечает за адрес файла (по умолчанию: текущая страница);
- username: Имя пользователя, которое будет использовано для HTTP запроса авторизации;
- xhr: Функция для создания объекта XMLHttpRequest;
Не так уж и много, не так ли? Ну, как разработчики вы, я так думаю, перестали читать этот список уже на пятом или шестом элементе, но это нормально. Так что давайте опустим скучную теорию и перейдём к практике?
Пример практического применения $.ajax()
Давайте создадим несложное демо, которое загружает с сервера некоторый текст посредством Ajax-запроса.
$('#action-button').click(function() { $.ajax({ url: 'http://api.joind.in/v2.1/talks/10889', data: { format: 'json' }, error: function() { $('#info').html('<p>An error has occurred</p>'); }, dataType: 'jsonp', success: function(data) { var $title = $('<h1>').text(data.talks[0].talk_title); var $description = $('<p>').text(data.talks[0].talk_description); $('#info') .append($title) .append($description); }, type: 'GET' }); }); Вывод
В этом уроке мы рассмотрели самый мощный функционал взаимодействия с Ajax, из предлагаемых JQuery, $ .ajax (). Для того, чтобы еще лучше понять потенциал этой функции, я предлагаю вам поиграть с образцами кода, попытаться изменить его, используя некоторые другие параметры.
ссылка на оригинал статьи http://habrahabr.ru/post/273085/
Добавить комментарий