5 апр 2023 в 05:38

Как отправлять запросы на сервер, при этом не перезагружая страницу

Простой

Ожидает приглашения

Приветствую. Сейчас мы разберем ,как можно при помощи js и его популярной библиотеки jquery отправлять асинхронные запросы на сервер.

Отправка асинхронных запросов на сервер без перезагрузки страницы - это технология AJAX (асинхронный JavaScript и XML).

Зачем это нужно?

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

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

Подключение js jquery

Для того, чтобы подключить js jquery к вашей HTML воспользоваться кодом ,который нужно вставить в теге <head>:

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

Написание первого ALAX запроса

Чтобы отправить ALAX запрос , нужно вставить следующий js код на страницу:

$.ajax({
        type: "POST", // Метод запроса
        url: "/musik/like/1", // url запроса
        data: {                 // Параметры для запроса
            'id': id,
        },
        success: function(response) { // Код который выполнится  для удачного запроса
             console.log(response);

        },
        error: function(response) { // Код который выполнится  при ошибке запроса
            console.log(response);
    }

});

Это и весь код для выполнения асинхронного запроса ,который вставляется в тег <script> или в раннее подключенный js файл

CSRFTOKEN

CSRF токен (Cross-Site Request Forgery) - это механизм защиты от атак подделки межсайтовых запросов.

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

CSRF токен решает эту проблему, добавляя уникальный токен к каждому запросу, который проверяется на сервере. Таким образом, если запрос не содержит действительного CSRF токена, сервер отклонит его. Это позволяет защитить веб-приложение от атак подделки межсайтовых запросов.

Тот, кто работает с Python Django, знает, что для отправки POST запросов нужен CSRF токен, поэтому нужно получить этот токен и вставить его в параметры запроса.

Функция для получения токена:

function getCookie(name) {
    /*"Эта функция для получения куки по имени" */
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
           
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Присваиваем переменной csrftoken значение CSRFTOKEN

var csrftoken = getCookie('csrftoken');

Затем мы используем $.ajaxSetup() для определения функции обратного вызова beforeSend, которая вызывается перед отправкой каждого асинхронного запроса. В этой функции мы проверяем, не является ли запрос типом GET, HEAD, OPTIONS или TRACE, и не является ли запрос пересечением доменов, и если нет, то мы устанавливаем заголовок X-CSRFToken в значение токена CSRF.

$.ajaxSetup({beforeSend: function(xhr, settings) {
    if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader('X-CSRFToken', csrftoken);
    }
  }

Передаем параметры в запрос ALAX

data: { 'X-CSRFToken': csrftoken},

Весь код:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Найти имя куки, начинающееся с переданного имени
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}




function like(id){
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({beforeSend: function(xhr, settings) {
    if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader('X-CSRFToken', csrftoken);
    }
  }
});

    $.ajax({
        type: "POST", // Метод запроса
        url: "/musik/like/1", // url запроса
        data: {                 // Параметры для запроса
            'id': id,
            'X-CSRFToken': csrftoken
        },
        success: function(response) { // Код который выполнится  для удачного запроса
             console.log(response);

        },
        error: function(response) { // Код который выполнится  при ошибке запроса
            console.log(response);
    }

});

}

Обработчик на сервере

Обработчик асинхронного запроса и обычного ничем не отличаются, кроме возвращаемого объета.Так ,например обычный обработчик возвращает шаблон HTML,то обработчик асинхронного запроса должен возвращать json объект.Пример написан на Python Django.

Обычный запрос:

def home(request):
    return render(request, 'main/home.html') #Возвращает обькт render (шаблон)

def like_musik(request, id):
    if request.method == "POST": 
        #Логика функции
        return JsonResponse({'success': True})#Возвращаем Json объект

Заключение

В ходе этой статьи мы узнали о технологии AJAX и научились при помощи него отправлять асинхронные запросы.

Теги:

асинхронное программирование

Хабы: