Запрос POST с использованием AJAX путем создания собственной библиотеки HTTP

Опубликовано: 30 Июля, 2021

Задача состоит в том, чтобы показать, как XMLHttpRequest можно использовать для отправки данных POST в API, создав собственную библиотеку HTTP. Мы возьмем поддельный API, который будет содержать массив объектов в качестве примера, и из этого API мы покажем данные POST с помощью метода XMLHttpRequest , создав пользовательскую библиотеку HTTP.

Используемый API: https://jsonplaceholder.typicode.com/posts

Что такое Аякс?
Ajax или асинхронный JavaScript и XML используются для связи с сервером без обновления веб-страницы и, таким образом, улучшают взаимодействие с пользователем и повышают производительность. Чтобы узнать больше об Ajax, щелкните https://www.geeksforgeeks.org/ajax-introduction/.

Предварительные требования: Требуются только базовые знания HTML, CSS и JavaScript.

Примечание. Сначала создайте файл HTML и добавьте разметку HTML в соответствии с требованиями. Внизу тега body прикрепите два файла сценария: library.js и app.js в том же порядке.

Шаги, необходимые для создания файла library.js:

В файле library.js создайте функцию easyHTTP для инициализации нового метода XMLHttpRequest ().
Установите easyHTTP.prototype.post на функцию, которая содержит три параметра : url, данные и обратный вызов .
Теперь откройте объект с помощью функции this.http.open. Он принимает три параметра: первый - тип запроса (GET или POST, PUT или DELETE), второй - URL-адрес API, а последний - логическое значение (true означает асинхронный вызов, а false - синхронный вызов).
Теперь мы воспользуемся функцией onload для отображения данных. Но перед этим сначала нам нужно установить тип содержимого с помощью метода this.http.setRequestHeader, а также назначить это ключевое слово на себя, чтобы включить область действия этого ключевого слова в функцию загрузки. Функция onload выполняется после завершения вызова API. Эта функция запустит функцию обратного вызова, которая имеет два аргумента: текст ошибки и текст ответа.
Последний шаг - отправить запрос с помощью функции send () . Следует отметить, что функция send () должна отправлять данные после преобразования данных объекта в строку с помощью JSON.stringify (data) .

Шаги, необходимые для создания файла app.js:

Прежде всего создайте экземпляр easyHTTP с новым ключевым словом.
Создайте пользовательские данные ( объект ) для публикации.
Передайте URL-адрес, данные и функцию обратного вызова в функции прототипа сообщения.
Функция обратного вызова содержит два аргумента error для печати в случае возникновения какой-либо ошибки и ответ для получения фактического ответа.

Имя файла: index.html

 <!DOCTYPE html>
 < html lang = "en" >
 < head >
    < meta charset = "UTF-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" >
    < title >POST request</ title >
 </ head >
 < body >
    < h1 >
        POST request using xmlhttpRequest/Ajax
        by making custom HTTP library.
    </ h1 >
   
    <!-- including library.js and app.js files -->
    < script src = "library.js" ></ script >
    < script src = "app.js" ></ script >
 </ body >
 
</ html > 

Имя файла: app.js

 // Instantiating easyHTTP
 const http = new easyHTTP;
 
// Create Data
 const data = {
  title: 'Custom HTTP Post' ,
  body: 'This is a custom post data'
 };
 
 
// Post prototype method(url, data,
 // response text)
 http.post(
 ' https://jsonplaceholder.typicode.com/posts ' ,
   data,
   function (err, post) {
      if (err) {
        console.log(err);
      } else {
        // Parsing string data to object
        // let data = JSON.parse(posts);
        console.log(post);
    }
 });

Имя файла: library.js

  function easyHTTP() {
 
    // Initializing new XMLHttpRequest method.
    this .http = new XMLHttpRequest();
  }
 
  // Make an HTTP POST Request
  easyHTTP.prototype.post = function (url, data, callback) {
 
  // Open an object (POST, PATH, ASYN-TRUE/FALSE)
  this .http.open( 'POST' , url, true );
 
  // Set content-type
  this .http.setRequestHeader( 'Content-type' , 'application/json' );
 
  // Assigning this to self to have
  // scope of this into the function
  let self = this ;
 
  // When response is ready
  this .http.onload = function () {
 
    // Callback function (Error, response text)
    callback( null , self.http.responseText);
  }
 
  // Since the data is an object so
  // we need to stringify it
  this .http.send(JSON.stringify(data));
 }

Выход:
Откройте файл index.html в любом браузере и откройте его консоль, щелкнув правой кнопкой мыши -> Проверить элемент -> консоль . Следовательно, вы увидите результат ниже.

Примечание. Он содержит одну дополнительную пару «ключ-значение» как «id» 101. Не беспокойтесь об этом, поскольку она создается по умолчанию.

Node.js JavaScript HTML JavaScript-Misc

Запрос POST с использованием AJAX путем создания собственной библиотеки HTTP

РЕКОМЕНДУЕМЫЕ СТАТЬИ