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

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

Что такое AJAX?

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

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

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

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

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

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

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

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

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

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

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

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

1

<script>

2

var objXMLHttpRequest = new XMLHttpRequest();

3

objXMLHttpRequest.onreadystatechange = function() {

4

  if(objXMLHttpRequest.readyState === 4) {

5

    if(objXMLHttpRequest.status === 200) {

6

          alert(objXMLHttpRequest.responseText);

7

    } else {

8

          alert('Error Code: ' +  objXMLHttpRequest.status);

9

          alert('Error Message: ' + objXMLHttpRequest.statusText);

10

    }

11

  }

12

}

13

objXMLHttpRequest.open('GET', 'request_ajax_data.php');

14

objXMLHttpRequest.send();

15

</script>

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

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 работает с ванильным JavaScript. Конечно, это был очень простой пример для демонстрации концепции AJAX, и в реальном приложении все может быть довольно сложно, так как вам нужно обработать многие различные сценарии успеха и неудач. Таким образом, было бы неплохо выбрать библиотеку JavaScript, которая скрывает специфические сложности браузера!

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

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

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

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

Посмотрите на следующий пример.

1

<script>

2

$.ajax(

3

  'request_ajax_data.php',

4

  {

5

      success: function(data) {

6

        alert('AJAX call was successful!');

7

        alert('Data from the server' + data);

8

      },

9

      error: function() {

10

        alert('There was some error performing the AJAX call!');

11

      }

12

   }

13

);

14

</script>

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

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

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

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

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

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

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

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

1

<!doctype html>

2

<html>

3

<head>

4

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

5

</head>

6

<body>

7

<form id="loginform" method="post">

8

    <div>

9

        Username:

10

        <input type="text" name="username" id="username" />

11

        Password:

12

        <input type="password" name="password" id="password" />    

13

        <input type="submit" name="loginBtn" id="loginBtn" value="Login" />

14

    </div>

15

</form>

16

<script type="text/javascript">

17

$(document).ready(function() {

18

    $('#loginform').submit(function(e) {

19

        e.preventDefault();

20

        $.ajax({

21

            type: "POST",

22

            url: 'login.php',

23

            data: $(this).serialize(),

24

            success: function(response)

25

            {

26

                var jsonData = JSON.parse(response);

27

28

                // user is logged in successfully in the back-end

29

                // let's redirect

30

                if (jsonData.success == "1")

31

                {

32

                    location.href = 'my_profile.php';

33

                }

34

                else

35

                {

36

                    alert('Invalid Credentials!');

37

                }

38

           }

39

       });

40

     });

41

});

42

</script>

43

</body>

44

</html>

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

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

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

1

<?php

2

if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {

3

    // do user authentication as per your requirements

4

    // ...

5

    // ...

6

    // based on successful authentication

7

    echo json_encode(array('success' => 1));

8

} else {

9

    echo json_encode(array('success' => 0));

10

}

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

Заключение

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

Если у вас есть какие-либо сомнения или вопросы, не стесняйтесь выражать свои мысли, используя канал ниже!