Pull to refresh

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

Level of difficultyEasy

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

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

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

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

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

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

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

  4. Добавление товаров в корзину: AJAX может использоваться для добавления товаров в корзину без перезагрузки страницы.

  5. Динамическое создание элементов на странице: 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');
  1. Затем мы используем $.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 и научились при помощи него отправлять асинхронные запросы.

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.