Введение в AJAX и COMET
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/fetch.
В этой главе мы «обзорно», на уровне возможностей и примеров рассмотрим технологию AJAX. Пока что с минимумом технических деталей.
Она будет полезна для понимания, что такое AJAX и с чем его едят.
Что такое AJAX?
AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.
За счёт этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Несмотря на то, что в названии технологии присутствует буква X (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
Что я могу сделать с помощью AJAX?
Элементы интерфейса
В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
Сейчас – в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.
Динамическая подгрузка данных
Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
Живой поиск – классический пример использования AJAX, взятый на вооружение современными поисковыми системами.
Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.
Код, который это обеспечивает, работает следующим образом.
- Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).
- Текущий результат подсвечен, можно перемещаться и выбирать - При нажатии правой стрелки или при клике -- поиск в подрезультатах 3. Результаты запросов кешируются, повторных обращений к серверу не происходит. Технически, с помощью AJAX можно обмениваться любыми данными с сервером.
Обычно используются форматы:
- JSON – для отправки и получения структурированных данных, объектов.
- XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
- HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
- Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.
Что такое COMET?
COMET – общий термин, описывающий различные техники получения данных по инициативе сервера.
Можно сказать, что AJAX – это «отправил запрос – получил результат», а COMET – это «непрерывный канал, по которому приходят данные».
- Чат – человек сидит и смотрит, что пишут другие. При этом новые сообщения приходят «сами по себе», он не должен нажимать на кнопку для обновления окна чата.
- Аукцион – человек смотрит на экран и видит, как обновляется текущая ставка за товар.
- Интерфейс редактирования – когда один редактор начинает изменять документ, другие видят информацию об этом. Возможно и совместное редактирование, когда редакторы видят изменения друг друга.
На текущий момент технология COMET удобно реализуется во всех браузерах.
Об этом разделе
Здесь мы будем говорить об AJAX и COMET на низком уровне, на уровне веб-стандартов и их использования.
Существуют библиотеки и фреймворки, добавляющие удобства, например Socket.io, CometD и другие.
В принципе, можно начать их использовать и не зная, что внутри. Но, скорее всего, вам всё равно понадобится отлаживать ошибки, смотреть детали коммуникации, выбирать наилучшее решение для конкретной задачи, и здесь обязательно разбираться, как это всё работает.
Ajax-запрос к серверу через jQuery
В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.
Запрос html-данных с помощью функции Load
Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):
$('#result').load('');
Более продвинутый вариант использования load:
$('#result').load('', , function(response, status, xhr) < if (status == 'success') < alert('Готово'); >else < alert('Ошибка: ' + xhr.status + ' ' + xhr.statusText); >>);
В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.
Ajax-запросы функциями GET и POST
Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.
$.get( '', // адрес отправки запроса , // передача с запросом каких-нибудь данных function(data) < // какие-то действия с полученными от сервера данными data >);
Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.
Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.
Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.
$.post( '', , onSuccess ); function onSuccess(data) < // какие-то действия с полученными от сервера данными data >
На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.
Получение json-данных с помощью getJSON
getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.
$.getJSON('', ).success(function(data) < // что-то делаем с данными, например, обходим их в цикле и выводим: for (var i=0; i>).error(function(xhr, textStatus, errorThrown) < alert('Ошибка: ' + textStatus+' '+errorThrown); >);
На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:
$arr = array(); $arr[0] = array('id' => 10, 'text' => 'тестовая строка 1'); $arr[1] = array('id' => 20, 'text' => 'тестовая строка 2'); $arr[2] = array('id' => 30, 'text' => 'тестовая строка 3'); echo json_encode($arr);
Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.
Простой ajax-запрос через jQuery с помощью функции AJAX
Теперь приведу пример простого get запроса функцией ajax и получением html-данных.
$.ajax(< url: '', dataType: 'html', success: function(data) < // какие-то действия с полученными данными data >>);
Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.
Более сложный пример ajax-запроса через jQuery
Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.
$.ajax(< url: '', type: 'post', data: '', // можно строкой, а можно, например, так: $('input[type="text"], input[type="radio"]:checked, input[type="checkbox"]:checked, select, textarea') dataType: 'json', beforeSend: function() < $('#sendajax').button('loading'); >, complete: function() < $('#sendajax').button('reset'); >, success: function(json) < // какие-то действия с полученными данными >, error: function(xhr, ajaxOptions, thrownError) < alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); >>);
Кнопка отправки данных:
В приведенном примере при нажатии на кнопку 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-формы:
$('#myform').submit(function(e) < e.preventDefault(); $.ajax(< type: $(this).attr('method'), url: '', data: $(this).serialize(), async: false, dataType: "html", success: function(result) < alert('Форма отправлена'); >>); >);
Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .
В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.
Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.
Отправка изображения или файла ajax-запросом через jQuery
Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.
html-код будет такой:
Загрузить изображение
#addfile < position: relative; overflow: hidden; width: 180px; height: 34px; >#load_file < position: absolute; top: 0; left: 0; width: 180px; height: 34px; font-size: 0px; opacity: 0; filter: alpha(opacity:0); >#load_file:hover
Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.
Теперь javascript код отправки файла на сервер с отображением прогресса:
$(function() < $('#load_file').on('change', loadfile); >); function loadfile() < $('#addfile span').html('Загружено 0 %'); files = $('#load_file')[0].files; var form = new FormData(); form.append('upload', files[0]); $.ajax(< url: '', type: 'POST', data: form, cache: false, processData: false, contentType: false, xhr: function() < var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) < myXhr.upload.addEventListener('progress',ShowProgress, false); >return myXhr; >, complete: function(data)< $('#addfile span').html('Загрузить изображение'); $('#load_file').val(''); >, success: function(message)< alert(message); >, error: function(jqXHR, textStatus, errorThrown) < alert(textStatus+' '+errorThrown); >>); > function ShowProgress(e) < if(e.lengthComputable)< $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %'); >>
При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.
Пример серверной части на php (по просьбе Евгения):
$message = ''; if (empty($_FILES['upload']['name']) || $_FILES['upload'] == "none") < $message = 'Вы не выбрали файл'; >else if ($_FILES['upload']['size'] == 0 || $_FILES['upload']['size'] > 9437184) < $message = 'Размер файла не соответствует нормам (максимум 9 Мб)'; >else if (($_FILES['upload']['type'] != 'image/jpeg') && ($_FILES['upload']['type'] != 'image/pjpeg') && ($_FILES['upload']['type'] != 'image/gif') && ($_FILES['upload']['type'] != 'image/png')) < $message = 'Допускается загрузка только картинок JPG, GIF и PNG.'; >else if (!is_uploaded_file($_FILES['upload']['tmp_name'])) < $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.'; >else < $ftype = $_FILES['upload']['type']; $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg')); if (move_uploaded_file($_FILES['upload']['tmp_name'], $_SERVER['DOCUMENT_ROOT'].'/files/'.$fname)) < $message = 'Изображение успешно загружено.'; >else < $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.'; >> exit($message);
Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);
Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.
AJAX для новичков
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
- Возможность создания удобного Web-интерфейса
- Активное взаимодействие с пользователем
- Частичная перезагрузка страницы, вместо полной
- Удобство использования
Обмен данными
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.
Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.
Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.
Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.
В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.
Методы объекта XMLHttpRequest
Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.
abort() — отмена текущего запроса к серверу.
getAllResponseHeaders() — получить все заголовки ответа от сервера.
getResponseHeader(«имя_заголовка») — получить указаный заголовок.
open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
send(«содержимое») — послать HTTP запрос на сервер и получить ответ.
setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.
Свойства объекта XMLHttpRequest
onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState — число, обозначающее статус объекта.
responseText — представление ответа сервера в виде обычного текста (строки).
responseXML — объект документа, совместимый с DOM, полученного от сервера.
status — состояние ответа от сервера.
statusText — текстовое представление состояния ответа от сервера.
- 0 — Объект не инициализирован.
- 1 — Объект загружает данные.
- 2 — Объект загрузил свои данные.
- 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
- 4 — Объект полностью инициализирован; получен ответ от сервера.
Создание объекта XMLHttpRequest
Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
var Request = new ActiveXObject(«Microsoft.XMLHTTP»);
var Request = new ActiveXObject(«Msxml2.XMLHTTP»);
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
function CreateRequest() < var Request = false; if (window.XMLHttpRequest) < //Gecko-совместимые браузеры, Safari, Konqueror Request = new XMLHttpRequest(); >else if (window.ActiveXObject) < //Internet explorer try < Request = new ActiveXObject("Microsoft.XMLHTTP"); >catch (CatchException) < Request = new ActiveXObject("Msxml2.XMLHTTP"); >> if (!Request) < alert("Невозможно создать XMLHttpRequest"); >return Request; >
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверу
- Проверка существования XMLHttpRequest.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3. r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) < //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз if (!Request) < return; >//Назначаем пользовательский обработчик Request.onreadystatechange = function() < //Если обмен данными завершен if (Request.readyState == 4) < //Передаем управление обработчику пользователя r_handler(Request); >> //Проверяем, если требуется сделать GET-запрос if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Инициализируем соединение Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") < //Если это POST-запрос //Устанавливаем заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посылаем запрос Request.send(r_args); >else < //Если это GET-запрос //Посылаем нуль-запрос Request.send(null); >>
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
function ReadFile(filename, container) < //Создаем функцию обработчик var Handler = function(Request) < document.getElementById(container).innerHTML = Request.responseText; >//Отправляем запрос SendRequest("GET",filename,"",Handler); >
Именно таким образом происходит взаимодействие с сервером.
Обработка ответа
В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
. Request.onreadystatechange = function() < //Если обмен данными завершен if (Request.readyState == 4) < //Передаем управление обработчику пользователя r_handler(Request); >else < //Оповещаем пользователя о загрузке >> .
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
. Request.onreadystatechange = function() < //Если обмен данными завершен if (Request.readyState == 4) < if (Request.status == 200) < //Передаем управление обработчику пользователя r_handler(Request); >else < //Оповещаем пользователя о произошедшей ошибке >> else < //Оповещаем пользователя о загрузке >> .
Варианты ответа от сервера
- Обычный текст
- XML
- JSON
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
Пример кода JSON:
При получении такого кода, производим следующее действие:
var responsedata = eval(«(» + Request.responseText + «)»)
После выполнения данного кода вам будет доступен объект responsedata.
Работа с серверными языками программирования
Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
echo "Hello, World!";
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Литература по теме
Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.
Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.
AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
AJAX запрос — это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы. Много толковых курсов!
Рассмотрим примеры AJAX запросов:
- GET AJAX запрос на чистом JavaScript
- POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
- JSON AJAX POST запрос к серверу, на чистом Javascript
- JQuery GET & POST AJAX запрос к PHP на сервере
- Fetch GET на чистом Javascript
- Запрос на чистом Javascript «Vanila» Fetch + POST метод
- Fetch GET JSON
- Кросдоменный запрос JSONP Fetch + GET метод
- Указание метода HTTP (GET POST)
- Запрашиваемого URL (пути до файла на сервере, который будет обрабатывать наш запрос)
- Установка заголовков на пример: «application/x-www-form-url» или «application/x-www-form-urlencoded» или «application/json» или «text-plain»
- Данные передаваемые на сервер (тело запроса)
- Код статуса (успешно или нет отработала сторона сервера)
- Заголовки HTTP/HTTPS
- Данные передаваемые от сервера к клиенту (браузеру)
Элементы кода, которые будут использованы в примерах.
XMLHttpRequest , — это класс, для работы AJAX. request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов. url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента. .open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url. .setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате. .send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null. onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера. readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:
| Значение | Описание |
| 0 | Метод open() не вызван |
| 1 | Метод open() вызван |
| 2 | Получены заголовки ответа |
| 3 | Получено тело ответа |
| 4 | Передача ответа выполнена |
status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500. .responseText – данные, которые придут от сервера в виде строки. .response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом. .text() – используется в запросе fetch, возвращает строку. .json() – используется в запросе fetch, возвращает json обращенный в объект.
1. GET AJAX запрос на чистом JavaScript
Делаем запрос на чистом JavaScript, например к файлу ajax_quest.php, который находится на сервере, и будет возвращать то что мы ему передали.
// Данные для передачи на сервер допустим id товаров и его количество
let id_product = 321;
let qty_product = 2;
// Создаём объект класса XMLHttpRequest
const request = new XMLHttpRequest();
/* Составляем строку запроса и кладем данные, строка состоит из:
пути до файла обработчика ? имя в GET запросе где будет лежать значение запроса id_product и
через & мы передаем количество qty_product. */
const url = "ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product;
/* Здесь мы указываем параметры соединения с сервером, т.е. мы указываем метод соединения GET,
а после запятой мы указываем путь к файлу на сервере который будет обрабатывать наш запрос. */
request.open('GET', url);
// Указываем заголовки для сервера, говорим что тип данных, - контент который мы хотим получить должен быть не закодирован.
request.setRequestHeader('Content-Type', 'application/x-www-form-url');
// Здесь мы получаем ответ от сервера на запрос, лучше сказать ждем ответ от сервера
request.addEventListener("readystatechange", () =>
/* request.readyState - возвращает текущее состояние объекта XHR(XMLHttpRequest) объекта,
бывает 4 состояния 4-е состояние запроса - операция полностью завершена, пришел ответ от сервера,
вот то что нам нужно request.status это статус ответа,
нам нужен код 200 это нормальный ответ сервера, 401 файл не найден, 500 сервер дал ошибку и прочее. */
if (request.readyState === 4 && request.status === 200)
// выводим в консоль то что ответил сервер
console.log( request.responseText );
>
>);
// Выполняем запрос
request.send();2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
Принцип такой же как и у GET запроса, но не забываем что GET запросом данные отправляются открыто. У POST запроса данные скрыты, и в большинстве своем желательно использовать POST запросы.
let id_product = 321;
let qty_product = 2;
// Создаем экземпляр класса XMLHttpRequest
const request = new XMLHttpRequest();
// Указываем путь до файла на сервере, который будет обрабатывать наш запрос
const url = "ajax_quest.php";
// Так же как и в GET составляем строку с данными, но уже без пути к файлу
const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
/* Указываем что соединение у нас будет POST, говорим что путь к файлу в переменной url, и что запрос у нас
асинхронный, по умолчанию так и есть не стоит его указывать, еще есть 4-й параметр пароль авторизации, но этот
параметр тоже необязателен.*/
request.open("POST", url, true);
//В заголовке говорим что тип передаваемых данных закодирован.
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener("readystatechange", () =>
if(request.readyState === 4 && request.status === 200) <
console.log(request.responseText);
>
>);
// Вот здесь мы и передаем строку с данными, которую формировали выше. И собственно выполняем запрос.
request.send(params);3. JSON AJAX POST запрос к серверу, на чистом Javascript
Запрос на чистом Javascript. Получаем данные в JSON формате.
// Данные для передачи на сервер например id товаров и его количество
let id_product = 321;
let qty_product = 2;
// принцип тот же самый что и у обычного POST запроса
const request = new XMLHttpRequest();
const url = "ajax_quest.php";
const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
// Здесь нужно указать в каком формате мы будем принимать данные вот и все отличие
request.responseType = "json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener("readystatechange", () =>
if (request.readyState === 4 && request.status === 200) let obj = request.response;
console.log(obj);
// Здесь мы можем обращаться к свойству объекта и получать его значение
console.log(obj.id_product);
console.log(obj.qty_product);
>
>);
request.send(params);4. JQuery GET & POST AJAX запрос к PHP на сервере
Работаем с сервером через фреймворк JQuery.
$(document).ready(function()
let id_product = 321;
let qty_product = 2;
$.ajax( <
url: "ajax_quest.php",
// dataType: "json", // Для использования JSON формата получаемых данных
method: "GET", // Что бы воспользоваться POST методом, меняем данную строку на POST
data: ,
success: function(data)
console.log(data); // Возвращаемые данные выводим в консоль
>
>);
>); 5. Fetch GET на чистом Javascript
Fetch обертка над XHR
let id_product = 321;
let qty_product = 2;
// Первым аргументом кладем путь, + строку как и в любом другом запросе, ключ=значение&ключ=значение
fetch("ajax_quest.php"+ "?" + "id_product=" + id_product + "&qty_product=" + qty_product,
// Второй аргумент это объект с указаниями, методаи заголовка
<
method: "GET",
headers:
>)
.then( response => if (response.status !== 200)
return Promise.reject();
>
return response.text()
>)
.then(i => console.log(i))
.catch(() => console.log('ошибка')); 6. Запрос на чистом Javascript «Vanila» Fetch + POST метод
let id_product = 321;
let qty_product = 2;
// Вынес что бы облегчить чтение так же можно вынести и headers
let data_body = "id_product=" + id_product + "&qty_product="+ qty_product;
/*
Первым аргументом кладем путь до файла
на сервере, вторым объект где будут
свойства method, body здесь у нас данные для
передачи на сервер, headers заголовок.
*/
fetch("ajax_quest.php", <
method: "POST",
body: data_body,
headers:
>)
.then( (response) => if (response.status !== 200) <
return Promise.reject();
>
return response.text()
>)
.then(i => console.log(i))
.catch(() => console.log('ошибка'));
/*** Fetch JSON GET ***/
/*
let id_product = 321;
let qty_product = 2;
fetch("ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product, headers:
>)
.then(response => if (response.status !== 200) return Promise.reject();
>
return response.json();
>)
.then(i => console.log(i))
.catch(() => console.log('ошибка'));*/7. Fetch POST + JSON
Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.
/*** FETCH + JSON + POST ***/
/*let id_product = 321;
let qty_product = 2;
let data = "id_product": id_product,
"qty_product": qty_product
>;
data = JSON.stringify(data);
fetch("ajax_quest.php", method: "POST",
body: data,
headers:
>)
.then(response => if (response.status !== 200) return Promise.reject();
>
return response.json();
>)
.then(i => console.log(i))
.catch(() => console.log('ошибка'));*/
/************************************************************/
let id_product = 321;
let qty_product = 2;
let upload = "id_product": id_product,
"qty_product": qty_product
>;
let data = new FormData();
data.append("json", JSON.stringify(upload));
fetch("ajax_quest.php",
method: "POST",
body: data
>)
.then(response => if (response.status !== 200) return Promise.reject();
>
return response.json();
>)
.then(function (data) console.log(JSON.stringify(data))
>)
.catch(() => console.log('ошибка'));
8. Кросдоменный запрос JSONP Fetch + GET метод в github
Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.
fetch('https://raw.githubusercontent.com/belocer/belocer.github.io/blob/master/js/app.js')
.then(response => if (response.status >= 400) return Promise.reject();
>
return response.json();
>)
.then(i => console.log(i))
.catch(() => console.log('ошибка'))9. Передача файла через AJAX на чистом JavaScript
Обычно передаются текстовые данные, но вот вчера на работе попалась задача передать файл AJAX -ом, решил поделиться тем что нашёл. Чуть позднее опишу подробности, или запишу видео. Здесь переписал в ООП https://jsbin.com/cajuyod/edit?html,js,output