Создайте JavaScript-запрос AJAX Post: с jQuery и без него

Что такое AJAX?

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

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

Веб-приложения социальных сетей, такие как Facebook и Twitter, используют AJAX для обновления пользовательских лент и уведомлений.

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

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

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

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

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

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

Это также снижает частоту запросов к веб-серверу, что, в свою очередь, приводит к более быстрому времени отклика.

Что такое POST-запрос?

При выполнении запросов API от браузер, два HTTP-метода, которые вы будете использовать для передачи данных, - это GET и POST. Основное различие между этими двумя методами заключается в способе отправки данных в веб-серверное приложение.

HTTP GET передает данные серверному приложению в парах имени и значения. Эти параметры запроса добавляются к URL-адресу. Например, ниже приведен URL-адрес для запроса GET, содержащий два параметра запроса, которые будут отправлены на сервер:

www.mysite.com/id=12&name="chris"

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

Метод POST передает данные в теле запроса. Данные могут передаваться в форматах JSON и XML.

Как сделать запрос AJAX POST с помощью XHR

Вы можете использовать объект XMLHttpRequest (XHR) для связи с веб-сервером с использованием метода AJAX. Это классический способ выполнения AJAX, но сейчас это не самый лучший способ что Fetch API поддерживается в современных браузерах. В следующем разделе я покажу вам лучший способ отправить запрос POST с помощью функции fetch().

Теперь предположим, что мы хотим опубликовать следующие данные (запись в блоге) на веб-сервере:

/* Data which will be sent to server */
let postObj = { 
       id: 1, 
       title: "What is AJAX", 
       body: "AJAX stands for Asynchronous JavaScript..."
}

Мы можем использовать XHR для отправки данных на веб-сервер следующим образом:

let post = JSON.stringify(postObj)   
const url = "https://jsonplaceholder.typicode.com/posts"
 let xhr = new XMLHttpRequest()
 xhr.open('POST', url, true)
 xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
 xhr.send(post);
 xhr.onload = function () {
     if(xhr.status === 201) {
         console.log("Post successfully created!") 
     }
}   

Мы начали с преобразования объекта в строку JSON для передачи по протоколу HTTP. Затем мы создали объект xhr из класса XMLHttpRequest.

После этого мы открыли запрос, вызвав метод open(), передав следующие параметры: 'POST': метод запроса; мы отправляем данные на сервер url: это URL сервера, на который мы отправляем ресурс true: указывает браузеру запускать код асинхронно Мы приступили к установке заголовка запроса, сообщающего серверу, как обрабатывать данные, которые мы отправляем.

Затем мы отправили текст нашего запроса. Когда запрос будет успешно завершен, будет вызвана функция onload. Внутри этой функции мы выполнили проверку if, чтобы убедиться, что ресурс был успешно создан на сервере (как указано в статусе 201), прежде чем отправлять сообщение в консоль. Вы также можете напрямую получить доступ к значениям из формы на странице, например, так:

let postObj = {     
id: Math.random(), 
       title: document.querySelector('#post-title').value, 
       body: document.querySelector('#post-body').value
   }
   // [...]

   xhr.onload = function () {
       if(xhr.status === 201) {
           let AlertDiv = document.querySelector('#alert')
           AlertDiv.innerHTML =  xhr.response.message
       }
}

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

Как сделать запрос AJAX POST с помощью fetch()

Другим способом выполнения вызовов AJAX в JavaScript является метод fetch().

fetch() - это служебный метод API, встроенный в среду веб-браузера. Это более новый API, чем XMLHttpRequest, с современными функциями, упрощающими его использование.

Мы рекомендуем вам использовать fetch() для AJAX. Следующий код отправляет POST-запрос на сервер с помощью функции fetch():

fetch("https://jsonplaceholder.typicode.com/posts", {    
   method: 'post',
   body: post,
   headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
   }
   }).then((response) => {
   return response.json()
   }).then((res) => {
   if (res.status === 201) {
       console.log("Post successfully created!")
   }
   }).catch((error) => {
   console.log(error)
  })

функция fetch() принимает URL-адрес сервера и объект, содержащий такие параметры, как HTTP-метод, тело запроса и заголовки запроса. Accept указывает, какой тип ответа от сервера клиент может принять. Content-Type указывает формат данных текущего запроса или ответа.

Поскольку наш запрос содержит полезную нагрузку, мы должны использовать заголовок запроса content-type. Когда запрос успешно выполняется на сервере, мы связываем методы then() и catch() для обработки ответа сервера и ошибок соответственно.

Первый метод then() просто преобразует данные ответа в объект JavaScript и возвращает объект. В следующем методе then() мы проверяем статус и выводим сообщение об успешном завершении на консоль. Если какая-либо ошибка или встречается по цепочке, это будет обработано catch().

Как сделать запрос AJAX POST с помощью jQuery

До сих пор мы использовали только веб-API браузера для выполнения AJAX-запросов. Мы также можем выполнить AJAX-запрос, используя библиотеку, подобную jQuery. Запросы POST в jQuery выполняются с помощью функции post().

Я покажу вам, как использовать jQuery для выполнения AJAX-запроса, но, честно говоря, с новым JavaScript Fetch API действительно нет необходимости импортировать целую библиотеку, такую как jQuery, только для AJAX.

Теперь давайте сделаем POST-запрос, используя вместо этого jQuery:

$.post("https://jsonplaceholder.typicode.com/posts", 
{
       id: 1, 
       title: "What is AJAX", 
       body: "AJAX stands for Asynchronous JavaScript..."
   },
   function(data, status) {
       if(status === "success") {
           console.log("Post successfully created!")
       }
   },
"json")

post() принимает четыре аргумента: URL, тело запроса, функцию обратного вызова и формат данных. Вт/ч когда запрос будет успешно завершен, будет вызвана функция обратного вызова, переданная в post(). Эта функция принимает ответ и статус из запроса post в качестве аргументов.

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

Вывод

В этой статье мы рассмотрели три способа выполнения запросов AJAX post в веб-приложении. Мы использовали объект XMLHttpRequest, метод fetch и jQuery. Поскольку функция fetch() использует современные функции JavaScript, такие как promises, я настоятельно рекомендовал использовать ее вместо других опций. Это происходит потому, что вы изучаете и используете конструкции promise, такие как then(), catch() и async/await. Благодаря доступности собственных API, таких как fetch() и XMLHttpRequest, нет необходимости импортировать весь библиотека, подобная jQuery, просто для выполнения AJAX-запросов в вашем приложении.