какие функции предлагает библиотека jquery для использования ajax
Определение и применение
jQuery функция $.ajax() позволяет выполнить асинхронный AJAX запрос. AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.
Обращаю Ваше внимание, что все AJAX методы jQuery используют эту функцию, она в основном используется для запросов, где другие методы не могут быть использованы.
jQuery синтаксис:
В самом простом виде функция $.ajax() может быть вызвана без параметров:
Добавлен в версии jQuery
Значения параметров
accepts (по умолчанию: зависит от dataType).
async (по умолчанию: true ).
Тип: Function ( jqXHR jqXHR, String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий «success» или «error»). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса («success», «notmodified», «nocontent», «error», «timeout», «abort», или «parsererror»). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.
contentType (по умолчанию: «application/x-www-form-urlencoded; charset=UTF-8»).
crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).
dataType (по умолчанию: xml, json, script, или html ).
Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):
AJAX с помощью jQuery. Руководство для начинающих. Часть 1
Большинство современных сайтов используют технологию, которая называется AJAX, для быстрого и эффективного взаимодействия с посетителем. AJAX стал очень популярным методом для получения данных с сервера в фоновом режиме и динамического обновления страницы.
Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.
В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:
Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.
Что такое AJAX и чем он полезен?
Так как запрос AJAX выполняется в фоновом режиме, то код JavaScript (и посетитель) может продолжать работу со страницей во время обработки запроса. Процесс скрыт от посетителя, которому не нужно покидать страницу, которую он просматривает в данный момент времени. Такой подход делает страницы с AJAX очень приятными в работе.
Разработка кросс-браузерного JavaScript кода AJAX может оказаться довольно нудным процессом. К счастью, jQuery дает вам несколько простых в использовании методов AJAX, которые позволяют абстрагировать большое количество низкоуровневых операций.
В простейшей форме можно вызвать метод так:
. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:
. хотя можно также запросить статический документ:
При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:
Получаем данные с сервера
Определяем тип данных ответа
Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.
Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.
Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :
Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.
Вот как работает данный код:
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 173615
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Шпаргалка по jQuery функциям работающим с Ajax
Отредактировано: 23 Октября 2019
Asynchronous Javascript And Xml — полное название технологии AJAX. Это технология обращения к серверу без перезагрузки страницы.
jQuery функции работающие с технологией Ajax:
settings — объект с настройками, заданный в формате
Частичная вставка данных
Если в url адресе установлен селектор, то код будет вставлен частично.
jQuery.getScript(url, [success(data, textStatus)])
Для того, чтобы начать использовать Ajax в проекте, не обязательно использовать именно эту функцию, но она лежит в основе остальных, и раскрывает возможные параметры для других функций.
jQuery.ajax( url [, settings] ) — запись для JQ начиная с версии 1.5
jQuery.ajax( [settings] ) — запись для JQ начиная с версии 1.0
Возвращает объект jqXHR (надмножество объекта XMLHTTPRequest).
По умолчанию: зависит от параметра DataType
При выполнении запроса, в заголовках (header) указываются допустимые MIME-типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts.
Определяет способ обработки скрипта. По умолчанию, после отправки запроса на сервер, страница не останавливает свою работу в ожидании ответа, т.е. работает асинхронно.
Чтобы включить синхронный запрос, укажите в параметре- false, но имейте в виду, что выполнение запросов в синхронном режиме может привести к блокировке страницы, пока запрос не будет полностью выполнен. А также, что кроссдоменные запросы и запросы типа «jsonp» не могут выполняться в синхронном режиме.
Содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.
beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.
Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.
По умолчанию: boolean
Тип: true, false для типов данных ‘script’ and ‘jsonp’
Если false, запрашиваемая страница не будет кэшироваться браузером
Тип: функция или массив
Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Принимает два аргумента:
Параметр задается в формате <строка:регулярное выражение>и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добавлено в версии 1.5)
По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’
При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.
Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:
Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5
По умолчанию: false для одного и того же домена, true для кроссдоменных запросов.
Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)
Тип: объект или строка
Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса.
Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например,
Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.
По умолчанию: автоматически определяемая строка (xml, json, script, или html)
Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.
Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента:
Событие error не происходит при dataType равному script или JSONP.
Вызывать или нет глобальные обработчики событий Ajax для этого запроса.
Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)
По умолчанию: false
Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.
По умолчанию: зависит от текущей локации
Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http).
Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка
Тип: строка или функция
Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.
Метод передачи данных который надо использовать («POST», «GET», «PUT»). Добавлено в версии 1.9.0.
Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. Добалено в версии 1.5.1.
Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)
По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.
Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.
Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:
Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. Добалено в версии 1.5
Тип: функция или массив
Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента:
Если в качестве параметра dataType указан JSON, данная функция может не обрабатываться, по многим причинам, но в основе большинства причин лежит ошибка. Чтобы понять почему не обрабатывается функция:
Ошибка не обязательно должна быть связана с тем что указано в блоке.
По умолчанию: false
Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.
Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.
По умолчанию: текущая страница
Страница, накоторую будет отправлен запрос.
Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)
По умолчанию: ActiveXObject в IE, XMLHttpRequest в других браузерах
Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.
По умолчанию: значение
Объект вида <имя:значене>для изменения значений соответствующих полей объекта XMLHttpRequest. Добалено в версии 1.5.1.
$.ajaxPrefilter() — устанавливает обработчик, вызываемый перед выполнением каждого ajax-запроса. Предшествует выполнению любых других обработчиков ajax.
Объект jqXHR
Объект jqXHR является надмножеством объекта XMLHTTPRequest, и содержит в себе:
Примеры jQuery Ajax функций
Пример установки глобальных параметров с помощью $.ajaxSetup():
Пример функции .get():
Пример функции .post():
Пример функции .load():
Пример обработки Ajax события:
Пример использования функции .ajax()
Ajax-запрос
Материал из JQuery
url — адрес запроса.
settings — в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате . Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup().
Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.
Содержание
Список настроек
Имейте ввиду, что выполнение запросов в синхронном режиме может привести к блокировке страницы, пока запрос не будет полностью выполнен.
beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.
Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.
Начиная с jQuery-1.5, в параметр complete можно передать не одну функцию, а массив функций. Все функции будут вызваны в той очередности, в которой заданы в этом массиве.
В качестве контекста можно задать DOM-элемент, который должен каким-либо образом сигнализировать о завершении запроса:
В случае запроса методом GET, строка с данными добавляется в конец url. Если данные задаются с помощью объекта, то он должен соответствовать формату: .
Событие error не определено для dataType равных script и JSONP.
Рекомендуется устанавливать значение параметраisLocal глобально — с помощью функциии $.ajaxSetup(), а не в настройках отдельных ajax-запросов.
Начиная с jQuery-1.5, указав в этом параметре false, вы предотвратите добавление в url дополнительного параметра. В этом случае необходимо явно установить значение свойства jsonpCallback. Например так: .
Начиная с jQuery-1.5, вы можете указать функцию в этом параметре, для того, чтобы обработать ответ сервера самостоятельно. В этом случае, указанная функция должна возвращать полученные от сервера данные (в указанной функции они будут доступны в первом параметре).
Функции, реагирующие на коды удачного выполнения запроса будут получать те же аргументы, что и функции-обработчики удачного выполнения запроса (указанные в параметре success), а функции, срабатывающие на коды ошибок, будут такими же, как и у error-функций.
Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.
В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.
В jQuery-1.5 свойство withCredentials не поддерживается нативным XMLHttpRequest и при кроссдоменном запросе это поле будет проигнорировано. Во всех следующих версиях библиотеки, это исправлено.
Обработчики событий
Настройки beforeSend, error, dataFilter, success и complete (их описание есть в предыдущем разделе) позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.
beforeSend происходит непосредственно перед отправкой запроса на сервер. error происходит в случае неудачного выполнения запроса. dataFilter происходит в момент прибытия данных с сервера. Позволяет обработать "сырые" данные, присланные сервером. success происходит в случае удачного завершения запроса. complete происходит в случае любого завершения запроса.
Пример простого использования. Выведем сообщение при удачном выполнении запроса:
Для некоторых типов запросов, таких как jsonp или кроссдоменных GET-запросов, не предусматривается использование объектов XMLHttpRequest. В этом случае, передаваемые в обработчики XMLHttpRequest и textStatus будут содержать значение undefined.
Внутри обработчиков, переменная this будет содержать значение параметра context. В случае, если он не был задан, this будет содержать объект настроек.
Параметр dataType
Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType. Возможные значения этого параметра:
jQuery.ajax()
jQuery.ajax( url [, settings ] ) Returns: jqXHR
Description: Perform an asynchronous HTTP (Ajax) request.
version added: 1.5 jQuery.ajax( url [, settings ] )
version added: 1.0 jQuery.ajax( [settings ] )
Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.
An object of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:
If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error (including 3xx redirect), they take the same parameters as the error callback.
In jQuery 1.5, the withCredentials property was not propagated to the native XHR and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it.
This example, using no options, loads the contents of the current page, but does nothing with the result. To use the result, you can implement one of the callback functions.
The jqXHR Object
An alternative construct to the success callback option, refer to deferred.done() for implementation details.
Callback Function Queues
Data Types
If text or html is specified, no pre-processing occurs. The data is simply passed on to the success handler, and made available through the responseText property of the jqXHR object.
If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.
For more information on JSONP, see the original post detailing its use.
Sending Data to the Server
By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.
Advanced Options
If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username and password options.
The scriptCharset allows the character set to be explicitly specified for requests that use a