Getting post data with javascript

JS HTTP GET/POST request

In this article we show how to create HTTP GET and POST requests in JavaScript. We use the Fetch API and the Axios library.

HTTP

The is an application protocol for distributed, collaborative, hypermedia information systems. HTTP protocol is the foundation of data communication for the World Wide Web.

HTTP GET

The HTTP GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HTTP POST

The HTTP POST method sends data to the server. It is often used when uploading a file or when submitting a completed web form.

The Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. The API originates in the browser.

The fetch is a global function which takes url and options parameters and returns a promise. The promise resolves to the response of the request.

let promise = fetch(url, [options])

If we do not provide the options , a simple GET request downloading the contents of the url is generated.

Axios

is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.

JS fetch GET request

The following example creates a simple GET request and processes the result as text.

We get the contents of the webcode.me webpage.

let url = 'http://webcode.me'; let res = await fetch(url);

The fetch method takes only the URL as parameter. In such a case, the default request is the GET request.

We get the body from the request as plain text.

JS fetch POST request

In the next example we create a POST request with JSON data.

The POST request is sent to http://httpbin.org/post.

This is the data to be sent.

let res = await fetch(url, < method: 'POST', headers: < 'Content-Type': 'application/json', >, body: JSON.stringify(data), >);

We set the method parameter to POST and choose the application/json for the content type. The data is stringified to the body parameter.

let ret = await res.json(); return JSON.parse(ret.data);

We get the data back as JSON string and parse it into the JSON object.

JS GET request with Axios

The following example creates a GET reqeust with Axios library.

We install the Axios module.

const axios = require('axios'); async function doGetRequest() < let res = await axios.get('http://webcode.me'); let data = res.data; console.log(data); >doGetRequest();

The example retrieves a home page from a simple website. It uses the async/await syntax.

JS POST request with Axios

In the following example, we generate a POST request with form data.

We install the form-data module.

With application/x-www-form-urlencoded the data is sent in the body of the request; the keys and values are encoded in key-value tuples separated by ‘&’, with a ‘=’ between the key and the value.

const axios = require('axios'); const FormData = require('form-data'); async function doPostRequest() < const form_data = new FormData(); form_data.append('name', 'John Doe'); form_data.append('occupation', 'gardener'); let res = await axios.post('http://httpbin.org/post', form_data, < headers: form_data.getHeaders() >); let data = res.data; console.log(data); > doPostRequest();

To produce form data in the appropriate format, we use the FormData object.

In this article we created HTTP GET/POST requests in JavaScript.

Author

My name is Jan Bodnar and I am a passionate programmer with many years of programming experience. I have been writing programming articles since 2007. So far, I have written over 1400 articles and 8 e-books. I have over eight years of experience in teaching programming.

Источник

XMLHttpRequest POST, формы и кодировка

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Во время обычной отправки формы браузер собирает значения её полей, делает из них строку и составляет тело GET/POST-запроса для посылки на сервер.

При отправке данных через XMLHttpRequest , это нужно делать самим, в JS-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.

Кодировка urlencoded

Основной способ кодировки запросов – это urlencoded, то есть – стандартное кодирование URL.

Здесь есть два поля: name=Ivan и surname=Ivanov .

Браузер перечисляет такие пары «имя=значение» через символ амперсанда & и, так как метод GET, итоговый запрос выглядит как /submit?name=Ivan&surname=Ivanov .

Все символы, кроме английских букв, цифр и — _ . ! ~ * ‘ ( ) заменяются на их цифровой код в UTF-8 со знаком %.

Например, пробел заменяется на %20 , символ / на %2F , русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, Ц заменится на %D0%A6 .

Будет отправлена так: /submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9 .

в JavaScript есть функция encodeURIComponent для получения такой кодировки «вручную»:

alert( encodeURIComponent(' ') ); // %20 alert( encodeURIComponent('/') ); // %2F alert( encodeURIComponent('В') ); // %D0%92 alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80

Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.

GET-запрос

Формируя XMLHttpRequest, мы должны формировать запрос «руками», кодируя поля функцией encodeURIComponent .

Например, для посылки GET-запроса с параметрами name и surname , аналогично форме выше, их необходимо закодировать так:

// Передаём name и surname в параметрах запроса var xhr = new XMLHttpRequest(); var params = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname); xhr.open("GET", '/submit?' + params, true); xhr.onreadystatechange = . ; xhr.send();

Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как Content-Length и Connection .

По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например Referer . Это сделано в целях контроля правильности запроса и для безопасности.

Запрос, отправленный кодом выше через XMLHttpRequest , никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.

Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

POST с urlencoded

В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове send(body) .

В стандартных HTTP-формах для метода POST доступны три кодировки, задаваемые через атрибут enctype :

В зависимости от enctype браузер кодирует данные соответствующим способом перед отправкой на сервер.

В случае с XMLHttpRequest мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных.

В частности, при POST обязателен заголовок Content-Type , содержащий кодировку. Это указание для сервера – как обрабатывать (раскодировать) пришедший запрос.

Для примера отправим запрос в кодировке application/x-www-form-urlencoded :

var xhr = new XMLHttpRequest(); var body = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname); xhr.open("POST", '/submit', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = . ; xhr.send(body);

Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.

Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.

Кодировка multipart/form-data

Кодировка urlencoded за счёт замены символов на %код может сильно «раздуть» общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: multipart/form-data.

В этой кодировке поля пересылаются одно за другим, через строку-разделитель.

Чтобы использовать этот способ, нужно указать его в атрибуте enctype и метод должен быть POST:

Форма при такой кодировке будет выглядеть примерно так:

. Заголовки. Content-Type: multipart/form-data; boundary=RaNdOmDeLiMiTeR --RaNdOmDeLiMiTeR Content-Disposition: form-data; name="name" Виктор --RaNdOmDeLiMiTeR Content-Disposition: form-data; name="surname" Цой --RaNdOmDeLiMiTeR--

…То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где – поля разделены случайно сгенерированной строкой, которую называют «boundary» (англ. граница), в примере выше это RaNdOmDeLiMiTeR :

Сервер видит заголовок Content-Type: multipart/form-data , читает из него границу и раскодирует поля формы.

Такой способ используется в первую очередь при пересылке файлов, так перекодировка мегабайтов через urlencoded существенно загрузила бы браузер. Да и объём данных после неё сильно вырос бы.

Однако, никто не мешает использовать эту кодировку всегда для POST запросов. Для GET доступна только urlencoded.

POST с multipart/form-data

Сделать POST-запрос в кодировке multipart/form-data можно и через XMLHttpRequest.

Достаточно указать в заголовке Content-Type кодировку и границу, и далее сформировать тело запроса, удовлетворяющее требованиям кодировки.

Пример кода для того же запроса, что и раньше, теперь в кодировке multipart/form-data :

var data = < name: 'Виктор', surname: 'Цой' >; var boundary = String(Math.random()).slice(2); var boundaryMiddle = '--' + boundary + '\r\n'; var boundaryLast = '--' + boundary + '--\r\n' var body = ['\r\n']; for (var key in data) < // добавление поля body.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + dataGetting post data with javascript + '\r\n'); >body = body.join(boundaryMiddle) + boundaryLast; // Тело запроса готово, отправляем var xhr = new XMLHttpRequest(); xhr.open('POST', '/submit', true); xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); xhr.onreadystatechange = function() < if (this.readyState != 4) return; alert( this.responseText ); >xhr.send(body);

Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель.

Можно создать запрос, который сервер воспримет как загрузку файла.

Для добавления файла нужно использовать тот же код, что выше, модифицировав заголовки перед полем, которое является файлом, так:

Content-Disposition: form-data; name="myfile"; filename="pic.jpg" Content-Type: image/jpeg (пустая строка) содержимое файла

FormData

Современные браузеры, исключая IE9- (впрочем, есть полифил), поддерживают встроенный объект FormData, который кодирует формы для отправки на сервер.

Это очень удобно. Например:

Этот код отправит на сервер форму с полями name , surname и patronym .

• Конструктор new FormData([form]) вызывается либо без аргументов, либо с DOM-элементом формы.
• Метод formData.append(name, value) добавляет данные к форме.

Объект formData можно сразу отсылать, интеграция FormData с XMLHttpRequest встроена в браузер. Кодировка при этом будет multipart/form-data .

Другие кодировки

XMLHttpRequest сам по себе не ограничивает кодировку и формат пересылаемых данных.

Поэтому для обмена данными часто используется формат JSON:

var xhr = new XMLHttpRequest(); var json = JSON.stringify(< name: "Виктор", surname: "Цой" >); xhr.open("POST", '/submit', true) xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.onreadystatechange = . ; // Отсылаем объект в формате JSON и с Content-Type application/json // Сервер должен уметь такой Content-Type принимать и раскодировать xhr.send(json);

Итого

• У форм есть две основные кодировки: application/x-www-form-urlencoded – по умолчанию и multipart/form-data – для POST запросов, если явно указана в enctype . Вторая кодировка обычно используется для больших данных и только для тела запроса.
• Для составления запроса в application/x-www-form-urlencoded используется функция encodeURIComponent .
• Для отправки запроса в multipart/form-data – объект FormData .
• Для обмена данными JS ↔ сервер можно использовать и просто JSON, желательно с указанием кодировки в заголовке Content-Type .

В XMLHttpRequest можно использовать и другие HTTP-методы, например PUT, DELETE, TRACE. К ним применимы все те же принципы, что описаны выше.

Источник