API и AJAX в JavaScript

Что такое API?

API (Application Programming Interface) — это интерфейс, позволяющий различным приложениям взаимодействовать друг с другом. JavaScript позволяет взаимодействовать с API через HTTP-запросы.

Работа с AJAX

AJAX (Asynchronous JavaScript and XML) позволяет загружать данные с сервера асинхронно без перезагрузки страницы.

// Пример использования XMLHttpRequest
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    } else {
        console.error('Ошибка при загрузке данных');
    }
};
xhr.send();
            

Fetch API

Fetch API — это современный способ работы с HTTP-запросами в JavaScript. Он возвращает промис и позволяет использовать более удобный синтаксис.

// Пример использования Fetch API
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Сеть ответила с ошибкой');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));
            

Методы HTTP-запросов

Fetch API поддерживает различные методы HTTP-запросов, такие как GET, POST, PUT, DELETE и другие.

// Пример метода POST
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({name: 'John', age: 30}),
})
.then(response => response.json())
.then(data => console.log('Успех:', data))
.catch(error => console.error('Ошибка:', error));

// Пример метода PUT
fetch('https://api.example.com/data/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({name: 'John', age: 31}),
})
.then(response => response.json())
.then(data => console.log('Успех:', data))
.catch(error => console.error('Ошибка:', error));

// Пример метода DELETE
fetch('https://api.example.com/data/1', {
    method: 'DELETE',
})
.then(response => {
    if (response.ok) {
        console.log('Запись удалена');
    }
})
.catch(error => console.error('Ошибка:', error));
            

Обработка ошибок и статус-коды HTTP

При работе с HTTP-запросами важно учитывать статус-коды, которые возвращает сервер. Вот основные из них:

• 200 OK: Запрос успешно выполнен.
• 201 Created: Ресурс успешно создан.
• 400 Bad Request: Неверный запрос.
• 401 Unauthorized: Пользователь не авторизован.
• 403 Forbidden: Доступ запрещен.
• 404 Not Found: Ресурс не найден.
• 500 Internal Server Error: Внутренняя ошибка сервера.

// Пример обработки ошибок
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            switch(response.status) {
                case 404:
                    throw new Error('Ресурс не найден (404)');
                case 500:
                    throw new Error('Внутренняя ошибка сервера (500)');
                default:
                    throw new Error('Ошибка: ' + response.status);
            }
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));
            

Работа с JSON

JSON (JavaScript Object Notation) — это формат обмена данными, который широко используется в веб-разработке. В JavaScript работа с JSON осуществляется с помощью методов JSON.stringify() и JSON.parse().

// Пример работы с JSON
let jsonString = JSON.stringify({name: 'John', age: 30});
console.log(jsonString); // {"name":"John","age":30}

let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // John
            

Кросс-доменные запросы (CORS)

CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет выполнять запросы из одного домена к ресурсам на другом домене. Для этого сервер должен включить специальные заголовки в ответ.

// Пример запроса с поддержкой CORS
fetch('https://api.otherdomain.com/data', {
    method: 'GET',
    mode: 'cors', // режим CORS
    headers: {
        'Content-Type': 'application/json',
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));
            

Примеры использования сторонних API

Взаимодействие с популярными API позволяет расширить возможности вашего приложения. Вот несколько примеров:

OpenWeatherMap API

// Пример запроса к OpenWeatherMap API
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));
            

GitHub API

// Пример запроса к GitHub API
fetch('https://api.github.com/users/octocat')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));
            

Google Maps API

// Пример запроса к Google Maps API (требуется API ключ)
fetch('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway&key=YOUR_API_KEY')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));