Отправка формы при помощи Ajax(XMLHttpRequest)

Содержание

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-форма без перезагрузки страницы

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

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

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

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

AJAX + PHP + JQuery

Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.

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

  • ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
  • PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
  • JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.

Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.

Готовая схема выглядит так:

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

файл JS отправляет их в PHP через Ajax, функцию JQuery

обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе

в первом случае владелец сайта также получает готовую заявку.

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

Инструкция по созданию формы без перезагрузки

Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).

Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):

Илон Маск рекомендует:  Требования к cms в эпоху веб 2 0

Если вывод формы нужен на одной странице, просто вставляем в код . Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон.

Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.

Обработчик, в JS элементе выше мы уже назвали его formx.php:

Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.

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

Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.

Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).

Примеры отправки 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.

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

Использование XMLHttpRequest

На этой странице

Это инструкция по использованию XMLHttpRequest , для взаимодействия через HTTP-протокол.

Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.

Типы запросов

Запрос, сделанный посредством XMLHttpRequest , может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода open() объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице synchronous and asynchronous requests. Использовать синхронные запросы приходится очень редко.

Обработка запросов

Есть несколько типов атрибутов ответа, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.

Анализ и использование свойства responseXML

Если скачать XML документ с помощью XMLHttpRequest , в свойстве responseXML будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:

  1. Использовать XPath, чтобы указывать на его части.
  2. Использовать JSON, чтобы превратить его в дерево объектов JavaScript.
  3. Вручную парсить и превращать XML в строки или объекты.
  4. Использовать XMLSerializer, чтобы превращать деревья DOM в строки или файлы.
  5. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.

Анализ и использование свойства responseText, содержащего HTML документ

Если получить содержимое HTML страницы с помощью XMLHttpRequest , свойство responseText будет строкой, содержащей «кашу» изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:

  1. Использовать свойство XMLHttpRequest.responseXML.
  2. Вставить содержимое в тело фрагмента документа с помощью fragment.body.innerHTML и работать уже с этим фрагментом.
  3. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа.

Работа с двоичными данными

Хотя обычнно XMLHttpRequest используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить XMLHttpRequest посылать двоичные данные. Они используют метод XMLHttpRequest .overrideMimeType().

Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты responseType, значительно облегчающие работу с двоичными данными:

Больше примеров можно найти на странице Отправка и получение двоичных данных.

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

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

Отслеживание событий процесса загрузки следует спецификации Web API progress events: эти события реализуют интерфейс ProgressEvent .

На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью XMLHttpRequest .

Обработчик события progress , представленный функцией updateProgress() в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях total и loaded. Но если поле lengthComputable равняется false , значит, длина сообщения неизвестна и будет отображаться как ноль.

События progress есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта XMLHttpRequest , как показано в примере выше; исходящих —для XMLHttpRequest.upload:

Примечание: Начиная с Gecko 9.0 , можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.

Примечание: В Gecko 12.0 , если событие progress вызвано с responseType «moz-blob», значение ответа будет Blob , содержащим все данные, полученные на текущий момент.

Также возможно засечь все три события, завершающие загрузку ( abort , load , or error ) через событие loadend :

Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.

Отправка форм и загрузка файлов

Есть два способа передать данные форм с помощью экземпляра XMLHttpRequest :

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

Используя только XMLHttpRequest

Отправка форм без FormData не требует других API, кроме FileReader для загрузки файлов.

Краткое введение в методы отправки

Есть четыре способа послать HTML Using the POST method

Правильный пример Ajax запроса для отправки формы c помощью jQuery и JavaScript

Нужен правильный пример Ajax запроса для отправки формы c помощью jQuery и JavaScript, но чтобы после отправки данных формы не совершался переход на страницу, которая указана в атрибуте «action» у формы. Заранее спасибо.

3 ответа 3

ну само собой в url должен быть адрес страницы, на которую шлется запрос. Также вместо preventDefault можно возвращать значение: return false;

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

Связанные

Похожие

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

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

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

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

Что такое AJAX

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

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

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

Здесь мы создадим демо-проект, который будет включать в себя 3 файла:

index.php — это главная страница, на которой размещена сама форма

ajax.js — это файл javascript, в котором содержится алгоритм ajax для обработки формы

action_ajax_form.php — это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON

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

Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.

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

Теперь создадим второй файл — ajax.js

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

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

Илон Маск рекомендует:  background-position-y в CSS

Создадим последний файл — action_ajax_form.php

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

Выводы

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

Как обеспечить корректную загрузку изображений из FormData через Ajax/XMLHttpRequest?

Здравствуйте. Проблема следующая, сделал страницу для загрузки изображений на сервер, всё работает отлично. Я хочу на главной странице подгрузить эту форму через Ajax и загрузить изображение. Для данной цели использую FormData, так же мне вместе с фалом необходимо передать параметр filename и content-type, для этой цели использую объект Blob, всё работает да вот только на сервер приходит битая картинка, и не открывается. Скачивал с сервера, открыл у себя — так же не открывается. При этом в той форме, которая в натуральном окне — всё отлично.

Форму пробовал отправлять и через XMLHttpRequest и через Ajax

В отдельном окне

В общем весь ответ идентичен, единственную разницу заметил в графе Request Headers

В окне с Ajax
Accept:*/*

В отдельном окне

Помогите пожалуйста, не знаю в какую сторону копать. Примеров не нагуглил. Единственная мысль, что фотографии через JSON (или вообще в Blob объекте) не передаются, но я и отдельно выносил файл через formData.append(«image»,»file») — ситуация такая же..

UPD: Проблема обнаружена, в изображении содержится не изображение, а <"file":"C:\\fakepath\\astanabuild.jpg">, всё таки проблем в том — что передаётся не изображение, а данные в формате JSON

UPD2: Решение найдено. Проблема была в том, что я передавал Валью инпута а не сам файл. Блоб я делал для передачи параметра filename, но он и так передаётся — если правильно поместить файл :)

И все параметры передаются замечательно, без всяких Blob объектов)

JavaScript — Синхронный AJAX запрос (XMLHttpRequest)

Урок, в котором на простых примерах разберем, как работать с технологией AJAX, а именно познакомимся с тем как с помощью объекта XMLHttpRequest (сокращённо XHR) создавать синхронные HTTP-запросы к серверу и получать от него ответы.

Основы AJAX

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

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

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

  1. Получение некоторой информации (данных) со страницы или формы (при необходимости)
  2. Отправление запрос на веб-сервер
  3. Получение ответа с веб-сервера
  4. Отображение результатов на странице, если ответ был успешен.

Основы создания синхронных AJAX запросов

Пример 1. Выполнение синхронного AJAX запроса

Рассмотрим пример выполнения синхронного AJAX запроса к серверу с помощью метода XMLHttpRequest. В данном примере запросим данные, находящиеся в файле data.txt на сервере и отобразим их на странице в элементе span .

Пример будет состоять из файлов index.html , script.js и data.txt , которые для простоты можно расположить на сервере в одном каталоге.

Начнём разработку с создания HTML-страницы, к которой подключим файл script.js . Этот файл, а точнее его содержимое будет выполнять всю основную работу. Но перед тем как перейти к его разработке, создадим на станице элементы div и span . Элемент div будет играть роль кнопки, при нажатии на которую будет выполняться AJAX запрос. А элемент span будет играть роль контейнера, который будет содержать ответ, пришедший с сервера.

Кроме этого добавим на страницу ещё стили CSS, чтобы немного её оформить. В итоге у нас должен получиться следующий HTML код:

После этого откроем файл data.txt и введём в него текст «Привет, мир!». Сохраним и закроем файл.

И наконец, перейдём к созданию файла script.js . Содержимое этого файла будет выполнять все основные действия, т.е. отправлять ajax запрос на сервер, принимать от сервера ответ и обновлять содержимое страницы (помещать ответ в элемент span ).

Рассмотрим создание данного файла поэтапно:

Получим элемент на событие click которого необходимо подписаться.

Подпишемся на событие click элемента с помощью метода addEventListener .

Создадим переменную request , которая будет содержать экземпляр объекта XMLHttpRequest .

Настроим HTTP-запрос к серверу с помощью метода open. Данный метод имеет 3 основных параметра. 1 параметр отвечает за метод, с помощью которого мы отправляем данные на сервер. Различают два основных метода: GET и POST. Метод GET передаёт данные в составе URL после знака ? (для отделения данных используется амперсанд & ).

Метод POST передаёт данные в теле HTTP-запроса.

2 параметр отвечает за адрес (URL), по которому посылается запрос. А 3 параметр определяет тип запроса: синхронный ( false ) или асинхронный ( true ).

Отправляем ajax запрос на сервер.

После отправки синхронного запроса на сервер, наша страница замораживается (т.е. не отвечает на запросы пользователя) и ждёт ответа от сервера. Как только ответ приходит, он становится доступным в виде следующих свойств объекта XMLHttpRequest :

status (статус запроса). Если значение свойства равно 200, то запрос выполнен успешно. Если в status хранится другое число, значит, запрос завершился с ошибкой (например, 404, 500 и т.д.)

responseText – содержит текст ответа, который пришёл от сервера. Т.е. данное свойство всегда содержит то, что нам нужно, если статус ответа был 200.

Посмотреть на этот объект можно, например, в консоли, для этого после отправки ajax запроса на сервер достаточно поместить в код следующую строчку:

Просмотр объекта XMLHttpRequest в консоли браузера

Получаем результат и отображаем его на странице.

Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHP

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

В данном примере страница будет состоять из 3 кнопок. Первая кнопка будет иметь текст 1, вторая кнопка текст 2 и третья кнопка текст 3. При нажатии на любую из кнопок будет выполняться синхронный запрос на сервер. В качестве метода передачи запроса будем использовать GET. А адрес, по которому будем посылать запрос и параметры ajax.php . Получать данные отправленные клиентом на сервере будем с помощью GET-переменной HTTP ($_GET). После этого полученные данные будем обрабатывать на сервере, и возвращать клиенту ответ (строку).

Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST

В этом примере данные на сервер будем передавать с помощью метода POST (в теле HTTP-запроса). В методе POST данные (параметры) передаются не в составе URL (метод GET), а в теле, которое мы посылаем серверу через send() . Т.е. для того чтобы передать данные с помощью POST, мы их должны поместить в качестве параметра методу send() . Кроме того, при отправке данных с помощью POST необходимо также указать заголовок Content-Type, содержащий кодировку с помощью которой мы зашифровали данные. Это необходимо сделать для того чтобы сервер знал как обработать (расшифровать), пришедшие к нему данные (запрос).

JavaScript метод XMLHttpRequest.send()

Определение и применение

JavaScript метод send() объекта XMLHttpRequest позволяет отправить запрос на сервер.

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

Для того, чтобы отправить запрос его необходимо изначально инициализировать с использованием метода open() объекта XMLHttpRequest .

Если заголовок Accept не был установлен с помощью метода setRequestHeader() объекта XMLHttpRequest , то отправляется заголовок Accept с типом «*/* » (любой тип).

Поддержка браузерами

Метод Chrome Firefox Opera Safari IExplorer Edge
send() Да Да Да Да Да Да

JavaScript синтаксис:

Cпецификация

Значения параметров

Параметр Описание
body Представляет из себя тело данных для отправки в запросе XHR . Если метод запроса соответствует значению » GET » или » HEAD «, то этот параметр игнорируется и тело запроса имеет значение null . Необязательный параметр.

Исключения

Тип исключения Описание
InvalidStateError Возникает в том случае, если метод send() уже был вызван для запроса, и / или запрос завершен.
NetworkError Возникает в том случае, если тип ресурса, который нужно извлечь, является Blob , и метод не соответствует типу » GET «.

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

В следующем примере мы рассмотрим с вами как отправить » GET » запрос с использованием метода send() объекта XMLHttpRequest .

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию getPhone, которая:

  • Вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
  • С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса — указываем, что HTTP запрос будет осуществлен методом » GET «, а в качестве URL адреса на который будет отправлен запрос мы задаем файл формата json . Обратите внимание, что файл размещен на том же сервере и в том же каталоге, что и документ с которого выполняется скрипт. Файл имеет следующий вид:
  • С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер.
  • С использованием обработчика событий onreadystatechange , вызываемого при запуске события readystatechange , то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с использованием метода JSON.parse() анализируем строку в формате JSON и инициализируем переменную значением, полученным в ходе анализа. После этого с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением ключа объекта, содержащегося в инициализированной ранее переменной.

Результат нашего примера:

Пример использования методов open() и send() объекта XMLHttpRequest

В следующем примере мы рассмотрим с вами как отправить » POST » запрос с использованием метода send() объекта XMLHttpRequest .

В этом примере с использованием атрибута событий onsubmit, установленного на форму (HTML элемент ) при нажатии на кнопку (HTML элемент ) вызываем функцию logIn(), которой мы передаем объект события (объект Event ) и она в свою очередь:

  • С помощью метода preventDefault() объекта Event отменяет действие события по умолчанию. Это необходимо для того, чтобы избежать перезагрузки страницы во время отправки формы.
  • Инициализирует четыре переменные: первая и вторая содержат значения полей , третья содержит строковое значение, которое мы будем отправлять на сервер в качестве тела данных в запросе (состоит в том числе из первых двух переменных), четвертая вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
  • С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса — указываем, что HTTP запрос будет осуществлен методом » POST «, а в качестве URL адреса на который будет отправлен запрос мы задаем файл формата php . Обратите внимание, что файл размещен на том же сервере и в том же каталоге, что и документ с которого выполняется скрипт. Файл содержит следующий простой скрипт на языке программирования PHP:
  • С помощью метода setRequestHeader() объекта XMLHttpRequest задаем значение заголовка HTTP запроса (указываем, что передаваемое значение на сервер кодируется в кортежах с ключом, разделенных символоми ‘&’ , с ‘=’ между ключом и значением).
  • С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер. Обратите внимание, что мы в качестве параметра метода передаем переменную, которая содержит сформированное выше строковое значение.
  • С использованием обработчика событий onreadystatechange , вызываемого при запуске события readystatechange , то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением, содержащим ответ сервера на запрос в виде текста (значение свойства responseText).

Результат нашего примера:

Пример использования методов send() и setRequestHeader() объекта XMLHttpRequest JavaScript XMLHttpRequest

Новые возможности XMLHttpRequest2

Одним из незамеченных героев вселенной HTML5 является XMLHttpRequest 2. Строго говоря XHR2 не является частью HTML5 и не является самостоятельным объектом. XHR2 это тот же XMLHttpRequest, но с некоторыми изменениями. XHR2 является неотъемлемой частью сложных веб-приложений, поэтому ему стоит уделить большее внимание.

Наш старый друг XMLHttpRequest сильно изменился, но не многие знают о его изменениях. XMLHttpRequest Level 2 включает в себя новые возможности, которые положат конец нашим безумным хакам и пляскам с бубном вокруг XMLHttpRequest: кросс-доменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных. Эти возможности позволяют AJAX уверенно работать без каких-либо хаков с новейшими технологиями HTML5: File System API, Web Audio API, и WebGL.

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

Извлечение данных

Извлечение двоичных данных из файла в XHR очень болезненно. Технически это даже невозможно. Но есть один хорошо документированный трюк, который позволяет переписать mime-тип пользовательской кодировкой.

Вот так раньше можно было получить содержимое картинки:

Хотя это работает, но вы получаете в responseText не binary blob, а бинарную строку, которая представляет бинарный файл картинки. Мы обманываем XMLHttpRequest и заставляем его пропускать данные необработанными. Хотя это маленький хак, но я хочу его назвать черной магией.

Указание формат ответа

В предыдущем примере мы загружали картинку как «бинарный файл», переписывая серверный mime-тип и обрабатывая его как двоичную строку. Вместо этой магии давайте воспользуемся новой возможностью XMLHttpRequest — свойствами responseType и response, которые покажут браузеру в каком формате мы желаем получить данные.

xhr.responseType
Перед отправкой запроса можно изменить свойство xhr.responseType и указать формат выдачи: «text», «arraybuffer», «blob» или «document» (по умолчанию «text»).

xhr.response
После выполнения удачного запроса свойство response будет содержать запрошенные данные в формате DOMString, ArrayBuffer, Blob или Document в соответствии с responseType.

С этой новой замечательной фичей мы можем переделать предыдущий пример. На этот раз мы запросом картинку как ArrayBuffer вместо строки. Выгруженный файл мы переделаем в формат Blob с помощью BlobBuilder API:

Вот так намного лучше!

Ответы в формате ArrayBuffer

ArrayBuffer — это общий контейнер фиксированной длины для бинарных данных. Это очень удобно если вам нужен обобщенный буфер сырых бинарных данных, но настоящая сила ArrayBuffer в том, что из него вы можете сделать типизированный JavaScript массив. Фактически вы можете создать массивы разной длины, используя один ArrayBuffer. Например вы можете создать 8-битный целочисленный массив, который использует тот же самый ArrayBuffer что и 32-битный массив, полученный из тех же данных.

В качестве примера напишем код, который получает нашу картинку в виде ArrayBuffer и создает из её данных 8-битный целочисленный массив:

Ответы в формате Blob

Если вы желаете работать напрямую с Blob и/или вам не нужно манипулировать байтами файла используйте xhr.responseType=’blob’ (Сейчас есть только в Chrome crbug.com/52486):

Blob может быть использован в нескольких местах: сохранение данных в indexedDB, запись в HTML5 File System, создание Blob URL(MDC) как в примере выше.

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

Возможность принимать данные в различных форматах это здорово, но это нам не подходит если мы не можем отправить эти данных назад (на сервер). XMLHttpRequest ограничивал нас отправкой DOMString или Document (XML). Сейчас это в прошлом. Обновленный метод send() позволяет отправлять данные следующих типов: DOMString, Document, FormData, Blob, File, ArrayBuffer. В этой части статьи мы рассмотрим как отправлять данные в этих форматах.

Отправка строковых данные: xhr.send(DOMString)

До XMLHttpRequest 2:

После XMLHttpRequest 2:

Ничего нового. Пример «После» немного отличается. В нем явно определен responseType, но вы можете не указывать responseType и получите аналогичный результат (по умолчанию всегда text).

Отправка данных форм: xhr.send(FormData)

Думаю многие из вас использовали jQuery или другие библиотеки для отправки данных формы по AJAX. Вместо этого мы можем использовать FormData ещё один тип данных, который понимает XHR2. FormData удобен для создания HTML форм на лету в JavaScript. Эти формы могут быть отправлены используя AJAX:

По существу, мы динамически создаем форму и добавляем в неё поля input, вызывая метод append.
И вам не нужно создавать настоящую форму с нуля. Объекты FormData могут быть инициализированы из существующих HTMLFormElement элементов на странице. Например:

HTML форма может содержать файлы ( ) — FormData может с ними работать. Просто добавьте файл(ы) и браузер выполнит multipart/form-data запрос, когда будет вызван метод send() . Это очень удобно!

Отправка файла или blob: xhr.send(Blob)

Используя XHR2 мы также можем отправить File или Blob. Имейте ввиду, что файлы это и есть Blob.
В этом примере мы создадим с нуля новое текстовое поле, используя BlobBuilder API и загрузим этот Blob на сервер. Этот код также создает обработчик, который показывает нам процесс загрузки файла (Невероятно полезная фича HTML5):

Отправка произвольного набора байт: xhr.send(ArrayBuffer)

Мы можем отправить ArrayBuffers

Cross Origin Resource Sharing (CORS)

CORS позволяет приложениям на одном домене выполнять кросс-доменные AJAX запросы на другой домен. Нам даже ничего не надо менять на клиенте — все предельно просто! Браузер сам отправит необходимый заголовок за нас.

Включение CORS запросов

Предположим, что наше приложение находится на example.com и нам нужно получить данные с www.example2.com . Обычно если вы пытаетесь сделать такой AJAX запрос, то запрос не будет выполнен и браузер выбросит исключение «origin mismatch». С CORS www.example2.com может решить разрешить нашему приложению с example.com выполнить запрос или нет, добавив всего один заголовок:

Заголовок Access-Control-Allow-Origin может быть выдан одному сайту или любому сайту с любого домена:

На любой странице сайта html5rocks.com включен CORS. Если включить отладчик, то вы можете увидеть этот заголовок Access-Control-Allow-Origin :

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

Создание кросс-доменного запроса

Если ресурс сервера разрешает CORS, то создание кросс-доменного запроса ничем не отличается от обычного XMLHttpRequest. Например, вот так мы можем выполнить запрос с приложения на сервере example.com на сервер www.example2.com :

Все предельно прозрачно и никаких плясок с бубном вокруг postMessage, window.name, document.domain, серверных проксей и прочих извращенийметодов.

Примеры

Загрузка и сохранение файла в HTML5 File System

Предположим, что у нас есть галерея изображений и мы хотим сохранить несколько картинок к себе, используя HTML5 File System.

Отправка файла по частям

Используя File API мы можем упростить процесс отправки большого файла. Мы разбиваем большой файл на несколько маленьких файлов потом каждый оправляем с помощью XHR. На сервере собираем файл в один большой. Это похоже на то как GMail отправляет большие вложения. Такая техника может применяться для обхода ограничений Google App Engine — 32MB на один http запрос.

Скрипт сборки файла на сервере не прикладываю — там все очевидно.

Илон Маск рекомендует:  Загадочное свойство hasLayout
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL