Subsys_JsHttpRequest подкачка данных без перезагрузки страницы (AJAX)


Оглавление (нажмите, чтобы открыть):

Основы XMLHttpRequest

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Объект XMLHttpRequest (или, как его кратко называют, «XHR») даёт возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML.

Использовать его очень просто.

Пример использования

Как правило, XMLHttpRequest используют для загрузки данных.

Для начала посмотрим на пример использования, который загружает файл phones.json из текущей директории и выдаёт его содержимое:

Далее мы более подробно разберём основные методы и свойства объекта XMLHttpRequest , в том числе те, которые были использованы в этом коде.

Настроить: open

Этот метод – как правило, вызывается первым после создания объекта XMLHttpRequest .

Задаёт основные параметры запроса:

method – HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.

URL – адрес запроса. Можно использовать не только http/https, но и другие протоколы, например ftp:// и file:// .

При этом есть ограничения безопасности, называемые «Same Origin Policy»: запрос со страницы можно отправлять только на тот же протокол://домен:порт , с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.

async – если установлено в false , то запрос производится синхронно, если true – асинхронно.

«Синхронный запрос» означает, что после вызова xhr.send() и до ответа сервера главный поток будет «заморожен»: посетитель не сможет взаимодействовать со страницей – прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.

«Асинхронный запрос» означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.

  • user , password – логин и пароль для HTTP-авторизации, если нужны.

Заметим, что вызов open , в противоположность своему названию ( open – англ. «открыть») не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом send .

Отослать данные: send

Именно этод метод открывает соединение и отправляет запрос на сервер.

В body находится тело запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST – основные данные как раз передаются через body .

Отмена: abort

Вызов xhr.abort() прерывает выполнение запроса.

Ответ: status, statusText, responseText

Основные свойства, содержащие ответ сервера:

status HTTP-код ответа: 200 , 404 , 403 и так далее. Может быть также равен 0 , если сервер не ответил или при запросе на другой домен. statusText Текстовое описание статуса от сервера: OK , Not Found , Forbidden и так далее. responseText Текст ответа сервера.

Есть и ещё одно свойство, которое используется гораздо реже:

Если сервер вернул XML, снабдив его правильным заголовком Content-type: text/xml , то браузер создаст из него XML-документ. По нему можно будет делать запросы xhr.responseXml.querySelector(«. «) и другие.

Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом JSON.parse(xhr.responseText) .

Синхронные и асинхронные запросы

Если в методе open установить параметр async равным false , то запрос будет синхронным.

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

Если синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.

Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.

Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.

Для того, чтобы запрос стал асинхронным, укажем параметр async равным true .

Если в open указан третий аргумент true (или если третьего аргумента нет), то запрос выполняется асинхронно. Это означает, что после вызова xhr.send() в строке (1) код не «зависает», а преспокойно продолжает выполняться, выполняется строка (2) , а результат приходит через событие (3) , мы изучим его чуть позже.

Полный пример в действии:

Событие readystatechange

Событие readystatechange происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть «текущее состояние запроса» в свойстве xhr.readyState .

В примере выше мы использовали только состояние 4 (запрос завершён), но есть и другие.

Запрос проходит их в порядке 0 → 1 → 2 → 3 → … → 3 → 4 , состояние 3 повторяется при каждом получении очередного пакета данных по сети.

Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос digits , пересылая по строке из 1000 цифр раз в секунду.

При состоянии readyState=3 (получен очередной пакет) мы можем посмотреть текущие данные в responseText и, казалось бы, могли бы работать с этими данными как с «ответом на текущий момент».

Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте.

Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый – и разрыв может возникнуть между ними.

Получится, что при очередном readyState в конце responseText будет байт-полсимвола, то есть он не будет корректной строкой – частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы.

HTTP-заголовки

XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

Для работы с HTTP-заголовками есть 3 метода:

Устанавливает заголовок name запроса со значением value .

Нельзя установить заголовки, которые контролирует браузер, например Referer или Host и ряд других (полный список тут).

Это ограничение существует в целях безопасности и для контроля корректности запроса.

Особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.

Повторные вызовы лишь добавляют информацию к заголовку, например:

Возвращает значение заголовка ответа name , кроме Set-Cookie и Set-Cookie2 .

Возвращает все заголовки ответа, кроме Set-Cookie и Set-Cookie2 .

Заголовки возвращаются в виде единой строки, например:

Между заголовками стоит перевод строки в два символа «\r\n» (не зависит от ОС), значение заголовка отделено двоеточием с пробелом «: » . Этот формат задан стандартом.

Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.

Таймаут

Максимальную продолжительность асинхронного запроса можно задать свойством timeout :

При превышении этого времени запрос будет оборван и сгенерировано событие ontimeout :

Полный список событий

Современная спецификация предусматривает следующие события по ходу обработки запроса:

  • loadstart – запрос начат.
  • progress – браузер получил очередной пакет данных, можно прочитать текущие полученные данные в responseText .
  • abort – запрос был отменён вызовом xhr.abort() .
  • error – произошла ошибка.
  • load – запрос был успешно (без ошибок) завершён.
  • timeout – запрос был прекращён по таймауту.
  • loadend – запрос был завершён (успешно или неуспешно)

Используя эти события можно более удобно отслеживать загрузку ( onload ) и ошибку ( onerror ), а также количество загруженных данных ( onprogress ).

Ранее мы видели ещё одно событие – readystatechange . Оно появилось гораздо раньше, ещё до появления текущего стандарта.

В современных браузерах от него можно отказаться в пользу других, необходимо лишь, как мы увидим далее, учесть особенности IE8-9.

IE8,9: XDomainRequest

В IE8 и IE9 поддержка XMLHttpRequest ограничена:

  • Не поддерживаются события, кроме onreadystatechange .
  • Некорректно поддерживается состояние readyState = 3 : браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу responseText до того, как он будет до конца получен.

Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект XDomainRequest , который реализовывал часть возможностей современного стандарта.

А обычный XMLHttpRequest решили не трогать, чтобы ненароком не сломать существующий код.

Мы подробнее поговорим про XDomainRequest в главе XMLHttpRequest: кросс-доменные запросы. Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 – вместо new XMLHttpRequest() нужно использовать new XDomainRequest .


Теперь в IE8,9 поддерживаются события onload , onerror и onprogress . Это именно для IE8,9. Для IE10 обычный XMLHttpRequest уже является полноценным.

IE9- и кеширование

Обычно ответы на запросы XMLHttpRequest кешируются, как и обычные страницы.

Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например Cache-Control: no-cache .

Впрочем, использовать заголовки типа Expires , Last-Modified и Cache-Control рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.

Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.

Например, вместо xhr.open(‘GET’, ‘service’, false) написать:

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

Итого

Типовой код для GET-запроса при помощи XMLHttpRequest :

Мы разобрали следующие методы XMLHttpRequest :

  • open(method, url, async, user, password)
  • send(body)
  • abort()
  • setRequestHeader(name, value)
  • getResponseHeader(name)
  • getAllResponseHeaders()
  • timeout
  • responseText
  • responseXML
  • status
  • statusText
  • onreadystatechange
  • ontimeout
  • onerror
  • onload
  • onprogress
  • onabort
  • onloadstart
  • onloadend

Задачи

Выведите телефоны

Создайте код, который загрузит файл phones.json из текущей директории и выведет все названия телефонов из него в виде списка.

Исходный код просто выводит содержимое файла (скачайте к себе):

AJAX — как сделать запрос к PHP-коду без перезагрузки страницы

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде «Как выполнить функцию PHP из JavaScript-кода?» или «Как отправить форму без перезагрузки?», она напросилась в этом разделе сама самой.

Итак, AJAX — это Asynchronous Javascript And XML — асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный — это и есть то самое, чего все так хотят — выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript — язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее — вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get — чуть позже.

3) XML — в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX — это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2 . Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен — объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты — не желательно передавать чувствительные данные, например — пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно — трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Мастер Йода рекомендует:  20 свежих инструментов для разработчиков

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов — с помощью объекта XMLHttpRequest и методов jQuery — $.post и $.get.

В качестве примера используем следующий «скрипт»:

В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange — функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая — когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) «GET» — тип запроса
2) «hello.php?name=Webkill» — URL запроса: файл hello.php и один параметр name.
3) true — асинхронность. Если false — то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр — null (позже, через этот параметр будут передаваться данные тела POST-запроса).

Javascript

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) «hello.php» — часть URL без GET-параметров
2) — параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае «успеха»

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

Javascript

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open — тип запроса, и теперь мы передаём данные в метод send в формате JSON.

Javascript

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST — попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире — загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

Как отправить форму без перезагрузки страницы (AJAX)

Автор: Сергей Никонов

В этой статье мы расскажем как отправить форму в фоновом режиме без перезагрузки страницы(AJAX), с помощью jquery, php. В результате работы скрипта, сервер будет отправлять данные в формате JSON и клиент будет получать данные в этом же формате.

Что такое AJAX

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

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

Реализация отправки формы без перезагрузки страницы

Наш демонстрационный проект будет состоять из трех файлов:

index.php — это главная страница с формой
ajax.js — это javascript файл с логикой ajax обработки формы
action_ajax_form.php — это серверная часть нашего проекта, обрабатывает данные полученные из формы и возвращает результат в формате JSON

Создадим первый файл нашего AJAX проекта под названием index.php с таким содержимым:

Мы подключили библиотеку Jquery и наш javascript файл отвечающий за взаимодействие с кнопкой отправки форми, с файлом action_ajax_form.php.

Обратите внимание, что метод отправки формы у нас POST, задан . Также после формы мы добавили div c >

Также нам нужно создать второй файл — ajax.js

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку Отправить, слушатель срабатывает и вызывает второй метод sendAjaxForm.

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это >action_ajax_form.php который отвечает за серверную часть (обработка формы).

И третий файл под названием action_ajax_form.php

action_ajax_form.php — обработчик формы на стороне сервера. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.

Выводы

Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код AJAX формы, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

Если есть вопросы, относительно этой статьи, оставляйте свои комментарии и мы попробуем помочь разобраться, если что-то не заработает.

Для того, чтобы посмотреть видео, зарегистрируйтесь в личном кабинете

Отправка произвольной формы на AJAX без перезагрузки страницы

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

Реализация AJAX довольно сложна с технической точки зрения. На самом деле происходит работа API XMLHttpRequest, который и выполняет всю работу. Чтобы упростить код, используются функции-«обертки», которые освобождают нас от сложного программирования XMLHttpRequest. В jQuery для этого используются функци ajax , а также её «модификация» post . При этом, если jQuery не нужна, то в Сети можно найти другие библиотеки, реализующие функционал AJAX, например Selector (которая вообще выступает как легковесная замена jQuery).

Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.

Что можно отправлять через AJAX

Многие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.

На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.

Общая схема работы

Почти всегда это происходит так:

  • На html-странице создается форма с нужными полями.
  • Перед отправкой, данные формы серилизуются и данные уходят к php-обработчику на сервере.
  • Обработчик, выполнив свою работу, возвращает ответ. Это может быть какие-то данные или готовый html-код.
  • Этот ответ размещается в заданном блоке на странице.

Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.

Начальный код

Вначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.

Теперь создадим простую форму и блок ответа.


Первые особенности

В первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action. Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id, по которому и сможем идентифицировать форму.

Кнопка имеет тип submit. На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.

Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:

Дальше в js-коде нужно будет перехватывать не submit (формы), а click (кнопки).

Далее. Поля формы заданы в виде «массива» f . В php-обработчике мы получим сразу упорядоченные данные.

Блок #my_message служит для вывода ответа.

Если используется форма, то лучше всё-таки использовать именно submit, поскольку отправка формы может происходить и без нажатия на кнопку: Enter на любом текстовом input-поле. Это типовое поведение браузеров.

Первый вариант (submit)

При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:

Чтобы заблокировать отправку и перезагрузку страницы, функция возвращает false . Саму же обработку мы разместим вместо alert() , но перед этим разберемся что предлагает jQuery для отправки аякс-запроса.

Функции для AJAX

Функция $.ajax очень мощная и содержит массу параметров и возможностей. В «типовом» варианте она используется примерно так:

То есть указывается тип запроса (method), адрес обработчика (url), данные (data, обычно в JSON-формате), а также функции, которые реагируют на ответ (в этом примере done).

На практике же гораздо удобней использовать другую функцию — $.post :

Функция $.post эквивалентна $.ajax с предопределенными параметрами.

Привожу полный код, чтобы вы не запутались:

Данные мы отправляем серилизованные с помощью функции serialize() , а в ответной функции скрываем форму (hide()), а в #my_message выводим ответ сервера.

Обработчик размещаем в файле post.php в таком виде:

То есть он пока ничего не делает, а просто выдаёт текст.

Здесь важный момент: адрес обработчика указывается так, чтобы он был доступен по http-адресу. Грубо говоря, адрес можно вбить в браузер. Это особенно актуально, когда используется сложная структура страниц или js-файл выносится в отдельный каталог. В некоторых случаях оптимальным будет указать полный http-адрес к php-файлу, например http://сайт/post.php. Перед тем, как работать с аякс-запросом, убедитесь в корректности адреса обработчика, иначе запрос уйдёт «в никуда», а вы будете гадать, почему он не работает. 🙂

Ответ от сервера мы получаем в виде простого текста, поэтому мы его просто выводим в блоке #my_message как есть.

Второй вариант (button)

Теперь рассмотрим второй вариант — отправку данных с помощью произвольного элемента по клику.

Как видите, принципиально здесь ничего не поменялось, кроме того, что мы отслеживаем click на кнопке #my_form_send (которая не обязательно может быть кнопкой, а например блоком span).

Какой вариант использовать, зависит от задач вёрстки. В некоторых случаях кнопку отправки нужно вынести за пределы формы и в этом случае придется использовать click-вариант.

PHP-обработчик

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

Еще раз отправив форму мы увидим содержимое $_POST :

Здесь без труда угадываются поля форм.

Произвольные данные для отправки

Отправка данных происходит в специальном (серилизованном) формате. Функция jQuery serialize() собственно и приводит данные формы к этому формату, а на стороне сервера, PHP сам сформирует обычный массив. Всё это происходит в фоновом режиме, поэтому дополнительные преобразования не нужны.

Рассмотрим вариант, когда нужно отправить не форму, а какие-то произвольные данные, наример массив данных.

Если вместо фрагмента

то php-обработчик покажет пустой массив. То есть данные не прошли. Для того, чтобы данные были получены их следует оформить:

Более удобным (и распростанённым) будет второй вариант который представляет собой привычный js-объект/массив:

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

Приём сложных данных от сервера

Теперь рассмотрим случай, когда сервер должен вернуть не просто текст, а какие-то данные, например массив.

Для этого в php-скрипте следует отдавать специально преобразованный в JSON-формат php-массив. К счастью разработчики PHP всё уже предусмотрели. 🙂

Пусть у нас обработчик будет post-json.php :

То есть на входе обычный php-массив, который кодируется функцией json_encode() . Теперь, в сообщении на странице мы увидим:

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

Здесь мы добавили тип ответа, поэтому переменная msg уже не текст, а готовый js-объект, с которым мы и работаем соответствующим образом. Для контроля можно использовать Консоль браузера (F12 в FireFox) с помощью console.log() .

Обработка входящих данных на сервере

Теперь рассмотрим вопросы приёма данных на сервере. Поскольку обработчик доступен прямо из браузера, то его следует как-нибудь защитить от прямого вызова. Полноценно сделать это можно в рамках CMS или php-фреймворка, вроде LPF, поэтому я покажу лишь минимальные приёмы.

В первую очередь следует заблокировать работу скрипта, если нет входящих POST-данных. В начале php добавьте такой код:

Теперь при прямом вызове этого скрипта, будет выдаваться сообщение и работа скрипта будет прекращена.

Во вторую очередь следует проверять все входящие данные из формы и по возможности их так обрабатывать, чтобы исключить возможные проблемы безопасности. Сама форма должна использовать HTML-атрибуты для полей, чтобы обеспечить первоначальную валидацию данных. Например, если поле предназначено для электропочты, то следует указать тип email — браузер не позволит выполнить отправку неверных данных.

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

Отправка email-почты

Это достаточно типовая задача, которая решается через submit-отправку. Пусть будет простая форма из двух полей.

Обработчик у нас в post-email.php. На входе ($_POST) получаются такие данные:

Поскольку все данные в массиве с ключом f , то мы вводим ещё одно условие — если такого ключа нет, то это ошибочные данные.

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

Дальше вынесем входящие данные в отдельные переменные:

С помощью trim() удаляем возможные крайние пробелы, а strip_tags() удаляет все html/php-тэги.

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

Аналогично поступаем с именем, если оно оказалось пустым.

Вот теперь все проверки пройдены и можно выполнить непосредственную отправку почты. Я приведу полный код post-email.php:

Вы можете использовать данный пример как заготовку для своих задач.

Программирование AJAX-сайтов с использованием JsHttpRequest

Традиционно World Wide Web организуется как взаимосвязанный набор HTML-страниц, перемещение между которыми осуществляется посредством гиперссылок. Щелкнув по такой ссылке, пользователь открывает в своем браузере ту или иную HTML-страницу, а о старой «забывает». При этом страницы чаще всего являются не статическими (раз и навсегда сохраненными на сервере), а динамическими, то есть каждый раз строятся заново (по запросу пользователя) на основе информации, хранящейся в базе данных сайта.

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

AJAX (Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это технология загрузки данных с сервера, при использовании которой страница, открытая в браузере, не заменяется на новую целиком. Вместо этого обновляется только определенный блок на странице. Самое главное в AJAX — именно отсутствие перехода, что делает web-сайт очень похожим на оконное GUI-приложение.

В настоящее время строгого стандарта создания AJAX-приложений не существует, а вместо этого применяются различные библиотеки и средства, облегчающие работу программиста.

В этой статье мы рассмотрим популярную в России библиотеку JsHttpRequest, разработанную автором данной статьи. Ключевые особенности этой библиотеки: поддержка PHP, простота использования, «прозрачная» работа с русскоязычными (и другими) кодировками, возможность закачивать файлы на сервер методом AJAX, а также отличная кроссбраузерность (работает даже в очень старых браузерах).

Примечание 1

Домашняя страница библиотеки — http://dklab.ru/lib/JsHttpRequest. Там же вы сможете прочитать полную документацию, а также скачать примеры использования библиотеки.

Компоненты AJAX-приложения

Любое приложение, построенное по технологии AJAX, состоит из двух взаимосвязанных между собой частей: клиентской и серверной.

Клиентская часть системы (назовем ее frontend’ом) — некоторый код на языке программирования JavaScript, выполняемый непосредственно в браузере пользователя. Его задача — послать запрос на сервер, дождаться от него ответа, а затем принять данные, обработать их и отобразить в заранее отведенной для этого области без перезагрузки всей страницы.

Серверная часть системы (backend-приложения) — это скрипт, который запускается на сервере по запросу клиентской части. Он выполняет всю основную работу по генерации данных, которые будут в дальнейшем показаны пользователю. Здесь мы рассматриваем только PHP-сценарии, поскольку они штатно поддерживаются в JsHttpRequest.

Таким образом, чтобы разрабатывать AJAX-приложения, необходимо знать как минимум два языка программирования: серверный (PHP) и клиентский (JavaScript).

Пример использования JsHttpRequest

Проиллюстрируем простоту использования JsHttpRequest. Для этого рассмотрим пример AJAX-приложения, вычисляющего значение MD5 (криптографическая хэш-функция) от введенной пользователем строки или закачанного им файла. Вычисление происходит на сервере (функция md5() встроена в PHP, но ее нет в JavaScript), а результат отображается в специальном блоке на странице, открытой в браузере. Для загрузки используется технология AJAX.

Примечание 2

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

См. код клиентской и серверной части приложения. Листинги программ также находятся на CD: клиентская часть в файле md5_frontend.html, а серверная — в файле md5_backend.php.

Ключевые возможности JsHttpRequest


Функциональность, предоставляемая библиотекой:

  • «прозрачная» работа с русскоязычными кодировками (как в PHP, так и в JavaScript). Язык JavaScript является полностью Unicode-ориентированным, в то время как PHP-скрипты, как правило, пишут с использованием национальных кодировок (например, windows-1251). Преобразование данных из Unicode в windows-1251 и обратно при «ручном» AJAX-программировании очень однообразно и чревато ошибками (в этом может убедиться всякий, кто имеет опыт создания AJAX-приложений без применения библиотек). К счастью, JsHttpRequest берет всю эту работу на себя. Вы можете писать скрипты так, как привыкли к этому раньше, обо всех перекодировках позаботится библиотека;
  • закачка файлов (upload) из браузера на сервер без перезагрузки страницы. Принято считать, что при помощи AJAX невозможно закачивать файлы на сервер. Такое мнение возникло потому, что компонент XMLHttpRequest, встроенный во многие браузеры, действительно, не поддерживает закачку файлов. Тем не менее обходной способ все же существует, и именно он реализуется в JsHttpRequest. Для библиотеки файл представляет собой обычные данные, поэтому она без проблем передает их на сервер;
  • полная поддержка отладочных возможностей PHP. Если в скрипте на серверной стороне происходит ошибка (включая фатальную, например вызов неопределенной функции), клиентская часть имеет возможность корректно ее обработать и вывести диагностику. Помимо данных ответа, ей передается выходной поток скрипта, содержащий текст ошибки PHP. Собственно, в приведенном выше примере мы продемонстрировали это при помощи инструкции echo, но вместо echo могло быть все что угодно, начиная от Notice и заканчивая фатальной ошибкой PHP (например, «вызов неопределенной функции») или даже ошибкой нехватки памяти (превышение значения, заданного директивой memory_limit файла php.ini). Таким образом, отладка AJAX-приложений из сложного и неприятного занятия превращается в нечто обыденное;
  • кроссбраузерность. Библиотека работает в IE5.0+, Mozilla 1.7+, Firefox 1.0+, Opera 7.20+, Safari (здесь «+» означает «в этой и более новых версиях»). Кроме того, код может работать без поддержки ActiveX и XMLHttpRequest (однако если эти возможности включены в браузер, то они автоматически задействуются);
  • передача многомерных структур данных запроса и ответа сервера. Приведенный выше пример AJAX-приложения показывает, что JsHttpRequest может передавать данные на сервер в виде произвольного объекта JavaScript (в нашем случае это был объект < str: “строка”, upl: “элемент закачки” >, см. второй параметр метода query()). Этот объект автоматически трансформируется в привычный PHP-разработчику массив $_REQUEST (автоматически происходят все необходимые преобразования кодировок). И наоборот, PHP-часть приложения передает произвольный массив PHP из серверной части в клиентскую (он сохраняется в глобальной переменной $_RESULT либо в свойстве $JsHttpRequest->RESULT — кому как удобнее). Этот массив можно получить в виде JavaScript-объекта в обработчике результата (в нашем примере это параметр с именем result). Таким образом, JsHttpRequest берет на себя всю работу по преобразованию PHP-массивов в JavaScript-объекты и обратно. Более того, эти массивы и объекты могут иметь произвольную степень вложенности: например, можно создать в PHP массив $_RESULT = array(‘first’ => array(‘second’ => 123)) и получить к его элементу 123 доступ из JavaScript в виде result.first.second;
Javascript

Примечание 3

Итак, работа со структурами данных происходит «родными» средствами языков. Пользователю библиотеки не нужно ничего знать об XML, традиционно используемом в AJAX-программировании.

  • поддержка сессий PHP стандартными средствами. При применении JsHttpRequest вы можете работать с сессиями PHP (массив $_SESSION) привычным образом, никаких дополнительных знаний не требуется.

Работа JsHttpRequest как PHP-модуля для Prototype

Отдельного рассмотрения заслуживает тот факт, что JsHttpRequest может использоваться в качестве PHP-части AJAX-сайта, применяющего библиотеку Prototype.

Примечание

Prototype (http://prototypejs.org) — это популярное средство для упрощения разработки сложных JavaScript-приложений, включающее поддержку AJAX и другие возможности. Вы наверняка о нем слышали, если активно работали с JavaScript.

Итак, после подключения небольшого модуля совместимости (файл JsHttpRequest-prototype.js в дистрибутиве библиотеки) вы можете работать с Prototype так, как привыкли. Но при этом вы пишете PHP-составляющую приложения с использованием JsHttpRequest, а потому получаете в свое распоряжение всю функциональность этой библиотеки (кроссбраузерность, закачка файлов, работа с русскими кодировками, обмен многомерными структурами данных и т.д.). Небольшой пример JavaScript-кода, в котором JsHttpRequest и Prototype работают совместно, приведен в листинге.

В качестве PHP-части можно использовать тот же самый скрипт, что был приведен в предыдущем примере.

Отправка запроса без перезагрузки страницы

Хотела отправить запрос, не перезагружая страницу. Использовала для этого ajax фрэймворк taconite. Посмотрела пример оттуда и решила сделать точно так же. Но мне нужно отправить кое-какие данные и с помощью этих данных удалить некий объект в базе. То есть выбираешь и нажимаешь удалить, потом выходит окошко «Вы точно хотите удалить?», нажав да, он отправляет все данные об этом человеке (которого нужно удалить) и удаляет.

С помощью обычного jsp+servlet запрос отправляется и удаляется. Но мне нужно, чтобы страница не перезагружалась. Поэтому я делаю, как на примере, все получается. Только не знаю, как вставить часть, где должны удалится данные. Как вставить сам запрос delete?

Это отправка метода:

А это сам echo.jsp:

Так не работает. Помогите сделать правильно. Не обязательно taconite, подскажите, как иначе можно сделать без перезагрузки.

Обновление

@StixoTvorec, Я сделала, но проще чем у вас, так как не поняла что означают строки после success , error Сделала и вызвала метод call()

Загрузка файлов AJAX с помощью XMLHttpRequest

Недавно возникла идея состряпать на Sketch, что-нибудь интересное. Хотел залить в свое портфолио на Behance и в итоге, пришла идея реализовать форму для загрузки файлов в AJAX. Немного почитав про XMLHttpRequest, решил реализовать эту идею в рабочее решение.

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

Думаю, нам стоит начать с теории и понять, что это такое XMLHttpRequest и с чем его едят? Советую вам не лениться и немного почитать об этом объекте, ибо, я сам не особо понимал как его применять и для чего. В моем понимании, это был простой метод $.get / $.post , только расширенный. Но, прочитав документацию я понял, что это очень классная вещь и разжевав ее для вас, опишу как можно ясней для чего нам XMLHttpRequest.

# XMLHttpRequest — что это?

Исходя из логических соображений, можно понять, что, XMLHttpRequest — это объект JavaScript. Окей, кэп, это думаю вам понятно. А для чего его применять? XMLHttpRequest мы можем использовать для передачи данных методом GET или POST на протокол HTTP / HTTPS . Проще говоря, на наш сервер. К примеру, сделать авторизацию без перезагрузки страницы или открыть запись на сайте без перезагрузки, например, как в этом блоге.

Конечно, если вы уже работали с подобным, то, должны знать про такие методы, как: [$.get()](http://jquery.page2page.ru/index.php5/Ajax_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BC_GET) , [$.post()](http://jquery.page2page.ru/index.php5/Ajax_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BC_POST) , [$.ajax](http://jquery.page2page.ru/index.php5/Ajax-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81) и т.п. и возникает вопрос, разницы между этими методами и XMLHttpRequest. Большой разницей является то, что XMLHttpRequest дает больше настроек, чем эти методы.

# Как работать с XMLHttpRequest?

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

  • request — создаем объект XMLHttpRequest.
  • open() — с помощью этого метода, мы задаем асинхронное открытие соединения с указанной ссылкой.
  • onreadystatechange — обработчик который отчитывается о своем действии после отправки запроса.
  • readyState — хранит в себе состояние запроса. Ниже описаны варианты.
  • status — HTTP код ответа от сервера. Ответ 200 ОК означает, что запрос прошел успешно и сервер не выдал ошибок. Подробней об ответах читайте в википедии.
  • responseText — хранит в себе текст ответа от сервера, а если говорить проще, то HTML код страницы (в нашем примере выше).
  • send(null) — означает, что запрос будет отсылаться без отправляемых данных серверу. Обычно, содержимое бывает при запросе с методом POST

# Состояния readyState:

  1. Loading
  2. Loaded
  3. Interactive
  4. Complete

И так, думаю вы поняли как работать с XMLHttpRequest и нам можно приступать к дальнейшей разработке нашей формы. Я уже слепил форму и исходя из этой формы, мы сделаем рабочий пример. При этом, мы будем использовать: JavaScript, jQuery, PHP.

Первое, что нам нужно, это локальный сервер. Если вы пользуетесь Windows, то посоветую использовать Open Server или Denwer. Но, из двух вариантов я советую больше Open Server, у него больше настроек и полезных дополнений. Но, если вы владелец Mac (OS X), то советую использовать MAMP PRO (скачивайте сразу крякнутую версию).

Объяснять как установить локальный сервер я не буду, тут разбирайтесь сами. Создайте в корне вашего локального сайта: index.html, script.js, style.css.

Верстать форму мы не будем, а лучше сразу выложу готовый HTML код формы.

Личный блог keyword1109

Программирование, работа с фото-видео, всякие полезности, интересные факты.

вторник, 6 ноября 2012 г.

Получение данных из БД без перезагрузки страницы с помощью AJAX

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

Чтобы не сильно мудрить, я взял за пример случай, когда нужно получить новости определенных категорий на указанную дату. Идея такая: мы отмечаем чекбоксы нужных категорий, указываем дату и нажимаем кнопку «Показать новости»; после этого появляется картинка загрузки и данные загружаются в нужный блок страницы.

Представим ситуацию, когда у нас есть две таблицы (категории и новости) такой структуры:

Одно условие, что у новости может быть только одна категория (связь 1 ко ∞), в противном случае – тут уже совсем другая связь. Представим, что в наших таблицах содержатся такие данные:

categories
5 Спорт
8 Музыка
9 Кино
11 IT

news
3 Название новости 1 Текст новости 1 2012-11-03 5
4 Название новости 2 Текст новости 2 2012-11-03 9
6 Название новости 3 Текст новости 3 2012-11-03 11
7 Название новости 4 Текст новости 4 2012-11-04 5
8 Название новости 5 Текст новости 5 2012-11-04 11
10 Название новости 6 Текст новости 6 2012-11-05 8
11 Название новости 7 Текст новости 7 2012-11-05 11

Как выше указывалось, наши категории будут checkbox-ами, значит, их вывод сделаем примерно таким:
Не трудно заметить, что значениями value наших чекбоксов являются идентификаторы категорий.

Кроме этого у нас указывается дата для получения новостей, и нужна сама кнопка «Показать новости». Во время получения новостей я буду отображать некий индикатор загрузки, для примера я взял такую картинку:

Зачем это надо?! Ну если, например, у вас очень медленный хостинг, или слишком сложный запрос, который долго отрабатывается, тогда надо как-то сообщить пользователю что что-то делается. Чтобы он не нажал кнопку, увидел, что ничего не срабатывает и не ушел со страницы.

Конечно же, наш результат надо куда-то выводить, так что добавим еще и результирующий блок. Будет это, примерно, такой код:
Если разместить данный код, то должна получится, примерно, такая картина:

Категории IT
Кино
Музыка
Спорт

AJAX-форма без перезагрузки страницы

На этом уроке мы научимся отправлять форму без перезагрузки страницы, используя метод AJAX, библиотеки jQuery. Как вообще происходит классический процесс отправки формы?

Пользователь нажимает на сайте кнопку Отправить, браузер делает запрос на сервер, в ответ сервер отдаёт заново сформированную страницу и отправляет её обратно браузеру, так и происходит перезагрузка страницы.

Что происходит при AJAX технологии? Начало точно такое же, только сервер по другому отвечает — он не формирует новую страницу, а возвращает только ту область страницы, которая запрашивалась. JS скрипт воздействует на элементы точечно, поэтому полностью страница не перезагружается. Чем это хорошо? Меньшее количество запросов к базе данных снижает нагрузку на сервер и соответственно увеличивает скорость работы сайта.

jQuery.ajax()

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

version added: 1.5 jQuery.ajax( url [, settings] )

url
Тип: Строка
URL адрес, на который будет отправлен Ajax запрос

settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup(). Ниже приведен полный список всех настроек.

version added: 1.0 jQuery.ajax( settings )

settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup().

settings:

Тип данных
accepts

По умолчанию: зависит от типа данных

При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts . Если требуется его изменить, лучше сделать это с помощью метода $.ajaxSetup().

async

По умолчанию: true

По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: «jsonp» не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер.

beforeSend(jqXHR jqXHR , объект settings)

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов. Возврат значения false в функции beforeSend вызовет отмену ajax-запроса. Начиная с jQuery 1.5, beforeSend сработает вне зависимости от типа запроса.

cache

По умолчанию: true, false для типов данных ‘script’ and ‘jsonp’


Если false, запрашиваемая страница не будет кэшироваться браузером.

complete( jqXHR jqXHR, строка textStatus)

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Функция принимает два аргумента: объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest) и строку, характеризующую статус запроса («success», «notmodified», «error», «timeout», «abort», или «parsererror»). Начиная с jQuery 1.5, complete может принимать массив функций.

contents

Параметр задается в формате <строка:регулярное выражение>и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добалено в версии 1.5)

contentType

По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

context

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

converters

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

crossDomain

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

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, превращается в &foo=bar1&foo=bar2.

dataFilter( строка data, строка type)

Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.

dataType

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

error( jqXHR jqXHR, строка textStatus, строка errorThrown)

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента: объект jqXHR (в прошлом XMLHttpRequest), строку с описанием ошибки, а так же строку исключения, если оно было выбрашено. Второй аргумент может содержать следующие значения: null, «timeout», «error», «abort», и «parsererror». В случае если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус. К примеру, «Not Found» или «Internal Server Error.». Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций. Событие error не происходит при dataType равному script или JSONP.

global

По умолчанию: true.

Вызывать или нет глобальные обработчики событий Ajax для этого запроса (например ajaxStart или ajaxStop).

headers

По умолчанию: <>

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

ifModified

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.

isLocal

По умолчанию: в зависимости от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и w >(добалено в версии 1.5)

jsonp

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

jsonpCallback

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

mimeType

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. (добалено в версии 1.5.1)

password

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

username

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

processData

По умолчанию: true;

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

scriptCharset

Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

statusCode

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. (добалено в версии 1.5)

success( объект data, строка textStatus, объект jqXHR)

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента — данные (data), присланные сервером и прошедшие предварительную обработку; строка со статусом выполнения (textStatus); объект jqXHR (в версиях до 1.5 вместо jqXHR используетсяXMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

timeout

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».

traditional

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

По умолчанию: GET

Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

По умолчанию: текущая страница.

Страница, накоторую будет отправлен запрос.

По умолчанию ActiveXObject в IE, XMLHttpRequest в других браузерах.

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

xhrFields

Объект вида <имя:значене>для изменения значений соответствующих полей объекта XMLHttpRequest.

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

Примеры

Сохранить данные на сервере и оповестить об этом пользователя.

Получить последнюю версию HTML страницы

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false :

Отправить на сервер значение ID. Сохранить данные, оповестить пользователя. Если запрос не прошёл, сообщить об этом пользователю.

Мастер Йода рекомендует:  Stack Overflow оказался недоступен из-за работы регулярного выражения
Добавить комментарий
логический
логический
функция или массив
логический
объект или строка
функция или массив
логический
логический
логический
строка или функция
логический
функция или массив
логический