Что такое приложения AJAX в веб-разработке?

Опубликовано: 1 Января, 2023

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

Интерфейс: Проще говоря, внешний интерфейс веб-сайта — это те части, через которые пользователи могут взаимодействовать с веб-сайтом.

Бэкэнд: Проще говоря, бэкэнд веб-сайта — это те части, где происходит связь между сервером и клиентом, поскольку все это происходит в фоновом режиме, пользователям не нужно об этом беспокоиться.

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

Что такое AJAX и каковы его приложения?

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

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

Вот некоторые из наиболее важных приложений AJAX.

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

Объект XMLHttpRequest: объект XMLHttpRequest можно использовать для обмена данными с сервером за кулисами.

Синтаксис:

var xmlObject = new XMLHttpObject();

В основном есть два метода: open() и send(). доступ к которому может получить ссылочный объект XMLHttpObject. Метод open() используется для подготовки запроса, а метод send() отправляет запрос на сервер.

xmlObj.open("GET", "mypage.php", true);
xmlObj.send();

Типы кода состояния HTTP : это параметры, используемые для определения запроса на отправку на сервер. Первый параметр показывает тип запроса, в основном существует пять типов запросов, т.е. GET, POST, PUT, PATCH, DELETE.

Запрос «GET» запрашивает у сервера информацию о «mypage.php». Если такая страница существует, сервер отправит ответ с состоянием готовности 4 и кодом 200, иначе он вернет код 404, что означает, что страница не существует.

Последний аргумент true — это значение для асинхронности. По умолчанию установлено значение «true», что означает, что этот процесс будет происходить в фоновом режиме, вы можете применить значение «false», чтобы сделать этот процесс синхронным.

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

Пример 1: Всякий раз, когда мы нажимаем на кнопку, она запускает функцию loadPage() . Мы используем функцию обратного вызова xmlObj.onload(), которая обеспечивает завершение цикла запроса и ответа. Мы заполняем HTML-код, используя простую технику манипулирования DOM.

xmlObj.responseText содержит ответ, отправленный сервером в текстовой форме, и это заполнит HTML-элемент div результатом.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script>
        function loadPage() {
            var xmlObj = new XMLHttpRequest();
            xmlObj.onload = () => {
                document.getElementById("ajaxPage")
                    .innerHTML = xmlObj.responseText;
            };
            xmlObj.open("GET", "example.txt", true);
            xmlObj.send();
        }
    </script>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
    <h3>
        Please click here to see changes
        without refershing the page.
    </h3>
    <button type="button" onclick="loadPage()">
        Click Here
    </button>
    <div id="ajaxPage"></div>
</body>
  
</html>

пример.txt:

<html>
<head>
    <title>AJAX EXAMPLE PAGE </title>
</head>
<body> 
    <h2> AJAX EXAMPLE PAGE </h2>
    <h4>Hey there! this is an example page 
        to show jquery ajax working.</h4>
</body>                  
</html>

Выход:

jQuery AJAX: библиотека jQuery имеет метод ajax() , с помощью которого мы можем выполнять асинхронные операции, аналогичные нашему предыдущему примеру. Метод ajax() принимает объект с набором свойств, таких как тип, URL, асинхронность и т. д., похожих на наш XMLHTTPRequest().

Пример: в этом примере мы будем использовать метод jQuery ajax() для достижения функциональности, аналогичной XMLHTTPRequest().

Шаг 1: Давайте создадим файл и назовем его ajax_example2.html. Сначала мы напишем наш базовый шаблонный HTML-код.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Jquery Ajax Tutorial</title>
</head>
  
<body></body>
  
</html>

Шаг 2: Поскольку мы собираемся использовать метод ajax() из библиотеки jQuery, нам сначала нужно импортировать jQuery CDN (сеть доставки контента),

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script>

Шаг 3: После двух предыдущих шагов мы можем использовать библиотеку jQuery в нашем файле «ajax_example2.html». Давайте создадим простой текстовый файл «example.txt» для отображения содержимого этого файла с помощью ajax() .

пример.txt:

<html>
<head>
    <title>AJAX EXAMPLE PAGE </title>
<head>
<body> 
    <h2> AJAX EXAMPLE PAGE </h2>
    <h4>
        Hey there! this is an example page to 
        show jquery ajax working.
    </h4>
</body>                  
</html>

Шаг 4: Мы напишем функцию jQuery, которая будет обновлять нашу веб-страницу. Функция будет выполняться всякий раз, когда мы нажимаем кнопку, и результаты будут отображаться в HTML-элементе div с идентификатором «результат».

Javascript

$(document).ready(function() {
    $("button").click(function() {
        $.ajax({url: "example2.txt", 
            success: function(result) {
                $("#result").html(result);
            }});
    });
});

Окончательный код:

Выход:

Если вам удобно работать с jQuery, вы можете использовать метод ajax() , или же вы можете использовать XMLHTTPRequest(), оба они работают очень похоже, за исключением синтаксиса.

Преимущества:

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

Недостатки:

AJAX может создавать проблемы для поисковых систем, поскольку сильно зависит от JavaScript.
Отладка может быть затруднена для сложных проектов/систем.
Кнопка «Назад» также может вызвать проблемы со страницами, отображаемыми с помощью AJAX.

JQuery Picked

Что такое приложения AJAX в веб-разработке?

HTML

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ