renovations
This commit is contained in:
Ilya Kantor
parent
801ff5f119
commit
202e46c0d9
3 changed files with 59 additions and 40 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="550px" height="399px" viewBox="0 0 550 399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>border-box</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>border-box.svg</title>
|
||||
<desc>Created with bin/sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="border-box" sketch:type="MSArtboardGroup">
|
||||
<g id="border-box.svg" sketch:type="MSArtboardGroup">
|
||||
<text id="Содержимое" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="normal" sketch:alignment="middle" fill="#5A4739">
|
||||
<tspan x="306.752441" y="96">Содержимое</tspan>
|
||||
</text>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<path d="M198,248 L512,248 L512,345 L198,345 L198,248 Z M218,268 L492,268 L492,325 L218,325 L218,268 Z" id="Rectangle-222" fill="#E8C48E" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M217,20.5 L217,364.570007" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M493,20.5 L493,364.570007" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
|
||||
<text sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6C49">
|
||||
<text id="border-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6C49">
|
||||
<tspan x="317.013672" y="24">border-box</tspan>
|
||||
</text>
|
||||
<text id="content-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
|
@ -378,7 +378,7 @@ xhr.onreadystatechange = function() {
|
|||
}
|
||||
```
|
||||
|
||||
Методы объектов `XMLHttpRequest`:
|
||||
Мы разобрали следующие методы `XMLHttpRequest`:
|
||||
|
||||
<ul>
|
||||
<li>`open(method, url, async, user, password)`</li>
|
||||
|
|
@ -389,7 +389,7 @@ xhr.onreadystatechange = function() {
|
|||
<li>`getAllResponseHeaders()`</li>
|
||||
</ul>
|
||||
|
||||
Свойства объектов `XMLHttpRequest`:
|
||||
Свойства `XMLHttpRequest`:
|
||||
|
||||
<ul>
|
||||
<li>`timeout`</li>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,31 @@
|
|||
# XMLHttpRequest и POST, отсылка форм
|
||||
|
||||
Во время обычной отправки формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер.
|
||||
Во время обычной отправки формы `<form>` браузер собирает значения её полей, делает из них строку и составляет тело GET/POST-запроса для посылки на сервер.
|
||||
|
||||
При отправке данных через `XMLHttpRequest`, это нужно делать самим, в javascript-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.
|
||||
При отправке данных через `XMLHttpRequest`, это нужно делать самим, в JS-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.
|
||||
|
||||
[cut]
|
||||
|
||||
## Кодировка urlencoded
|
||||
|
||||
Основной способ кодировки запросов -- это [:urlencoded], то есть -- стандартное кодирование URL. При этом пробел представляется как `%20`, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.
|
||||
Основной способ кодировки запросов -- это *urlencoded*, то есть -- стандартное кодирование URL.
|
||||
|
||||
Способ, которым следует кодировать данные формы при отправке, задаётся в её HTML-теге.
|
||||
|
||||
Например:
|
||||
Например, форма:
|
||||
|
||||
```html
|
||||
<form method="get"> метод GET с кодировкой по умолчанию
|
||||
<form method="post"> метод POST с кодировкой по умолчанию
|
||||
<form method="post" enctype="application/x-www-form-urlencoded">
|
||||
<form action="/submit" method="GET">
|
||||
<input name="*!*name*/!*" value="*!*Ivan*/!*">
|
||||
<input name="*!*surname*/!*" value="*!*Ivanov*/!*">
|
||||
</form>
|
||||
```
|
||||
|
||||
Во всех этих случаях будет использована кодировка `urlencoded`.
|
||||
Здесь есть два поля: `name=Ivan` и `surname=Ivanov`.
|
||||
|
||||
Если форма отправляется обычным образом, то браузер сам кодирует (urlencode) название и значение каждого поля данных, и отсылает форму на сервер в закодированном виде.
|
||||
Браузер перечисляет такие пары "имя=значение" через символ амперсанда `&` и, так как метод GET, итоговый запрос выглядит как `/submit?name=Ivan&surname=Ivanov`.
|
||||
|
||||
Все символы, кроме английских букв, цифр и `- _ . ! ~ * ' ( )` заменяются на их цифровой код в UTF-8 со знаком %.
|
||||
|
||||
Например, пробел заменяется на `%20`, символ `/` на `%2F`, русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, `Ц` заменится на `%D0%A6`.
|
||||
|
||||
Например, форма:
|
||||
|
||||
|
|
@ -33,13 +36,28 @@
|
|||
</form>
|
||||
```
|
||||
|
||||
Будет отправлена как: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
|
||||
Будет отправлена так: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
|
||||
|
||||
### GET-запрос
|
||||
в JavaScript есть функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) для получения такой кодировки "вручную":
|
||||
|
||||
Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией [:encodeURIComponent].
|
||||
```js
|
||||
//+ run
|
||||
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-запроса с произвольными параметрами `name` и `surname`, их необходимо закодировать вот так:
|
||||
Формы с `method="GET"` всегда кодируются указанным образом.
|
||||
|
||||
Для `method="POST"` существует альтернативная кодировка, которую мы рассмотрим позже.
|
||||
|
||||
|
||||
## GET-запрос
|
||||
|
||||
Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией `encodeURIComponent`.
|
||||
|
||||
Например, для посылки GET-запроса с параметрами `name` и `surname`, аналогично форме выше, их необходимо закодировать так:
|
||||
|
||||
```js
|
||||
// Передаём name и surname в параметрах запроса
|
||||
|
|
@ -49,44 +67,40 @@ var xhr = new XMLHttpRequest();
|
|||
var params = 'name=' + encodeURIComponent(name) +
|
||||
'&surname=' + encodeURIComponent(surname);
|
||||
|
||||
xhr.open("GET", '/submit?'+params, true);
|
||||
xhr.open("GET", '/submit?' + params, true);
|
||||
|
||||
xhr.onreadystatechange = ...;
|
||||
|
||||
xhr.send('');
|
||||
xhr.send();
|
||||
```
|
||||
|
||||
[smart header="Прочие заголовки"]
|
||||
Заголовки `Content-Length`, `Connection` не нужны.
|
||||
Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как `Content-Length` и `Connection`.
|
||||
|
||||
Более того, по спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности.
|
||||
По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности.
|
||||
[/smart]
|
||||
|
||||
[smart header="AJAX или не AJAX?"]
|
||||
**Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы.**
|
||||
[smart header="Сообщаем про AJAX"]
|
||||
Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.
|
||||
|
||||
Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок.
|
||||
|
||||
Например:
|
||||
Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:
|
||||
|
||||
```js
|
||||
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
|
||||
```
|
||||
|
||||
Сервер может, увидев заголовок, отправить данные в JSON-формате, а без него -- генерировать полноценную страницу. Получится, что один URL работает и как страница и как AJAX-сервис.
|
||||
[/smart]
|
||||
|
||||
### POST-запрос
|
||||
## POST-запрос
|
||||
|
||||
В методе POST параметры передаются не в URL, а в теле, посылаемом через `send(body)`. Поэтому `params` нужно указывать не в `open`, а в `send`.
|
||||
|
||||
Кроме того, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос.
|
||||
|
||||
Полный код для POST:
|
||||
```js
|
||||
// Пример с POST
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
var params = 'name=' + encodeURIComponent(name) +
|
||||
var body = 'name=' + encodeURIComponent(name) +
|
||||
'&surname=' + encodeURIComponent(surname);
|
||||
|
||||
xhr.open("POST", '/submit', true)
|
||||
|
|
@ -94,18 +108,23 @@ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
|
|||
|
||||
xhr.onreadystatechange = ...;
|
||||
|
||||
xhr.send(params);
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
[warn header="Только UTF-8"]
|
||||
Всегда используется только UTF-8, независимо от языка страницы.
|
||||
Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.
|
||||
|
||||
Если сервер вдруг ожидает данные в windows-1251 (к примеру), то их нужно будет перекодировать.
|
||||
Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.
|
||||
[/warn]
|
||||
|
||||
## Кодировка multipart/form-data
|
||||
|
||||
Второй способ кодирования называется "[multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data)". При этом поля пересылаются одно за другим, через строку-разделитель.
|
||||
Кодировка urlencoded за счёт замены символов на `%код` может сильно "раздуть" общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: [multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data).
|
||||
|
||||
В этой кодировке поля пересылаются одно за другим, через строку-разделитель.
|
||||
|
||||
|
||||
|
||||
|
||||
Этот способ используется в методе `POST` и указывается атрибутом `enctype="multipart/form-data"`.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue