Ajax запрос в jQuery. Часть 1. Метод ajax


Содержание материала:

Технология AJAX

Введение в AJAX

Технология AJAX представляет собой технологию асинхронного взаимодействия с сервером. Благодаря данной технологии мы можем отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме, создавать насыщенные интерактивные веб-приложения, например, веб-чаты.

Первоначально возможность асинхронного взаимодействия с сервером была использована в виде объекта ActiveX в компании Microsoft. В последствии идея асинхронного взаимодействия была подхвачена и другими компаниями. И в настоящее время функционал асинхронных запросов в браузерах доступен веб-разработчикам через объект XMLHttpRequest.

Поскольку данный материал посвящен jQuery, я не буду подробно останавливаться на объекте XMLHttpRequest . Но вкратце покажу суть его использования.

Итак, прежде всего для работы с AJAX нам нужен веб-сервер. Это может быть Node.js, IIS, Apache, nginx. В дальнейшем я буду использовать веб-сервер Apache.

Создадим веб-страничку, где будет использоваться XMLHttpRequest:

В плане разметки у нас есть два элемента: кнопка, по нажатию на которую совершается функция ajaxload , и блок div, в который будут загружаться данные при запросе.

Все основное действие у нас происходит в функции ajaxload. Во-первых, мы создаем объект XMLHttpRequest: var xhr=new XMLHttpRequest(); .

Через этот объект мы будем отправлять запросы. При получении ответа будет срабатывать событие onreadystatechange. И для обработки данного события мы присваиваем свойству xhr.onreadystatechange функцию обработки ответа.

В функции обработки мы, во-первых, смотрим на готовность ответа через свойство readyState (состояние this.readyState==4 означает, что запрос завершен). Далее мы проверяем статусный код ответа: если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно.

И затем мы передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText .

В строке xhr.open(‘GET’, ‘ajax.php’); мы устанавливаем метод запроса и ресурс, к которому будет идти запрос.

Ну и последней строчкой xhr.send() отправляем запрос. В итоге мы написали очень много кода, чтобы выполнить простой запрос.

Пусть у нас на сервере находится обработчик запросов на языке php. Я сделаю его предельно простым. Он будет просто передавать в ответ разметку html:

Теперь по нажатию по кнопке будет происходить ajax-запрос, результаты которого будут загружаться на страницу:

Теперь перепишем код страницы с использованием jQuery:

Таким образом, код становится чище и проще за счет использования библиотеки jQuery. Нам достаточно применить метод load , передав в качестве параметра адрес ресурса. И итоговый результат будет тот же самый.

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

Одна функция для Ajax-запросов.

Как вернуть данные.

Долго сидел и думал, какое же дать название этой статье, т.к. тема гораздо обширнее, чем просто «вернуть ответ из функции Ajax-запросов«. Сюда можно было бы приклеить и «Работа с полученным ответом на Ajax-запрос«, и «Универсальная функция Ajax-запросов«, и «Работа с объектами Promise и Deferred» , и еще массу вариантов. Но всё это сводится к одной проблеме, которая изо дня в день поднимается новичками на форумах и которую можно определить одной фразой — асинхронность выполнения Ajax-запросов.

Что же вообще это значит: «синхронное или асинхронное выполнение»? Если не особо углубляясь и, как говорится, на пальцах, то:

  • Синхронное выполнение — это, когда вы сели на горшок справлять нужду, то штаны не натягиваете, пока не завершите этот процесс, а потом не воспользуетесь туалетной бумагой, а может быть еще и биде. 😉
  • Асинхронное выполнение — это, когда вы поставили чайник на огонь, включили стиральную машинку и сели читать книгу. Все процессы выполняются независимо друг от друга и не дожидаясь окончания одним другого.

Надеюсь, что суть уловили. 🙂 Давайте разберем типичный ошибочный пример:

И вопрос обычно звучит в таком стиле: «Почему функция не возвращает данные? Почему всегда false?» Теперь уже, когда вы знаете разницу между синхронным и асинхронным выполнением, вы можете без труда понять, что происходит внутри функци «ajaxRequest»: инициализировали переменную «response», начался процесс ajax-запроса, но еще до его завершения, функция уже возвращает значение переменной, которое так и не успело изменится.

Как с этим бороться? Первое, что может прийти на ум и будет решение не таким уж правильным — это сделать запрос синхронным. В методе $.ajax(), за это отвечает параметр async со значение false (по умолчанию — значение true). Главный минус такого подхода в том, что на время выполнения запроса, сайт у пользователя попросту «подвиснет», а это не есть хорошо. Кроме того, это может отрицательно сказаться на выполнении каких-либо фоновых операциях. Например, если у вас есть функция, которая каждую секунду должна что-то выполнять, то на время Ajax-запроса, она так же зависнет. Поэтому синхронное выполнение, мы отложим для особых случаев, где без синхронности обойтись нельзя.

Универсальная функция для Ajax — это хорошо, но не всегда такую функцию можно сделать под конкретный проект, а понятие «универсальность» в широком смысле, тут вообще не подходит. Как минимум, ответ обрабатывается по разному, запросы могут передавать как обычные данные, так и файлы, где настройки запроса отличаются, могут отличаться функции beforeSend, complete и т.д. В этом случае, можно упростить код за счет метода $.ajaxSetup(). Основные настройки или настройки, которые будут действовать в большинстве случаев, мы можем указать в коде один раз и больше не прописывать их в методе $.ajax().

Теперь в любом месте, где нужно сделать ajax-запрос, мы прописываем только то, что отправляем и обработчик ответа:

Если же в каком-то исключительном случае, нам нужно изменить определенную настройку, то её так же дописываем. Например, в каком-то случае, нам не нужно показывать «loader» ( ) перед отправкой запроса или вместо loader-а, вывести что-то в консоль:

Это был один из вариантов, с помощью которого можно сделать код более универсальным. Теперь же перейдём непосредственно к функциям.
Вариант первый — передача в функцию обработчика ответа на Ajax-запрос:

Итак, предположим, что у нас на странице есть два элемента, объект «actions», содержащий функции для обработки данных ответа и одна функция ajax-запросов, которая принимает два аргумента: «data» — какие-то данные, передаваемые на сервер и «responseHandler» — имя функции, которая должна обработать ответ сервера (аргументов, понятное дело, что может быть и больше). После успешного завершения запроса, вызывается соответствующая функция из объекта «actions», которая принимает полученные от сервера данные (переменная «response») и заменяет ими контент соответствующего элемента. Если нам понадобится еще какой-то обработчик, то мы просто допишем в объект «actions» новую функцию, при этом что-либо изменять дополнительно уже не понадобится.
В примере, мы вручную записывали имя функции-обработчика, но это можно так же автоматизировать. Например, используя атрибут тегов «data-*»:

В итоге, у нас одна функция для Ajax-запросов, один расширяемый объект с обработчиками, один обработчик кликов для всех кнопок, а вот результат разный и тот, который нужен нам 😉
Вариант второй — используем JavaScript-объект Promise («обещание«), которой служит для отложенных и асинхронных вычислений. Проще говоря, с помощью этого объекта мы можем установить обработчик события на выполнение какой-либо задачи. В jQuery существует свой объект для работы с «обещаниями» — это объект $.Deferred(). Разбирать его по косточкам не будем, т.к. все можно найти в документации, а просто рассмотрим пару вариантов использования и один из основных методов объекта Deffered — $.when(). Изменим наш код выше таким образом:

Объект с обработчиками нам уже не нужен, т.к. мы обрабатываем ответ сервера на месте. Опции success, error и т.д. — нам так же не нужны, так как метод $.when(), создавая новый deferred-объект, следит за состоянием процесса. А в методе .then(), мы устанавливаем обработчики событий:


  1. doneCallbacks — функция, которая будет вызвана в случае успешно выполнения
  2. failCallbacks — функция вызываемая при возникновении ошибки
  3. И, при желании, progressCallbacks — обработчик события «progress»

Кому-то может показаться такой подход малополезным, но представим ситуацию, когда вам нужно сделать два, три или более ajax-запросов, дождаться завершения каждого, обработать ответы и только потом вывести на экран. Любители «индусского кода» не растеряются 🙂 Они напишут тонну лишнего кода, в то время, как это можно сделать достаточно легко с помощью того же метода $.when():

Топ-пост этого месяца:  Использование условия SQL like для сравнения значений синтаксис и примеры

Функция Ajax осталась одна, ничего лишнего писать не пришлось и результат тот, которого мы ожидали.
И напоследок, покажу, как можно использовать Promise на чистом JavaScript. Сам код Ajax-запроса я описывать тут не буду, т.к. я его уже разбирал в статье Запрос на чистом JavaScript, а схематически это будет выглядеть так:

Надеюсь, что этот краткий обзор, поможет новичкам сориентироваться в правильном направлении. Более подробно про функции объекта Deferred — читайте в официальной документации 😉

Ajax-запрос к серверу через jQuery

В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

Более продвинутый вариант использования load:

В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

Кнопка отправки данных:

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

Ajax-запрос в jQuery

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

$.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.

В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.


Ajax-запрос имеет два варианта использования:

  • url — url-адрес, по которому будет отправлен запрос.
  • settings — в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате <имя:значение, имя:значение. >. Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup()

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

Список настроек (settings)

  1. accepts (по умолчанию: зависит от DataType )
    Тип: объект.
    При выполнении запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts. Например, в следующем примере указываются допустимые типы customtype:
  • данные (data), присланные сервером и прошедшие предварительную обработку;
  • строка со статусом выполнения (textStatus);
  • объект jqXHR (в версиях до 1.5 вместо jqXHR используется XMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.
  • timeout
    Тип: число.
    Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».
    Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.
    В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.
  • traditional
    Тип: логическое значение.
    Установите значение этого параметра в true, для того, чтобы использовать традиционные параметры преобразования (сериализации).
  • type (по умолчанию: ‘GET’ )
    Тип: строка.
    Аналог параметру method . Параметр используется в jQuery младше 1.9.0
  • url (по умолчанию: адрес текущей страницы )
    Тип: строка.
    Определяет адрес, на который будет отправлен запрос.
  • username
    Тип: строка.
    Имя пользователя для аутентификации на сервере, если это требуется.
  • xhr (по умолчанию: ActiveXObject в IE, the XMLHttpRequest в других браузерах )
    Тип: функция.
    Функция, которая предоставит объект XMLHttpRequest. По умолчанию, для браузеров IE этим объектом является ActiveXObject, а в остальных случаях это XMLHttpRequest. С помощью этого параметра вы можете внедрить собственную версию этого объекта.
  • xhrFields
    Тип: объект.
    Параметр появился в jQuery-1.5.1 Набор пар <имя: значене>для изменения/добавления значений соответствующих полей объектаXMLHttpRequest. Например, можно установить его свойство withCredentials в true, при выполнении кроссдоменного запроса:

    Использование Ajax: часть I

    Ajax обозначает асинхронный JavaScript и XML, но в наши дни это слово является полноценным само по себе. Ajax позволяет асинхронно делать запросы на сервер, то есть вкратце, ваш запрос происходит на заднем фоне и не мешает пользователю взаимодействовать с вашим HTML документом. Наиболее распространенное использование для Ajax – это отправка данных с элемента form. Преимущество этого заключается в том, что браузеру не нужно загружать новый документ, чтобы отобразить ответ сервера, и вы можете использовать стандартные функции jQuery, чтобы без проблем отобразить данные внутри документа.

    Поддержка Ajax, которая будет использоваться в этой главе, встроена в основную библиотеку jQuery, хотя я еще кратко опишу в конце главы полезный плагин. jQuery не переделывает Ajax, скорее делает существующий браузерный Ajax API проще в использовании.

    В этой главе я собираюсь рассказать о сокращенных и удобных методах Ajax. Это простые методы, которые делают использование Ajax относительно быстрым и простым. В главе 15 я опишу низкоуровневый jQuery Ajax API, на котором базируются эти методы. Однако, как вы увидите, низкоуровневый API не совсем низкоуровневый, и вы им пользуетесь в основном тогда, когда сокращенные и удобные методы делают не совсем то, чего вы хотите. В таблице 14-1 представлено краткое содержание этой главы.

    Таблица 14-1: Краткое содержание главы

    jQuery.ajax()

    Содержание:

    jQuery.ajax( url [, settings ] ) Возвращает: jqXHR

    Описание: Выполняет асинхронный HTTP (Ajax) запрос.

    Добавлен в версии: 1.5 jQuery.ajax( url [, settings ] )

    Добавлен в версии: 1.0 jQuery.ajax( [settings ] )

    Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:

    Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .

    (добавлен в версии: 1.5)

    В jQuery 1.5, свойство withCredentials не будет распространено на нативный объект XHR и таким образом CORS запросы требуя его будет игнорировать этот флаг. По этой причине, мы рекомендуем использовать jQuery 1.5.1+.

    (добавлен в версии: 1.5.1)

    Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load() , которые более простые в использовании. Если требуется менее распространенные варианты , через, $.ajax() Вы можете более гибко скофигурировать запрос.

    В простейшем виде, функция $.ajax() может быть вызвана без аргументов:

    Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup() .

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

    Объект jqXHR

    Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML , а также метод getResponseHeader() . Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.

    Начиная с jQuery 1.5.1, объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод .overrideMimeType() может быть использован в обработчике beforeSend() , например, для изменения поля заголовка content-type :

    Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

      jqXHR.done(function( data, textStatus, jqXHR ) <>);

    Альтернатива создания обработчика success , подробнее смотрите на deferred.done() .

    jqXHR.fail(function( jqXHR, textStatus, errorThrown ) <>);

    Альтернатива создания обработчика error , метод .fail() заменяет устаревший метод .error() . Смотрите подробнее deferred.fail() .

    jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) < >); (добавлен в версии jQuery 1.6)

    Альтернатива создания обработчика complete , метод .always() заменяет устаревший метод .complete() .


    В ответ на успешный запрос, аргументы функции те же самые что и у .done() : data, textStatus и объект jqXHR. Для ошибочных зпросов аргументы те же самые что и у .fail() : объект jqXHR, textStatus и errorThrown. Смотрите подробнее deferred.always() .

    jqXHR.then(function( data, textStatus, jqXHR ) <>, function( jqXHR, textStatus, errorThrown ) <>);

    Включает в себя функциональность методов .done() и .fail() , что упрощает (начиная с jQuery 1.8) проще управлять объектом Promise. Смотрите подробнее deferred.then() .

    Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.

    Ссылка this внутри всех обработчиков указывает на объект заданный в параметре context переданные в аргумент settings метода $.ajax ; если context не указан, то this указывает на объект settings.

    Для обеспечения обратной совместимости с кодом XMLHttpRequest , в объекте jqXHR предоставляет следующие свойства и методы:

    • readyState
    • status
    • statusText
    • responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
    • setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
    • getAllResponseHeaders()
    • getResponseHeader()
    • statusCode()
    • abort()

    Механизма onreadystatechange не предусмотрено, так как done , fail , always и statusCode охватывает все возможные требования.

    Очередность функций обратного вызова

    Все параметры beforeSend , error , dataFilter , success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.

    С версии jQuery 1.5 функции fail и done , и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы, которые реализуют внутренности обработчиков метода $.ajax() .

    Функции обратного вызова предоставленные методом $.ajax() следующие:

    1. beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.
    2. error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR , строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: «abort», «timeout», «No Transport».
    3. dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success .
    4. success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR .
    5. Promise обработчик — .done() , .fail() , .always() и .then() — выполняются, в том порядке в котором зарегистрированы.
    6. complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR , отформатированную строку со статусом успеха или ошибки.

    Типы данных

    Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success . Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type , но может быть явно указан при помощи опции dataType . Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.

    Возможны следующие типы данных: text , html , xml , json , jsonp и script .

    Если указан text или html , никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR .

    Если указан xml , то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success . XML документ доступен через свойство responseXML объекта jqXHR .

    Если указан json , то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success . Полученный JSON объект доступен через свойство responseJSON объекта jqXHR .

    Если указан script , то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success .

    Если указан jsonp , $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=? . Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success .

    Отправка данных на сервер

    По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type . Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.

    Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData . Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.

    Расширенные настройки

    Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend() , .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false .

    Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.

    Ajax запросы ограничены по времени, так что ошибки могут быть перехвачены и обработаны, чтобы обеспечить наилучшее взаимодействие с пользователем. Таймауты запроса обычно либо установлены по умолчанию, либо установлены глобально при помощи $.ajaxSetup() вместо того чтобы указывать параметр timeout для каждого отдельного запроса.

    По умолчанию, запросы всегда совершаются, но браузер может предоставить ответ из своего кэша. Для запрета на использования кэшированных результатов установите значение параметра cache в false . Для того чтобы вызвать запрос с отчетом об изменении ресурса со времени последнего запроса установите значение параметра ifModified в true .

    Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг

    Урок — jQuery.ajax()

    ↑ Ajax
    Урок — jQuery.ajax()
    ← Предыдущий урок

    Метод jQuery.ajax() дает команду выполнить асинхронных HTTP (Ajax) запрос.

    Синтаксис метода jQuery.ajax()

    • url — string, путь на который следует отправить данные.
    • settings — PlainObject, набор пар ключ-значение, для указания параметров AJAX- запроса. Любой параметр не обязательный. По умолчанию параметры могут быть выставлены в методе jQuery.ajaxSetup().

    Метод jQuery.ajax() возвращает jqXHR-объект.

    Описание метода jQuery.ajax().

    Метод jQuery.ajax() лежит в основе всех AJAX-запросов отправляемых бибдиотекой jQuery. В большинстве случаев нет необходимости использовать на прямую метод jQuery.ajax(), вместо него можно использовать альтернативные методы jQuery.get() и jQuery.post(), которые проще в использовании (меньше параметров). Однако метод jQuery.ajax() гибче в использовании.

    В простейшем случае метод jQuery.ajax() может быть вызван без параметров:

    В этом примере все параметры берутся из jQuery.ajaxSetup().

    Результатом работы будет получение содержимого текущей страницы с сервера, однако ничего с полученными данными происходить не будет.

    jqXHR-объект.

    Метод jQuery.ajax() возвращает jqXHR-объект. jqXHR-объект является расширением XMLHttpRequest-объекта браузера. Например, он содержит свойство responseText, свойство responseXML, метод getResponseHeader(), метод overrideMimeType().

    В случае, если транспортный механизм не является XMLHttpRequest-объектом (например, JSONP-запрос), библиотек jQuery попытается использовать XMLHttpRequest-объект там, где это возможно.

    jqXHR-объекты возвращаемые методом jQuery.ajax() реализуют интерфейс Promise, предоставляя им все свойства, методы и поведение Promise. Эти методы принимают одну или несколько функций в качестве аргументов, вызываемые методом jQuery.ajax(), когда запрос завершается. Такой подход позволяет назначить несколько обработчиков на один AJAX-запрос и даже после отправки запроса. (Если запрос завершен, обработчик будет исключен.)


    Доступны следующие методы интерфейса Promise в jqXHR-объекте:

    Метод jqXHR.done().

    Метод jqXHR.done() являтся альтернативой обработчика успешного заврешения AJAX-запроса. Заменяет устаревший метод jqXHR.success().

    Метод jqXHR.fail().

    Метод jqXHR.fail() являтся альтернативой обработчика ошибки при AJAX-запросе. Заменяет устаревший метод jqXHR.error().

    Метод jqXHR.always().

    Метод jqXHR.always() являтся альтернативой обработчика заврешения AJAX-запроса. Заменяет устаревший метод jqXHR.complete().

    Обратите внимание, что при успешном запросе, аргументы метода jqXHR.always() такие же, как у метода jqXHR.done(), а при AJAX-запросе с ошибкой такие же как у метода jqXHR.fail().

    Метод jqXHR.then().

    Метод jqXHR.then() включает в себя функциональность методов jqXHR.done() и jqXHR.fail().

    Методы jqXHR.success(), jqXHR.error(), jqXHR.complete() являются устаревшими с версии jQuery 1.8 и в будущем будут удалены. Используйте, соответственно, методы jqXHR.done(), jqXHR.fail(), jqXHR.always().

    Ссылка this, внутри обработчика указывает, по умолчанию указывает на настройки AJAX-вызова, но может быть изменена с помощью свойства jqXHR.contexts:

    Для обратной совместимости jqXHR-объекта и XMLHttpRequest-объекта, jqXHR-объект будет выставлять следующие свойства и методы:

    • readyState
    • status
    • statusText
    • responseXML и/или responseText, когда AJAX-ответ вернул xml и/или text, соответственно.
    • setRequestHeader(name, value), который отличается от стандартного заменой старого значения на новое, а не объединеним старого и нового значения.
    • getAllResponseHeaders()
    • getResponseHeader()
    • statusCode()
    • abort()

    Нет обработчика onreadystatechange, однако методы jqXHR.done(), jqXHR.fail(), jqXHR.always() с параметром statusCode охватывают все возможные варинаты.

    Очередь вызова обработчиков.

    Методы jqXHR позволяют добавлять несколько обработчиков для каждого события, по принципу очереди «Первый Вошел Первый Вышел» (FIFO — First In First Out).

    Выполнение обработчиков jQuery.ajax() заключаются в следующем:

    1. Вызываются обработчки назначенные beforeSend. В качестве аргументов передаются jqXHR-объект и Settings-объект (настроеки).
    2. Вызываются обработчики назначенные с помощью jqXHR.error(). В качестве аргументов пердается jqXHR-объект, строка указывающая тип ошибки, Exception-объект (исключение). Некоторые встроенные ошибки будут передаваться строкой в Exception-объекте.
    3. После успешного получения данных вызываются обработчики dataFilter(). Обработчики получают возвращаемые данные и значения типов данных, должен вернуть (возможно внести изменения) данные, чтобы перейти к обработчику отвечающему за успешность AJAX-запроса.
    4. В случае успешного AJAX-запроса данные передаются в метод success(). Передаются возвращаемые данные, строка (с кодом успешного завершения), jqXHR-объект.
    5. Обработчики Promise: .done(), .fail(), .always(), .then() — вызываются в порядке их регистрации.
    6. В завершении запроса вызываются обработчик .complete(), как в случае ошибки, так и в случае успешного завершения. Обработчик получает jqXHR-объект и строку с кодом (с кодом ошибки или с кодом успешного завершения).

    Метод jQuery.ajax() опирается на информацию полученную от сервера о типе передаваемых данных. Если сервер сообщает о передаче данных в формате XML, то результат может быть обработан с помощью обычных методов XML или селекторов jQuery. Если передан другой тип, например HTML, данные рассматриваются как текст.

    Различные методы обработки могут быть достигнуты с помощью параметра dataType. Параметр dataType может иметь следующие значения:

    Данные типов text и xml возвращаются без обработки. Данные просто передаются в обработчик success, либо через jqXHR.responseText, либо через jqXHR.responseXML.

    Примечение: Мы должны убедиться, что MIME-тип сообщаемый сервером соответсвует параметру dataType. В частности XML должен быть объявлен на сервере как text/xml или application/xml, для корректных результатов.

    Если указан тип html, любой JavaScript-код внутри полученных данных будет выполнен до возврата HTML в виде строки. Кроме того, сценарий будет выполнять JavaSctipt-код, который вытащил обратно с сервера, и затем ничего не вернет.

    Если указан тип JSON, то происходит анализ данных и создается JavaScript-объект. Для этого используется jQuery.parseJSON(), если браузер поддерживает этот метод, в противном случае используется конструктор. Если данные JSON-строки не корректны, то будет выдана ошибка (смотрите json.org, для дполнительной информации). Формат JSON очень удобен для передачи структурированных данных, также легко разбирается в структуры JavaScript. Тип JSONP следует указывать в случае кроссдоменного запроса.

    Если указан тип JSONP, то к строку запроса добавляется параметр «callback». Сервер должен обернуть JSON-данные в значение параметра callback, чтобы сформировать правильный ответ. Также мы можем указать название параметра отличного от callback с типом JSON еще до вызова jQuery.ajax().

    При получении данных с удаленных серверов (которые возможно только при помощи тега

    Вызов php метода ajax запросом. Магия или руки не оттуда растут?

    Всем привет) I need your healp)

    Проблема с аяксом. То ли я не правильно понимаю принципы работы аякс запросов, то ли задачу не правильно ставлю, или в коде делаю ошибки.

    Задача такая, мне нужно аяксом вызывать методы php класса.

    Я погуглил нашел решение, причем которое совпадает с тем, как я себе это и представляю, но оно нифига не работает, как надо.

    При клике должен срабатывать ajax запррос, который в POST передает переменную action, в скрипте эта переменная проверяется, если есть, то вызывается метод switcher, в котором в зависимости от значения вызывается метод класса. Но этого не происходит. $_POST[‘action’] пуста. Если попробовать в import.php просто тупо ее вывести, ничего не выводится. Я знаю, что ajax работает так — отправляет запрос на сервер XMLHttprequest, получает ответ, выводит. Но на сколько я знаю, им можно ведь и get и post запросы отправлять. Так ли это? Как реализовать то, что мне нужно?

    Добавлено через 1 час 48 минут
    Какжется я наконец начал догонять. Чтобы получить на странице обработчика переменную пост, нужно, в ajax в колбек функции отлавливать ответ сервера и его выводить. Типа только так можно подменять данные. Но собственно вопрос такой, а как можно регулировать, то что будет содержаться в ответе сервера? Я думал немного по другому. Я думал так — мы отправляем аякс запрос серверу, с какими-то параметрами, например data: . И эти данные тупо отправляются на указанную в url страницу. А там мы с ними, что хотим то и делаем. А в respounse, ответ от сервера я думал мы можем из php метода отправить любые данные наз ajax скрипту, написав, например return array(«msg» => «запрос прошел удачно»).

    Объясните, как это работает? Подробнее. Обязательно ли ответом от сервера подменять данные на странице, выводя respounse? И как можно в respounse засунуть например массив с параметрами?

    Добавлено через 48 минут
    Сейчас в очередной раз читаю статьи про работу ajax http://javascript.ru/ajax/intro . Из всего этого пока понял, что никакими return ответ от сервера не возвращается. В ответ от сервера приходит только то, что мы выводим echo, print_r и тому подобное. То есть если я хочу передать в ответ ajax скрипту массив, то мне нужно написать, как ни странно:

    А я раньше думал, что нужно передавать в return массив.

    Довольно непонятная технология. Я просто видел, как в одном движке это все работает именно на return, в Moguta.cms, там это похоже прозрачно реализовано. У них идет функция, которая возвращает массив с ошибкой, и потом в ajax написано, что-то вроде $(«.staus»).html(response.msg);

    Добавлено через 37 минут
    И если кто соблаговолит прочитать эту тему, может подскажете, как разбирать в js, массв полученный в ответе от сервера? Обязательно ли это должно быть в формате json?

    Можно ли делать ajax-запрос внутри ajax-запроса?

    Делаю ajax-запрос внутри ajax-запроса:

    Всё работает, но не уверен, правильно ли так делать?

    1 ответ 1

    Конечно можно, это обычная асинхронная практика. Нужно ли так делать в конкретном случае, это отдельный вопрос.

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript ajax или задайте свой вопрос.

    Похожие

    Подписаться на ленту

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

    Добавить комментарий
    Javascript