как добавить пользовательский http заголовок в ajax запрос с помощью javascript

Question

Ivan Gagarinov · Accepted Answer

Можно использовать объект `XMLHttpRequest` или `Fetch API`. `XMLHttpRequest` — это более старый способ выполнения AJAX-запросов, но он все еще широко используется:

```javascript
// Создаем новый объект XMLHttpRequest
const xhr = new XMLHttpRequest();

// Открываем соединение (метод, URL, асинхронность)
xhr.open("GET", "https://api.example.com/data", true);

// Устанавливаем пользовательский заголовок
xhr.setRequestHeader("X-Custom-Header", "MyCustomValue");

// Устанавливаем обработчик события загрузки
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // Обработка успешного ответа
        console.log("Response:", xhr.responseText);
    } else {
        // Обработка ошибки
        console.error("HTTP Error:", xhr.status);
    }
};

// Устанавливаем обработчик события ошибки
xhr.onerror = function() {
    console.error("Request failed");
};

// Отправляем запрос
xhr.send();
```

`Fetch API` — это более новый и более удобный способ работы с HTTP-запросами в JavaScript. Вот как можно сделать то же самое с помощью `Fetch API`:

```javascript
// Определяем параметры запроса
fetch("https://api.example.com/data", {
    method: "GET", // Метод запроса
    headers: {
        "X-Custom-Header": "MyCustomValue", // Устанавливаем пользовательский заголовок
        // Можно добавить другие заголовки, если необходимо
        "Content-Type": "application/json"
    }
})
.then(response => {
    // Проверяем успешность ответа
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // Обработка ответа в формате JSON
})
.then(data => {
    // Обработка данных
    console.log("Response:", data);
})
.catch(error => {
    // Обработка ошибок
    console.error("Fetch error:", error);
});
```

как добавить пользовательский http заголовок в ajax запрос с помощью javascript

Ответы

Каталог