php ответ на ajax запрос
Как использовать AJAX в PHP и jQuery
Сегодня мы собираемся исследовать концепцию AJAX с PHP. Техника AJAX помогает вам улучшить пользовательский интерфейс вашего приложения и улучшить общее восприятие конечного пользователя.
Что такое AJAX?
AJAX расшифровывается как асинхронный JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.
Давайте рассмотрим пример, чтобы понять, как вы можете использовать AJAX в повседневной разработке приложений. Скажем, вы хотите создать страницу, которая отображает информацию профиля пользователя, с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и так далее.
Обычный подход заключается в создании различных веб-страниц для каждого раздела. Так, например, пользователи кликают по ссылке социальной информации, чтобы перезагрузить браузер и отобразить страницу с социальной информацией. Это замедляет навигацию между разделами, поскольку пользователю приходится ждать перезагрузки браузера и повторного отображения страницы каждый раз.
С другой стороны, вы также можете использовать AJAX для создания интерфейса, который загружает всю информацию без обновления страницы. В этом случае вы можете отобразить разные вкладки для всех разделов, и, нажав на вкладку, он извлекает соответствующее содержимое с внутреннего сервера и обновляет страницу, не обновляя браузер. Это поможет вам улучшить общее восприятие конечного пользователя.
Общий вызов AJAX работает примерно так:
Давайте быстро пройдемся по обычному потоку AJAX:
Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.
В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.
Как AJAX работает с использованием Vanilla JavaScript
В этом разделе мы увидим, как AJAX работает в обычном JavaScript. Конечно, есть доступные библиотеки JavaScript, которые облегчают выполнение AJAX-вызовов, но всегда интересно знать, что происходит внутри.
Давайте посмотрим на следующий ванильный код JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.
Давайте пройдемся по приведенному выше коду, чтобы понять, что происходит за кулисами.
Вот как AJAX работает с ванильным JavaScript. Конечно, это был очень простой пример для демонстрации концепции AJAX, и в реальном приложении все может быть довольно сложно, так как вам нужно обработать многие различные сценарии успеха и неудач. Таким образом, было бы неплохо выбрать библиотеку JavaScript, которая скрывает специфические сложности браузера!
В следующем разделе мы увидим, как использовать библиотеку jQuery для выполнения вызовов AJAX.
Как работает AJAX с использованием библиотеки jQuery
В предыдущем разделе мы обсуждали, как можно выполнять вызовы AJAX, используя ванильный JavaScript. В этом разделе мы будем использовать библиотеку jQuery, чтобы продемонстрировать это. Я предполагаю, что вы знаете основы библиотеки jQuery.
Посмотрите на следующий пример.
В большинстве случаев вам нужно будет указывать функции обратного вызова (коллбеки) для успешного выполнения и для ошибок. Функция обратного вызова для успеха будет вызвана после успешного завершения вызова AJAX. Ответ, возвращенный сервером, будет передан коллбеку для успеха. С другой стороны, коллбек для ошибки будет вызван, если что-то пойдет не так, и возникла проблема при выполнении вызова AJAX.
Итак, как вы можете видеть, AJAX-операции легко выполнять с помощью библиотеки jQuery. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решаете выполнять вызовы AJAX.
В следующем разделе мы увидим реальный пример, чтобы понять, как все это работает с PHP.
Реальный пример AJAX с PHP
В этом разделе мы создадим пример, который извлекает контент JSON из файла PHP на стороне сервера, используя AJAX.
Для демонстрации мы создадим пример, который выполняет вход пользователя с использованием AJAX и jQuery. Для начала давайте создадим файл index.php, как показано в следующем фрагменте, который отображает базовую форму входа.
Файл index.php представляет собой довольно стандартную HTML-форму, которая содержит поля имени пользователя и пароля. Он также содержит фрагмент JavaScript jQuery, который следует схеме, которую мы видели выше.
Давайте также посмотрим, как выглядит login.php.
Файл login.php содержит логику аутентификации пользователей и возвращает ответ JSON, основанный на успешном или неудачном входе в систему.
Заключение
В этом уроке мы обсудили основы AJAX и его работу в PHP. В первой половине статьи мы рассмотрели, как AJAX работает в ванильном JS и в библиотеке jQuery. Во второй половине мы создали реальный пример, который продемонстрировал, как вы можете использовать AJAX для извлечения PHP содержимого на стороне сервера.
Если у вас есть какие-либо сомнения или вопросы, не стесняйтесь выражать свои мысли, используя канал ниже!
AJAX для новичков
Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.
Что такое AJAX?
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на 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 — текстовое представление состояния ответа от сервера.
Создание объекта XMLHttpRequest
Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
var Request = new ActiveXObject(«Microsoft.XMLHTTP»);
var Request = new ActiveXObject(«Msxml2.XMLHTTP»);
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверу
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
Именно таким образом происходит взаимодействие с сервером.
Обработка ответа
В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Варианты ответа от сервера
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
При получении такого кода, производим следующее действие:
var responsedata = eval(«(» + Request.responseText + «)»)
После выполнения данного кода вам будет доступен объект responsedata.
Работа с серверными языками программирования
Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Литература по теме
Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.
Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.
AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
AJAX запрос — это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы.
Рассмотрим примеры 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, который находится на сервере, и будет возвращать то что мы ему передали.
2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
Принцип такой же как и у GET запроса, но не забываем что GET запросом данные отправляются открыто. У POST запроса данные скрыты, и в большинстве своем желательно использовать POST запросы.
3. JSON AJAX POST запрос к серверу, на чистом Javascript
Запрос на чистом Javascript. Получаем данные в JSON формате.
4. JQuery GET & POST AJAX запрос к PHP на сервере
Работаем с сервером через фреймворк JQuery.
5. Fetch GET на чистом Javascript
Fetch обертка над XHR
6. Запрос на чистом Javascript «Vanila» Fetch + POST метод
7. Fetch POST + JSON
Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.
8. Кросдоменный запрос JSONP Fetch + GET метод в github
Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.