Skip to content

Commit 202e46c

Browse files
iliakaniliakan
committed
renovations
1 parent 801ff5f commit 202e46c

3 files changed

Lines changed: 59 additions & 40 deletions

File tree

‎3-more/11-css-for-js/10-box-sizing/border-box.svg‎

Lines changed: 5 additions & 5 deletions
Loading

‎3-more/2-ajax/3-ajax-xmlhttprequest/article.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ xhr.onreadystatechange = function() {
378378
}
379379
```
380380
381-
Методы объектов `XMLHttpRequest`:
381+
Мы разобрали следующие методы `XMLHttpRequest`:
382382
383383
<ul>
384384
<li>`open(method, url, async, user, password)`</li>
@@ -389,7 +389,7 @@ xhr.onreadystatechange = function() {
389389
<li>`getAllResponseHeaders()`</li>
390390
</ul>
391391
392-
Свойства объектов `XMLHttpRequest`:
392+
Свойства `XMLHttpRequest`:
393393
394394
<ul>
395395
<li>`timeout`</li>

‎3-more/2-ajax/4-xhr-forms/article.md‎

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
# XMLHttpRequest и POST, отсылка форм
22

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

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

77
[cut]
88

99
## Кодировка urlencoded
1010

11-
Основной способ кодировки запросов -- это [:urlencoded], то есть -- стандартное кодирование URL. При этом пробел представляется как `%20`, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.
11+
Основной способ кодировки запросов -- это *urlencoded*, то есть -- стандартное кодирование URL.
1212

13-
Способ, которым следует кодировать данные формы при отправке, задаётся в её HTML-теге.
14-
15-
Например:
13+
Например, форма:
1614

1715
```html
18-
<form method="get"> метод GET с кодировкой по умолчанию
19-
<form method="post"> метод POST с кодировкой по умолчанию
20-
<form method="post" enctype="application/x-www-form-urlencoded">
16+
<form action="/submit" method="GET">
17+
<input name="*!*name*/!*" value="*!*Ivan*/!*">
18+
<input name="*!*surname*/!*" value="*!*Ivanov*/!*">
19+
</form>
2120
```
2221

23-
Во всех этих случаях будет использована кодировка `urlencoded`.
22+
Здесь есть два поля: `name=Ivan` и `surname=Ivanov`.
23+
24+
Браузер перечисляет такие пары "имя=значение" через символ амперсанда `&` и, так как метод GET, итоговый запрос выглядит как `/submit?name=Ivan&surname=Ivanov`.
25+
26+
Все символы, кроме английских букв, цифр и `- _ . ! ~ * ' ( )` заменяются на их цифровой код в UTF-8 со знаком %.
2427

25-
Если форма отправляется обычным образом, то браузер сам кодирует (urlencode) название и значение каждого поля данных, и отсылает форму на сервер в закодированном виде.
28+
Например, пробел заменяется на `%20`, символ `/` на `%2F`, русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, `Ц` заменится на `%D0%A6`.
2629

2730
Например, форма:
2831

@@ -33,13 +36,28 @@
3336
</form>
3437
```
3538

36-
Будет отправлена как: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
39+
Будет отправлена так: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
40+
41+
в JavaScript есть функция [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) для получения такой кодировки "вручную":
42+
43+
```js
44+
//+ run
45+
alert( encodeURIComponent(' ') ); // %20
46+
alert( encodeURIComponent('/') ); // %2F
47+
alert( encodeURIComponent('В') ); // %D0%92
48+
alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80
49+
```
50+
51+
Формы с `method="GET"` всегда кодируются указанным образом.
3752

38-
### GET-запрос
53+
Для `method="POST"` существует альтернативная кодировка, которую мы рассмотрим позже.
3954

40-
Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией [:encodeURIComponent].
4155

42-
Например, для посылки GET-запроса с произвольными параметрами `name` и `surname`, их необходимо закодировать вот так:
56+
## GET-запрос
57+
58+
Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией `encodeURIComponent`.
59+
60+
Например, для посылки GET-запроса с параметрами `name` и `surname`, аналогично форме выше, их необходимо закодировать так:
4361

4462
```js
4563
// Передаём name и surname в параметрах запроса
@@ -49,63 +67,64 @@ var xhr = new XMLHttpRequest();
4967
var params = 'name=' + encodeURIComponent(name) +
5068
'&surname=' + encodeURIComponent(surname);
5169

52-
xhr.open("GET", '/submit?'+params, true);
70+
xhr.open("GET", '/submit?' + params, true);
5371

5472
xhr.onreadystatechange = ...;
5573

56-
xhr.send('');
74+
xhr.send();
5775
```
5876

5977
[smart header="Прочие заголовки"]
60-
Заголовки `Content-Length`, `Connection` не нужны.
78+
Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как `Content-Length` и `Connection`.
6179

62-
Более того, по спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности.
80+
По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности.
6381
[/smart]
6482

65-
[smart header="AJAX или не AJAX?"]
66-
**Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы.**
67-
68-
Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок.
83+
[smart header="Сообщаем про AJAX"]
84+
Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.
6985

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

7288
```js
7389
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
7490
```
75-
76-
Сервер может, увидев заголовок, отправить данные в JSON-формате, а без него -- генерировать полноценную страницу. Получится, что один URL работает и как страница и как AJAX-сервис.
7791
[/smart]
7892

79-
### POST-запрос
93+
## POST-запрос
8094

8195
В методе POST параметры передаются не в URL, а в теле, посылаемом через `send(body)`. Поэтому `params` нужно указывать не в `open`, а в `send`.
8296

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

99+
Полный код для POST:
85100
```js
86-
// Пример с POST
87101
var xhr = new XMLHttpRequest();
88102

89-
var params = 'name=' + encodeURIComponent(name) +
103+
var body = 'name=' + encodeURIComponent(name) +
90104
'&surname=' + encodeURIComponent(surname);
91105

92106
xhr.open("POST", '/submit', true)
93107
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
94108

95109
xhr.onreadystatechange = ...;
96110

97-
xhr.send(params);
111+
xhr.send(body);
98112
```
99113

100114
[warn header="Только UTF-8"]
101-
Всегда используется только UTF-8, независимо от языка страницы.
115+
Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.
102116

103-
Если сервер вдруг ожидает данные в windows-1251 (к примеру), то их нужно будет перекодировать.
117+
Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.
104118
[/warn]
105119

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

108-
Второй способ кодирования называется "[multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data)". При этом поля пересылаются одно за другим, через строку-разделитель.
122+
Кодировка urlencoded за счёт замены символов на `%код` может сильно "раздуть" общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: [multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data).
123+
124+
В этой кодировке поля пересылаются одно за другим, через строку-разделитель.
125+
126+
127+
109128

110129
Этот способ используется в методе `POST` и указывается атрибутом `enctype="multipart/form-data"`.
111130

0 commit comments

Comments
 (0)