Частичная иллюстрация XMLHttpRequest (XHR) в JavaScript.

Мы все создали симуляцию «формы», используя HTML и CSS, и немного JavaScript, чтобы сделать ее более интерактивной. Но до сих пор мы не использовали никаких запросов XHR для отправки и получения данных с сервера.

Во-первых, мы должны понимать важность запросов XHR в JavaScript. Без отправки и получения данных с сервера невозможно сделать «форму» динамичной и интерактивной в режиме реального времени. Итак, чтобы сделать «форму» динамической, мы должны выполнить определенные шаги.

Шаги, ведущие к идеальному XHR-запросу

  • Создать объект XHR — объекты XHR используются для связи с сервером. XHR означает XMLHttpRequest. Конструктор инициализирует «XMLHttpRequest».
var xhr = new XMLHttpRequest();
  • Открыть объект XHR. Очень важно «открыть» объект XHR, поскольку он включает в себя упоминание «метода» для выполнения, т. е. «GET», «POST», «PUT» и т. д.
xhr.open("method_name", "url");
  • Отправить запрос — после открытия объекта XHR и упоминания «метода» для выполнения пришло время отправить запрос на сервер и дождаться ответа.
xhr.send();

В методе «отправить» есть нечто большее. Если вы выполняете запрос «POST», важно задействовать «тело» вместе с методом «отправить».

Также имейте в виду, что данные, отправляемые в теле, должны быть в формате JSON. И, чтобы преобразовать данные объекта в JSON, вы можете использовать «JSON.stringify (данные объекта)» и «JSON.parse (данные JSON)», чтобы преобразовать их обратно в данные объекта.

var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));
  • Что-то сделать с ответом. Наконец, после того, как запрос отправлен и ответ получен, пришло время что-то сделать с этим ответом. Вы можете выполнять множество функций с ответом.
xhr.addEventListener("load", function(){
  console.log(xhr.response);
})

Основные методы XHR

  • GET — метод «GET» используется для отправки запроса на сервер для получения данных с «url», упомянутого в методе «open».
xhr.open("GET", "url");
  • POST — метод «POST» используется для добавления нового ресурса в упомянутый «url». Данные должны быть отправлены в формате JSON.
xhr.open("POST", "url");
var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));
  • PUT — метод «PUT» используется для изменения уже существующего ресурса, присутствующего на сервере. Это также включает в себя отправку данных в виде JSON. Очень важно помнить, что метод «PUT» должен содержать полный ресурс, а не только «изменения, которые необходимо сделать».
xhr.open("PUT", "url");
var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));
  • PATCH — метод «PATCH» аналогичен методу «PUT», но между этими двумя методами есть небольшая разница. Метод «ИСПРАВЛЕНИЕ» должен содержать только «изменения, которые необходимо внести» в ресурс, а не весь ресурс.
xhr.open("PATCH", "url");
var body = {
  name: "Sarthak",
  city: "Noida"
}
xhr.send(JSON.stringify(body));
  • УДАЛЕНИЕ — «УДАЛЕНИЕ», как следует из названия, представляет собой метод удаления ресурса с сервера.
xhr.open("DELETE", "url");
xhr.send();

Резюме

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