ajax передача данных в php
PHP и AJAX для начинающих на простом примере
Что такое jQuery?
jQuery это библиотека javascript, цель которой «пиши меньше, делай больше». jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.
jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.
Что такое AJAX?
Что насчет jQuery и AJAX?
Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.
jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.
В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме. Давайте начнем. Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.
Шаг 1. Создайте файл school.php и вставьте в него следующий код:
Шаг 2: Создайте details.php и расположите в нем следующий код:
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Ajax на практике.
Основы передачи данных.
Серия статей «Ajax на практике«
Данную статью начал по просьбам новичков, которые только начинают осваивать JS/jQuery и, рано или поздно, сталкиваются с проблемой, как же на практике использовать технологию Ajax. В этой части, я попробую простым языком (пусть не смущает это пользователей продвинутых) объяснить, как применить данную «фишку» с использованием библиотеки jQuery в своих проектах.
Итак. В jQuery есть несколько методов, которые осуществляют запросы к серверной части сайта без перезагрузки страницы. Мы не будем рассматривать каждый метод отдельно «под микроскопом», по той простой причине, что все они являются урезанными/сокращенными функция метода $.ajax(). Для начала, давайте помотрим на код ниже, а дальше разберем его подробней:
HTML (файл index.html)
В этом файле у нас подключена библиотека jQuery, файл с нашим JS-кодом, кнопка (id=»btn»), по нажатию на которую будет запускаться ajax-запрос и блок (id=»output»), в который мы будем выводить результат работы ajax-запроса
JS/jQuery (файл script.js)
PHP-обработчик (файл handler.php)
Что же будет происходить на каждом этапе:
*beforeSend и complete можно использовать, например, для вывода какой-нибудь картинки-прелоадера, чтоб давать пользователю понять о том, что процесс идет. И это далеко не все полезные опции метода $.ajax(), но тот необходимый минимум, который позволит правильно и грамотно функционировать методу.
В следующей части, рассмотрим получение и передачу данных средаствами AJAX из форм и других источников, а так же поделюсь маленькими полезностями, которые Вам пригодятся в работе над своими проектами.
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 изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.
Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.
Как передать HTML объект аяксом в php-скрипт?
Методы и свойства всякие мне как раз не нужны.
Наверняка есть какой-то простой и очевидный способ передать HTML-код аяксом на сервер, но я никак не могу его найти. Подскажите пожалуйста куда копать.
Андрей По моему передавать целую страницу вообще плохая идея. Но если вы уж так решили. Вам нужно передавать не JSON данные, а html или text. Метод jQuery.ajax( [settings ] ) принимает объект settings, В свойствах которого нужно указать dataType
Так должно получиться. подробнее об этом можно почитать тут
На сколько я понимаю, dataType определяет тип данных, которые мы получаем от сервера. А у меня проблема с типом данных, передаваемых на сервер.
Безусловно, я попробовал Ваше решение, но получил ошибку:
TypeError: ‘click’ called on an object that does not implement interface HTMLElement.
Я так понимаю, что ругается на формат передаваемых данных.
П.С. Страницу целиком я передаю на сервер, чтобы ее сохранить в файл. Она создается в браузере пользователя аяксом и потом при желании ее можно сохранить в файл и скачать.
На всякий случай привожу код целиком:
Аякс запрос передаёт строковые данные. Потому вам нужно получать не объект, и не объект jquery, пытаясь его передать на сервер! а получить строковые данные, и присваивать их как значения к ключам. Которые вы уже передадите в вашем POST запросе.
Вам ещё в настройках PHP на сервере надо будет проверить значение переменной post_max_size и увеличить её под ваши нужды.
Как использовать 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 содержимого на стороне сервера.
Если у вас есть какие-либо сомнения или вопросы, не стесняйтесь выражать свои мысли, используя канал ниже!