Получите запрос с помощью AJAX, создав собственную библиотеку HTTP

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

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

Ссылка на API: https://jsonplaceholder.typicode.com/posts

Что такое Аякс?

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

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

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

Подход: Для создания файла «library.js» необходимо выполнить следующие действия.

В library.js файле, сделать функцию easyHTTP инициализировать метод новый XMLHttpRequest ().
Установите easyHTTP.prototype.get на функцию, которая содержит два параметра url и обратный вызов.
Теперь инициируйте объект с помощью функции открытия. Он принимает три параметра: первый - это тип (GET или POST, PUT или DELETE), второй - это URL-адрес API, а последний - логическое значение («истина» означает асинхронный вызов, а «ложь» означает синхронный вызов).
Теперь мы воспользуемся функцией onload для отображения данных. Функция onload выполняется после завершения вызова API. Мы проверим статус успеха. Если код состояния равен 200, то мы запустим функцию обратного вызова, которая сама содержит ошибку двух аргументов и текст ответа. Если код состояния не 200, функция обратного вызова просто распечатает сообщение об ошибке.
Последний шаг - отправить запрос с помощью функции send () .

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

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

Функция обратного вызова содержит два аргумента error для печати возникающих ошибок и ответа для получения фактического ответа.

Выполнение вышеуказанных шагов:
HTML файл:

HTML

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "UTF-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" >
 
    < title >Get request</ title >
 </ head >
 
< body >
    < h1 >
        Get 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 > 

library.js:

Javascript

 function easyHTTP() {
 
    // Initialising new XMLHttpRequest method
    this .http = new XMLHttpRequest();
 }
 
// Make an HTTP GET Request
 easyHTTP.prototype.get = function (url, callback) {
 
    // Open an obejct (GET/POST, PATH,
    // ASYN-TRUE/FALSE)
    this .http.open( 'GET' , url, true );
 
    // Assigning this to self to have
    // scope of this into the function
    let self = this ;
 
    // When response is ready
    this .http.onload = function () {
 
        // Checking status
        if (self.http.status === 200) {
 
            // Callback function (Error, response text)
            callback( null , self.http.responseText);
        } else {
 
            // Callback function (Error message)
            callback( 'Error: ' + self.http.status);
        }
    }
 
    // At last send the request
    this .http.send();
 }

app.js

Javascript

 // Instantiating easyHTTP
 const http = new easyHTTP;
 
// Get prototype method(URL, callback(error,
 // response text))
 http.get( ' https://jsonplaceholder.typicode.com/posts ' ,
    function (err, posts) {
        if (err) {
            console.log(err);
        } else {
 
            // parsing string data to object
            let data = JSON.parse(posts);
            console.log(data);
        }
    });

Выход:

Node.js JavaScript Вопросы о Web технологиях

Получите запрос с помощью AJAX, создав собственную библиотеку HTTP

HTML

Javascript

Javascript

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