Вызовы XHR AJAX в JavaScript

Сегодня я покажу вам, как сделать запрос XHR AJAX для выполнения вызовов RESTful API, таких как «GET» и «POST», к вашим конечным точкам.

Недавно мне пришлось сделать это при создании административного сайта на работе, и я хотел бы поделиться со всеми вами, как это сделать!

Давайте начнем!

В вашем html у вас будет базовая форма с кнопкой отправки с функцией, прикрепленной к форме, которую мы настроим в нашем ajax.js ниже.

// ajax.js
function sendData(event, postURL) {
    event.preventDefault()
    var xhr = new XMLHttpRequest()
    xhr.open('POST', postURL, true)
    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert("Send input data was successful")
          } else {
            alert("There was a problem sending input data. Please try again")
          }
       }
    }
    var formData = new FormData( document.getElementById(formID) );
    xhr.send(formData);
}

Итак, у нас есть простая функция отправки, когда мы нажимаем кнопку отправки в html-файле. Как видите, мы создаем новый объект XMLHttpRequest, чтобы настроить HTTP-запрос. По сути, этот объект позволит вам сделать HTTP-запрос (например, отправить). xhr.open(‘POST’, postURL, true) эта строка не требует пояснений. Мы открываем POST-запрос с указанным postURL или конечной точкой. Последний аргумент этого вызова - сообщить запросу, что это будет вызов AJAX.

Функция xhr.onreadystatechange является обратным вызовом после завершения вызова AJAX с запросом, поэтому важно, чтобы эта функция выполнялась перед отправкой данных формы. Если функция была размещена после отправки данных, вы не получите сообщение о том, были ли данные отправлены успешно или нет. Чтобы узнать больше о том, как отправлять составные данные, ознакомьтесь с моей публикацией об этом здесь.

И это все, что нужно для создания вызова AJAX. Очень просто и легко!