Главная » Языки программирования

Javascript send request function

Содержание
  1. XMLHttpRequest.send()
  2. Синтаксис
  3. Параметры
  4. Возвращаемое значение
  5. Исключения
  6. Пример: GET
  7. Пример: POST
  8. Спецификации
  9. Поддержка браузерами
  10. Смотрите также
  11. Found a content problem with this page?
  12. Javascript send request function
  13. XMLHttpRequest
  14. Методы jQuery
  15. $.get
  16. $.post
  17. $.getJSON
  18. $.ajax
  19. Fetch
  20. Axios
  21. SuperAgent
  22. Ky

XMLHttpRequest.send()

Метод XMLHttpRequest.send() отправляет запрос. Если запрос асинхронный (каким он является по умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод send() принимает необязательные аргументы в тело запросов. Если метод запроса GET или HEAD , то аргументы игнорируются и тело запроса устанавливается в null.

Если заголовок Accept не был задан с помощью setRequestHeader() , будет отправлено значение Accept по умолчанию */* .

Синтаксис

Параметры

Данные из параметра body оправляются в запросе через XHR. Это могут быть:

  • Document , и в этом случае данные будут сериализованы перед отправкой.
  • BodyInit , которые, согласно спецификации Fetch могут быть: Blob , BufferSource , FormData , URLSearchParams , ReadableStream (en-US), или объектом USVString .

Лучший способ передать двоичные данные (например при загрузке файлов) — это использование ArrayBufferView (en-US) или Blobs в сочетании с методом send() .

Если никакого значения не определено в качестве body, то будет использовано значение по умолчанию: null .

Возвращаемое значение

Исключения

Исключение Описание
InvalidStateError send() уже был вызван для запроса, и/или запрос завершён.
NetworkError Тип запрошенного ресурса — Blob, но метод запроса не GET .

Пример: GET

var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.onload = function () < // Запрос завершён. Здесь можно обрабатывать результат. >; xhr.send(null); // xhr.send('string'); // xhr.send(new Blob()); // xhr.send(new Int8Array()); // xhr.send(< form: 'data' >); // xhr.send(document);

Пример: POST

var xhr = new XMLHttpRequest(); xhr.open("POST", '/server', true); //Передаёт правильный заголовок в запросе xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() > xhr.send("foo=bar&lorem=ipsum"); // xhr.send('string'); // xhr.send(new Blob()); // xhr.send(new Int8Array()); // xhr.send(< form: 'data' >); // xhr.send(document);

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Читайте также:  Php защита от sql инъекций функция

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Javascript send request function

Варианты осуществления HTTP-запросов: от нативного до использования сторонних библиотек | The most popular ways to make an HTTP request in JavaScript

В JavaScript есть отличные модули и методы для выполнения HTTP-запросов, которые можно использовать для отправки или получения данных с сервера. В этой статье рассмотрены популярные способы отправки HTTP-запросов в JavaScript.

XMLHttpRequest

XMLHttpRequest — это собственный API в Javascript, который инкапсулирует логику отправки HTTP-запросов без необходимости обновления загруженной веб-страницы (Ajax другими словами). Данные можно отправлять с помощью метода POST и получать с помощью метода GET.

Для начала рассмотрим метод GET, а данные возьмем из https://jsonplaceholder.typicode.com/users — бесплатного API для разработчиков.

Чтобы сделать HTTP-вызов в Ajax, нужно инициализировать новый метод XMLHttpRequest() , указать конечную точку URL (эндпоинт) и метод HTTP (в нашем случае GET). Далее используем метод open() , чтобы связать метод HTTP и эндпоинт, и метод send() для отправки запроса.

Выведем HTTP-ответ в консоль с помощью свойства XMLHttpRequest.onreadystatechange , которое содержит обработчик событий, вызываемый при запуске события readystatechanged .

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < console.log(Http.responseText); // =>получим массив данных в формате JSON >

Индикатором успешного запроса будет статус со значением 200. Значение статуса любого запроса мы можем увидеть во вкладке Network инструментов разработчика браузера. Однако также можно добавить проверку на статус, чтобы точно понимать, что запрос выполнился.

Свойство onreadystatechange имеет два метода, readyState и status , которые позволяют нам проверить состояние нашего запроса.

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < if (this.readyState == 4 && this.status == 200) < console.log(Http.responseText); >>

Если readyState равно 4, это означает, что запрос выполнен. Подробней про значения здесь.

Рассмотрим теперь запрос POST, служащий для добавления изменений в данные на сервере. Для этого необходимо дополнительно указать данные, которые необходимо отправить и добавить новый метод setRequestHeader :

const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("POST", url); Http.setRequestHeader("Content-Type", "application/json"); Http.send(JSON.stringify(user));

Ниже добавим другие обработчики событий для отслеживания хода выполнения запроса:

// ход загрузки данных Http.upload.onprogress = function(e) < console.log(e.loaded); // загруженные данные console.log(e.total); // всего данных >// окончание загрузки данных Http.upload.onload = function(e) < console.log("Данные загружены"); >// полная отправка запроса Http.onload = function() < console.log(Http.status); >// ошибка при отправке запроса Http.onerror = function()

Методы jQuery

jQuery содержит множество методов для простой обработки HTTP-запросов. Чтобы их использовать, для начала необходимо подключить библиотеку jQuery в своем проекте.

$.get

Этот метод используется для выполнения GET-запросов. Он принимает два параметра: эндпоинт и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users'; $.get(url, function (data, status) < console.log(data); >);

$.post

Метод для POST-запросов, принимает три параметра: эндпоинт, данные для отправки и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; $.post(url, user, function (data, status) < console.log(data); >);

$.getJSON

Метод извлекает только данные в формате JSON. Принимает два параметра: эндпоинт и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users'; $.getJSON(url, function (data, status) < console.log(data); >);

$.ajax

jQuery Ajax — один из самых простых способов выполнения HTTP-запроса.

const url='https://jsonplaceholder.typicode.com/users'; $.ajax(< url: url, type: "GET", success: function (result) < console.log(result); >, error: function (error) < console.log(error); >>);

С помощью метода $.ajax можно выполнять и остальные запросы, главное — не забывать их указывать в поле type и добавлять дополнительные поля ( data , dataType ).

Fetch

Fetch — это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Он возвращает промис, который появился в стандарте ES6, что позволяет более разумно обрабатывать асинхронный запрос. Пример простой работы Fetch:

const url='https://jsonplaceholder.typicode.com/users'; fetch(url) .then(data => data.json()) .then(response => console.log(response));

Fetch принимает обязательный параметр — эндпоинт. Однако туда также можно передать и другие параметры:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const otherParam = < headers: < "content-type": "application/json; charset=UTF-8", >, body: JSON.stringify(user), method: "POST", >; fetch(url, otherParam) .then(data => data.json()) .then(response => console.log(response)) .catch(error => console.log(error));

Как видим, Fetch значительно снижает сложность и многословность кода за счет использования более простого синтаксиса и промисов.

Axios

Axios — это библиотека с открытым исходным кодом для выполнения HTTP-запросов, которая предоставляет множество замечательных функций.

Чтобы интегрировать библиотеку Axios к себе в проект, мы можем либо установить ее через менеджер пакетов (npm, yarn) и потом сделать импорт, либо, как и в случае с jQuery, просто подключить в коде HTML:

При выполнении GET-запросов с помощью Axios мы можем использовать специальный метод axios.get() .

const url='https://jsonplaceholder.typicode.com/users'; axios.get(url) .then(response => console.log(response.data)) .catch(error => console.log(error))

Для POST-запроса используем другой метод:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; axios.post(url, user) .then(response => console.log(response.data)) .catch(error => console.log(error));

Axios сокращает объем работы, которую мы должны выполнять с нашей стороны, чтобы выполнять HTTP-запросы, даже по сравнению с Fetch. Как и Fetch, Axios перехватывает ошибки HTTP в своем методе catch, устраняя необходимость специальной проверки перед обработкой ответа.

Поскольку Axios возвращает промис, можно выполнять одновременно несколько запросов:

function getUser() < const url='https://jsonplaceholder.typicode.com/users'; return axios.get(url); >function getPost() < const url='https://jsonplaceholder.typicode.com/posts'; return axios.get(url); >axios.all([getUser(), getPost()]) .then(([users, posts]) => < console.log(users.data); console.log(posts.data); >) .catch(error => console.log(error))

SuperAgent

SuperAgent — один из первых сторонних пакетов, представленных в JavaScript для выполнения HTTP-запросов. Подобно Axios, он использует XMLHttpRequest API в своей реализации и поставляется с полным набором функций, полезных в ряде задач обработки запросов.

Подключается пакет либо через менеджер, либо в HTML:

При отправке HTTP-запросов с помощью SuperAgent мы можем полагаться на его специальные методы для инициирования запроса определенного типа. Например, мы можем использовать метод superagent.get() для отправки GET-запросов:

const url='https://jsonplaceholder.typicode.com/users'; superagent.get(url) .then(response => console.log(response.body)) .catch(error => console.log(error))
const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; superagent.post(url) .send(user) .then(response => console.log(response.body)) .catch(error => console.log(error))

Ky

Ky — это относительно новый пакет Javascript, который можно использовать для выполнения асинхронных HTTP-запросов. Он построен на основе Fetch API, но с более простым синтаксисом и дополнительными функциями.

Пример использования для GET-запроса:

const url='https://jsonplaceholder.typicode.com/users'; async function getData () < try < const data = await ky.get(url).json(); console.log(data); >catch (error) < console.log(error) >>

Пример использования для POST-запроса:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; async function postData () < try < const response = await ky.post(url, ); console.log(response); > catch (error) < console.log(error) >>

Источник

Оцените статью
© 2024 Программирование