Ajax open php function

Как использовать AJAX в PHP и jQuery

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

Что такое AJAX?

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

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

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

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

Общий вызов AJAX работает примерно так:

Давайте быстро рассмотрим обычный поток AJAX:

1. Сначала пользователь открывает веб-страницу, как обычно, с синхронным запросом.
2. Затем пользователь щелкает элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к внутреннему серверу. Конечный пользователь этого не заметит, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете обнаружить эти вызовы AJAX с помощью такого инструмента, как Firebug.
3. В ответ на запрос AJAX сервер может вернуть строковые данные XML, JSON или HTML.
4. Данные ответа анализируются с помощью JavaScript.
5. Наконец, проанализированные данные обновляются в DOM веб-страницы.

Как видите, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.

В следующем разделе мы расскажем, как реализовать AJAX с использованием vanilla JavaScript.

Как работает AJAX с использованием vanilla JavaScript

В этом разделе мы увидим, как AJAX работает в vanilla JavaScript. Конечно, доступны библиотеки JavaScript, которые упрощают выполнение вызовов AJAX, но всегда интересно знать, что происходит под капотом.

Давайте посмотрим на следующий код vanilla JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.

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

1. Сначала мы инициализируем объект XMLHttpRequest , который отвечает за выполнение вызовов AJAX.
2. У объекта XMLHttpRequest есть свойство readyState , и значение этого свойства изменяется в течение жизненного цикла запроса. Он может содержать одно из четырех значений: OPENED , HEADERS_RECEIVED , LOADING , и DONE .
3. Мы можем настроить функцию обработчика данных для изменений состояния с помощью свойства onreadystatechange . Именно это мы и сделали в приведенном выше примере: мы использовали функцию, которая будет вызываться каждый раз при изменении свойства состояния.
4. В этой функции мы проверили, что значение readyState равнозночно 4 , что означает, что запрос завершен и мы получили ответ от сервера. Затем мы проверили, равен ли код состояния 200 , что означает, что запрос был выполнен успешно. Наконец, мы получаем ответ, который хранится в свойстве responseText объекта XMLHttpRequest .
5. После настройки обработчика данных мы инициируем запрос, вызывая метод open объекта XMLHttpRequest . Значение свойства readyState будет установлено равным 1 после этого вызова.
6. Наконец, мы вызвали метод send объекта XMLHttpRequest , который фактически отправляет запрос на сервер. Значение свойства readyState будет установлено равным 2 после этого вызова..
7. Когда сервер ответит, он в конечном итоге установит значение readyState равным 4, и вы должны увидеть окно предупреждения, отображающее ответ от сервера.

Вот как AJAX работает с vanilla JavaScript. Используемый здесь метод с использованием «функций обратного вызова» является традиционным способом кодирования AJAX, но более чистый и современный способ — с помощью Promises.

В следующем разделе мы увидим, как использовать объект Promise для AJAX.

Как использовать JavaScript Promises для AJAX

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

Давайте быстро пересмотрим предыдущий пример с объектом Promise .

function AjaxCallWithPromise() < return new Promise(function (resolve, reject) < const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () < if (objXMLHttpRequest.readyState === 4) < if (objXMLHttpRequest.status == 200) < resolve(objXMLHttpRequest.responseText); >else < reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); >> > objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); >); > AjaxCallWithPromise().then( data => < console.log('Success Response: ' + data) >, error => < console.log(error) >);

Когда функция AjaxCallWithPromise вызывается, она возвращает объект обещания и изначально находится в состоянии ожидания. В зависимости от ответа он вызовет функцию resolve или reject .

Затем мы используем метод then , который используется для планирования обратных вызовов, когда объект обещания успешно разрешен. Метод then принимает два аргумента. Первый аргумент — это обратный вызов, который будет выполнен, когда обещание будет разрешено, а второй аргумент — это обратный вызов для отклоненного состояния.

Вот как вы можете использовать JavaScript Promises для AJAX. В следующем разделе мы увидим, как использовать библиотеку jQuery для выполнения вызовов AJAX.

Как работает AJAX с использованием библиотеки jQuery

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

Библиотека jQuery предоставляет несколько различных методов для выполнения вызовов AJAX, хотя здесь мы рассмотрим стандартный метод ajax , который используется чаще всего.

Взгляните на следующий пример.

Как вы уже знаете, знак $ используется для обозначения объекта jQuery.

Первый параметр метода ajax — это URL-адрес, который будет вызываться в фоновом режиме для выборки контента со стороны сервера. Второй параметр имеет формат JSON и позволяет указывать значения для некоторых различных параметров, поддерживаемых методом ajax .

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

Как видите, с помощью библиотеки jQuery легко выполнять операции AJAX. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решите выполнять вызовы AJAX.

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

Реальный пример AJAX с PHP

В этом разделе мы создадим пример, который извлекает содержимое JSON из файла PHP на стороне сервера с помощью AJAX.

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

      
 
Username: Password:  
 
   

Файл Index.php является довольно стандартной формой HTML, который содержит имя пользователя и поле пароль. Он также содержит фрагмент jQuery JavaScript, который следует схеме, которую мы видели выше.

Мы использовали событие элемента формы submit , которое будет срабатывать, когда пользователь нажимает кнопку отправки. В этом обработчике событий мы инициировали вызов AJAX, который асинхронно отправляет данные формы в файл login.php с помощью метода POST. Получив ответ от сервера, мы анализируем его, используя метод parse объекта JSON . И, наконец, в зависимости от успеха или неудачи мы предпринимаем соответствующие действия.

Давайте также посмотрим, как выглядит login.php.

Файл Login.php содержит логику аутентификации пользователей и возвращает ответ JSON, основанный на успехе или неудаче входа.

Использование Promises для AJAX с jQuery

Помимо этого, метод $.ajax также поддерживает Promises JavaScript. Он предоставляет различные методы, такие как then , done , fail и always что вы могли бы использовать в контексте Promises.

Давайте быстро пересмотрим фрагмент jQuery, который мы использовали в нашем примере, чтобы показать, как использовать его с методом then .

. . $.ajax(< type: "POST", url: 'login.php', data: $(this).serialize() >).then( // функция обратного вызова разрешения/успеха (ответ) < var jsonData = JSON.parse(response); // пользователь успешно вошел в систему в серверной части // давайте перенаправим if (jsonData.success == "1") < location.href = 'my_profile.php'; >else < alert('Invalid Credentials!'); >>, // отклонение/сбой функции обратного вызова () < alert('There was some error!'); >); . . 

Заключение

В этом руководстве мы обсудили основы AJAX и то, как он работает с приложением PHP. В первой половине статьи мы рассмотрели, как AJAX работает в vanilla JS и в библиотеке jQuery. Во второй половине мы создали реальный пример, который продемонстрировал, как вы можете использовать AJAX для получения содержимого PHP на стороне сервера.

Источник:

Источник

Вызвать функцию php через ajax?

Всем привет.
Я понимаю, что этот вопрос уже наверное надоел всем или кому-то покажется глупы НО. Как вызвать определенную функцию php через ajax?

Я придумал дурацкий метод, но он работает. Но мне хотелось бы правильно это сделать.
Суть такова.
Через ajax обращаюсь к файлу, где выписаны все функции. И непосредственно само обращение к определенной функции сделать через условие:

require_once 'func.php'; //пдключаю файл с функциями if (isset($_POST['intt'])) < // в пост передаю определенное название или ключ(как угодно) к которой я и обращаюсь к определенной функции $intt = $_POST['intt']; emailto ($intt); // само выполнение функции >if (isset($_POST['val'])) < $val = $_POST['val']; example ($val); >if (isset($_POST['val2']))

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

Здесь нет какого-то «правильного» стандартного подхода, вы можете передавать один параметр постом например $_POST[‘action’]
и в зависимости от его значения(например используя switch($_POST[‘action’])) выполнять в PHP скрипте нужное действие.
Можно так как вы и сделали, с опытом и для конкретных задач вы будете сами находить нужное решение.
Будете например использовать MVC фреймворки — тогда будете осуществлять это с помощью роутингов.
Так что метод совсем не дурацкий как вы написали, просто метод для небольшого приложения.

if(function_exists($_POST['func'])) < // функция существует, надо ее вызвать $_POST['func'](); // вызвали функцию $_POST['func']($_POST['args']['arg_1']); // передали аргумент $func = $_POST['func']; $func(); // так тоже можно вызвать >

Разумеется не стоит доступ к этому скрипту давать всем. Можно ведь и свой код таким образом выполнить на сервере.
А если всем надо, то делайте список доступных функций:

$allow_functions = ['count', 'rand']; if(in_array($_POST['func'],$allow_functions) && function_exists($_POST['func'])) < // выполняем код >

Источник