Сегодня мы собираемся изучить концепцию AJAX с PHP и JavaScript. Техника AJAX помогает вам улучшить пользовательский интерфейс вашего приложения и улучшить общее впечатление конечного пользователя.
Что такое AJAX?
AJAX означает асинхронный JavaScript и XML, и он позволяет вам получать контент с внутреннего сервера асинхронно, без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без ее перезагрузки.
Давайте рассмотрим пример, чтобы понять, как можно использовать AJAX в повседневной разработке приложений. Предположим, вы хотите создать страницу, которая отображает информацию профиля пользователя с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и т. д.
Обычным подходом было бы создание разных веб-страниц для каждого раздела. Так, например, пользователи могут щелкнуть ссылку с социальной информацией, чтобы перезагрузить браузер и отобразить страницу с социальной информацией. Однако это замедляет переход между разделами, поскольку пользователю каждый раз приходится ждать, пока браузер перезагрузится и страница будет отображаться снова.
Что такое AJAX? Обзор за 5 минут
С другой стороны, вы также можете использовать AJAX для создания интерфейса, который загружает всю информацию без обновления страницы. В этом случае вы можете отображать разные вкладки для всех разделов, и, щелкнув вкладку, он получает соответствующий контент с внутреннего сервера и обновляет страницу без обновления браузера. Это поможет вам улучшить общее впечатление конечных пользователей.
Общий вызов AJAX работает примерно так:
Давайте быстро рассмотрим обычный поток AJAX:
- Сначала пользователь открывает веб-страницу, как обычно, с синхронным запросом.
- Затем пользователь щелкает элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к внутреннему серверу. Конечный пользователь этого не заметит, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете обнаружить эти вызовы AJAX с помощью такого инструмента, как Firebug.
- В ответ на запрос AJAX сервер может вернуть строковые данные XML, JSON или HTML.
- Данные ответа анализируются с помощью JavaScript.
- Наконец, проанализированные данные обновляются в DOM веб-страницы.
Как видите, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.
В следующем разделе мы расскажем, как реализовать AJAX с использованием vanilla JavaScript.
Как работает AJAX с использованием vanilla JavaScript
В этом разделе мы увидим, как AJAX работает в vanilla JavaScript. Конечно, доступны библиотеки JavaScript, которые упрощают выполнение вызовов AJAX, но всегда интересно знать, что происходит под капотом.
Давайте посмотрим на следующий код vanilla JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.
var objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function() < if(objXMLHttpRequest.readyState === 4) < if(objXMLHttpRequest.status === 200) < alert(objXMLHttpRequest.responseText); >else < alert(‘Error Code: ‘ + objXMLHttpRequest.status); alert(‘Error Message: ‘ + objXMLHttpRequest.statusText); >> > objXMLHttpRequest.open(‘GET’, ‘request_ajax_data.php’); objXMLHttpRequest.send();
Давайте рассмотрим приведенный выше код, чтобы понять, что происходит за кулисами.
- Сначала мы инициализируем объект XMLHttpRequest , который отвечает за выполнение вызовов AJAX.
- У объекта XMLHttpRequest есть свойство readyState , и значение этого свойства изменяется в течение жизненного цикла запроса. Он может содержать одно из четырех значений: OPENED , HEADERS_RECEIVED , LOADING , и DONE .
- Мы можем настроить функцию обработчика данных для изменений состояния с помощью свойства onreadystatechange . Именно это мы и сделали в приведенном выше примере: мы использовали функцию, которая будет вызываться каждый раз при изменении свойства состояния.
- В этой функции мы проверили, что значение readyState равнозночно 4 , что означает, что запрос завершен и мы получили ответ от сервера. Затем мы проверили, равен ли код состояния 200 , что означает, что запрос был выполнен успешно. Наконец, мы получаем ответ, который хранится в свойстве responseText объекта XMLHttpRequest .
- После настройки обработчика данных мы инициируем запрос, вызывая метод open объекта XMLHttpRequest . Значение свойства readyState будет установлено равным 1 после этого вызова.
- Наконец, мы вызвали метод send объекта XMLHttpRequest , который фактически отправляет запрос на сервер. Значение свойства readyState будет установлено равным 2 после этого вызова..
- Когда сервер ответит, он в конечном итоге установит значение 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 , который используется чаще всего.
Взгляните на следующий пример.
$.ajax( ‘request_ajax_data.php’, < success: function(data) < alert(‘AJAX call was successful!’); alert(‘Data from the server’ + data); >, error: function() < alert(‘There was some error performing the AJAX call!’); >> );
Как вы уже знаете, знак $ используется для обозначения объекта jQuery.
Первый параметр метода ajax — это URL-адрес, который будет вызываться в фоновом режиме для выборки контента со стороны сервера. Второй параметр имеет формат JSON и позволяет указывать значения для некоторых различных параметров, поддерживаемых методом ajax .
В большинстве случаев вам нужно будет указать обратные вызовы успеха и сбоя. Обратный вызов успеха будет вызван после успешного завершения вызова AJAX. Ответ, возвращенный сервером, будет передан функции обратного вызова успеха. С другой стороны, обратный вызов сбоя будет вызван, если что-то пойдет не так и возникла проблема при выполнении вызова AJAX.
Как видите, с помощью библиотеки jQuery легко выполнять операции AJAX. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решите выполнять вызовы AJAX.
В следующем разделе мы увидим реальный пример, чтобы понять, как все это работает с PHP.
Реальный пример AJAX с PHP
В этом разделе мы создадим пример, который извлекает содержимое JSON из файла PHP на стороне сервера с помощью AJAX.
В демонстрационных целях мы создадим пример, который выполняет вход пользователя в систему с использованием AJAX и jQuery. Для начала создадим файл index.php, как показано в следующем фрагменте, который отображает базовую форму входа.
Username: Password: $(document).ready(function() < $(‘#loginform’).submit(function(e) < e.preventDefault(); $.ajax(< type: «POST», url: ‘login.php’, data: $(this).serialize(), success: function(response) < var jsonData = JSON.parse(response); // пользователь успешно вошел в систему в серверной части // давайте перенаправим if (jsonData.success == «1») < location.href = ‘my_profile.php’; >else < alert(‘Invalid Credentials!’); >> >); >); >);
Файл Index.php является довольно стандартной формой HTML, который содержит имя пользователя и поле пароль. Он также содержит фрагмент jQuery JavaScript, который следует схеме, которую мы видели выше.
Что такое AJAX и как он работает
В этой статье вы прочитаете что такое AJAX, для чего нужен и принципы работы этой технологии.
Что такое AJAX:
AJAX это асинхронный JavaScript, иногда XML, делается это благодаря различным встроенным методам.
Асинхронный означает что вы можете отравлять запросы или получать ответы, без перезагрузки страницы, тут больше нечего объяснять.
Как работает AJAX:
Первое что стоит сказать про технологию, это то, что она не самостоятельная, а совокупность нескольких, связанных между собой технологий, которые построены на двух принципах.
- Использование динамического обращение к серверу, без перезагрузки страницы;
- Использование DHTML для динамического изменения содержания страницы;
Примечание:
DHTML означает Dynamic HTML, или если на русском,
то динамический HTML.
Для отправки асинхронных данных в JavaScript используется объект XMLHttpRequest, который отправляет XML данные на сервер и получает данные, конечно, делает это всё асинхронно.
Также в последние время стало популярным отправлять не XML запросы и ответы, а делать из в формате JSON, что на мой взгляд упростила работу с этим.
Различие:
Также посмотрите диаграмму, которая показывает различие обычного модели от AJAX модели.
Примечание:
Давайте разберём картинку, то что нарисовано с лева, это обычная модель, как вы видите по ней, мы отправляем HTTP запрос и получаем в ответ HTML файл, но вмести с ним получаем ещё CSS и JS файлы.
Теперь посмотрите что происходит с AJAX моделью, в начале с помощью JavaScript создаём обработчик и отправляем эти данные через HTTP, потом, когда сервер их обработает, он отпрвляет пользователю ответ виде XML, обработчик AJAX сразу обработает данные.
Также, как говорилось выше, сейчас часто отправляют и получают данные в качестве JSON массива.
Для чего нужен AJAX:
Самое главное для чего эта технология нужна, так это что бы, гибко и не заметно отправлять запрос и зависимо от ответа менять содержимое страницы.
Например, вот вы в интернет магазине нажимаете на кнопку «Добавить в корзину», обычно, после этого действия, сверху, на иконки корзины появляется число, которое обозначает число товаров добавленные в корзину, это делается благодаря AJAX.
Также используется для опросов, или в Google, для показа похожих запросов.
Реализация AJAX:
Последнее, что стоит объяснить, это то, благодаря чему можно работать с ним, на JavaScript, хотя как говорилось выше, есть объект класса XMLHttpRequest, но с ним работать очень можно, лучше использовать сторонние библиотеки.
Первое что можно вспомнить, это JQuery, с ним работать крайне легко, но он уже устарел, поэтому его если использовать, так только в старых проектах.
Второе это fetch, тоже крайне удобная библиотека, также её важной отличительной особенностью, можно считать, что она встроена уже в JS и вам нечего скачивать не надо.
Последняя библиотека, это Axios.js, это моя любимая библиотека для работы с AJAX, хоть во многом она похожа на fetch, но реализовано там всё удобней, как по мне.
Вывод:
В этой статье вы прочитали о том, что такое AJAX, для чего нужен и принципы работы этой технологии.
Источник: prognote.ru
Как работать с AJAX
Узнайте основы работы с AJAX и примеры использования для обмена данными между клиентом и сервером без перезагрузки страницы.
Алексей Кодов
Автор статьи
1 июня 2023 в 8:42
AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая обмениваться данными между клиентом и сервером без перезагрузки страницы. В данной статье мы рассмотрим основы работы с AJAX и приведем примеры использования.
Что такое AJAX?
AJAX — это сокращение от Asynchronous JavaScript and XML. Это технология, позволяющая обмениваться данными между клиентом (браузером) и сервером без перезагрузки страницы. Вместо XML сейчас часто используется JSON (JavaScript Object Notation) для передачи данных, так как он легче и быстрее обрабатывается.
AJAX работает с помощью XMLHttpRequest или Fetch API (для современных браузеров), которые позволяют отправлять HTTP-запросы и получать ответы от сервера без перезагрузки страницы.
Примеры использования AJAX
Создание и отправка запроса с использованием XMLHttpRequest
// Создание объекта XMLHttpRequest var xhr = new XMLHttpRequest(); // Настройка обработчика события, который будет вызван при получении ответа от сервера xhr.onreadystatechange = function() < if (xhr.readyState === 4 xhr.status === 200) < console.log(xhr.responseText); >>; // Открытие запроса (тип запроса, URL, асинхронность) xhr.open(‘GET’, ‘https://api.example.com/data’, true); // Отправка запроса xhr.send();
Создание и отправка запроса с использованием Fetch API
// Отправка запроса и обработка ответа fetch(‘https://api.example.com/data’) .then(response => < if (response.ok) < return response.json(); >else < throw new Error(‘Ошибка при получении данных’); >>) .then(data => < console.log(data); >) .catch(error => < console.error(‘Произошла ошибка:’, error); >);
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Важные моменты при работе с AJAX
- AJAX позволяет обновлять только часть страницы, что улучшает пользовательский опыт и снижает нагрузку на сервер.
- Взаимодействие с сервером происходит асинхронно, что означает, что пользователь может продолжать взаимодействовать с страницей, пока данные загружаются.
- Следует помнить о безопасности при обработке данных, полученных с помощью AJAX, особенно если они приходят с других доменов или от пользователей.
В заключение, AJAX — это мощный и гибкий инструмент для веб-разработки, который позволяет улучшить интерактивность и отзывчивость сайта. Удачи в изучении!
Источник: sky.pro