From 202e46c0d936a18b5ed358ac2b863b22d0abb780 Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Sun, 22 Feb 2015 14:09:44 +0300
Subject: [PATCH] renovations

---
 .../10-box-sizing/border-box.svg              | 10 +--
 .../2-ajax/3-ajax-xmlhttprequest/article.md   |  4 +-
 3-more/2-ajax/4-xhr-forms/article.md          | 85 ++++++++++++-------
 3 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/3-more/11-css-for-js/10-box-sizing/border-box.svg b/3-more/11-css-for-js/10-box-sizing/border-box.svg
index 8a15225d..9b8a0936 100644
--- a/3-more/11-css-for-js/10-box-sizing/border-box.svg
+++ b/3-more/11-css-for-js/10-box-sizing/border-box.svg
@@ -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">
diff --git a/3-more/2-ajax/3-ajax-xmlhttprequest/article.md b/3-more/2-ajax/3-ajax-xmlhttprequest/article.md
index 4c1054f5..c6ba68a0 100644
--- a/3-more/2-ajax/3-ajax-xmlhttprequest/article.md
+++ b/3-more/2-ajax/3-ajax-xmlhttprequest/article.md
@@ -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>
diff --git a/3-more/2-ajax/4-xhr-forms/article.md b/3-more/2-ajax/4-xhr-forms/article.md
index cc041afc..1ac2e7bd 100644
--- a/3-more/2-ajax/4-xhr-forms/article.md
+++ b/3-more/2-ajax/4-xhr-forms/article.md
@@ -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"`.