fetch

Author: iliakan

5-regular-expressions/14-regexp-lookahead-lookbehind/article.md

@@ -8,19 +8,21 @@ That's what lookahead is for.
 
 ## Lookahead
 
-The syntax is: `pattern:x(?=y)`, it means "match `pattern:x` only if followed by `pattern:y`".
+The syntax is: `pattern:x(?=y)`, it means "look for `pattern:x`, but match only if followed by `pattern:y`".
 
-The euro sign is often written after the amount, so the regexp will be `pattern:\d+(?=€)` (assuming the price has no decimal point):
+For an integer amount followed by `subject:€`, the regexp will be `pattern:\d+(?=€)`:
 
 ```js run
 let str = "1 turkey costs 30€";
 
 alert( str.match(/\d+(?=€)/) ); // 30 (correctly skipped the sole number 1)
 ```
 
-Or, if we wanted a quantity, then a negative lookahead can be applied.
+Let's say we want a quantity instead, that is a number, NOT followed by `subject:€`.
 
-The syntax is: `pattern:x(?!y)`, it means "match `pattern:x` only if not followed by `pattern:y`".
+Here a negative lookahead can be applied.
+
+The syntax is: `pattern:x(?!y)`, it means "search `pattern:x`, but only if not followed by `pattern:y`".
 
 ```js run
 let str = "2 turkeys cost 60€";
@@ -30,39 +32,43 @@ alert( str.match(/\d+(?!€)/) ); // 2 (correctly skipped the price)
 
 ## Lookbehind
 
-Lookbehind allows to match a pattern only if there's something before.
+Lookahead allows to add a condition for "what goes after".
+
+Lookbehind is similar, but it looks behind. That is, it allows to match a pattern only if there's something before.
 
 The syntax is:
 - Positive lookbehind: `pattern:(?<=y)x`, matches `pattern:x`, but only if it follows after `pattern:y`.
 - Negative lookbehind: `pattern:(?<!y)x`, matches `pattern:x`, but only if there's no `pattern:y` before.
 
-For example, let's change the price to US dollars. The dollar sign is usually before the number, so to look for `$30` we'll use `pattern:(?<=\$)\d+`:
+For example, let's change the price to US dollars. The dollar sign is usually before the number, so to look for `$30` we'll use `pattern:(?<=\$)\d+` -- an amount preceeded by `subject:$`:
 
 ```js run
 let str = "1 turkey costs $30";
 
-alert( str.match(/(?<=\$)\d+/) ); // 30 (correctly skipped the sole number 1)
+alert( str.match(/(?<=\$)\d+/) ); // 30 (skipped the sole number)
 ```
 
-And for the quantity let's use a negative lookbehind `pattern:(?<!\$)\d+`:
+And, to find the quantity -- a number, not preceeded by `subject:$`, we can use a negative lookbehind `pattern:(?<!\$)\d+`:
 
 ```js run
 let str = "2 turkeys cost $60";
 
-alert( str.match(/(?<!\$)\d+/) ); // 2 (correctly skipped the price)
+alert( str.match(/(?<!\$)\d+/) ); // 2 (skipped the price)
 ```
 
 ## Capture groups
 
 Generally, what's inside the lookaround (a common name for both lookahead and lookbehind) parentheses does not become a part of the match.
 
-But if we want to capture something, that's doable. Just need to wrap that into additional parentheses.
+E.g. in the pattern `pattern:\d+(?!€)`, the `pattern:€` sign doesn't get captured as a part of the match.
+
+But if we want to capture the whole lookaround expression or a part of it, that's possible. Just need to wrap that into additional parentheses.
 
 For instance, here the currency `pattern:(€|kr)` is captured, along with the amount:
 
 ```js run
 let str = "1 turkey costs 30€";
-let reg = /\d+(?=(€|kr))/;
+let reg = /\d+(?=(€|kr))/; // extra parentheses around €|kr
 
 alert( str.match(reg) ); // 30, €
 ```

7-network/1-fetch/article.md renamed to 7-network/1-fetch-basics/article.md

@@ -1,5 +1,5 @@
 
-# Fetch
+# Fetch basics
 
 Method `fetch()` is the modern way of sending requests over HTTP.
 
@@ -104,7 +104,7 @@ img.style = 'position:fixed;top:10px;left:10px;width:100px';
 setTimeout(() => img.remove(), 2000);
 ```
 
-## The full syntax
+## Fetch API in detail
 
 The second argument provides a lot of flexibility to `fetch` syntax.
 
@@ -116,17 +116,21 @@ let promise = fetch(url, {
   headers: {
     "Content-Type": "text/plain;charset=UTF-8"
   },
-  destination: "", // audio, audioworklet, document, embed, font...
+  body: undefined // string, FormData, Blob, BufferSource, or URLSearchParams
   referrer: "about:client", // "" for no-referrer, or an url from the current origin
   referrerPolicy: "", // no-referrer, no-referrer-when-downgrade, same-origin...
   mode: "cors", // same-origin, no-cors, navigate, or websocket
   credentials: "same-origin", // omit, include
   cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
   redirect: "follow", // manual, error
-  integrity: "" // a hash, like "sha256-abcdef1234567890"
-  keepalive: false // true
-  body: "string" // FormData, Blob, BufferSource, or URLSearchParams
+  integrity: "", // a hash, like "sha256-abcdef1234567890"
+  keepalive: false, // true
+  signal: undefined, // AbortController to abort request
+  window: window // null
 })
+```
+
+
 
 
 

7-network/1-fetch/logo-fetch.svg renamed to 7-network/1-fetch-basics/logo-fetch.svg

@@ -0,0 +1,9 @@
+`Origin` нужен, потому что `Referer` передаётся не всегда. В частности, при запросе с HTTPS на HTTP -- нет `Referer`.
+
+Политика [Content Security Policy](http://en.wikipedia.org/wiki/Content_Security_Policy) может запрещать пересылку `Referer`.
+
+По стандарту `Referer` является необязательным HTTP-заголовком, в некоторых браузерах есть настройки, которые запрещают его слать.
+
+Именно поэтому, ввиду того, что на `Referer` полагаться нельзя, и придумали заголовок `Origin`, который гарантированно присылается при кросс-доменных запросах.
+
+Что же касается "неправильного" `Referer` -- это из области фантастики. Когда-то, много лет назад, в браузерах были ошибки, которые позволяли подменить `Referer` из JavaScript, но они давно исправлены. Никакая "злая страница" не может его подменить.

7-network/1-fetch/progress.view/index.html renamed to 7-network/1-fetch-basics/progress.view/index.html

@@ -0,0 +1,30 @@
+importance: 5
+
+---
+
+# Зачем нужен Origin?
+
+Как вы, наверняка, знаете, существует HTTP-заголовок `Referer`, в котором обычно указан адрес страницы, с которой инициирован запрос.
+
+Например, при отправке `XMLHttpRequest` со страницы `http://javascript.ru/some/url` на `http://google.ru`, заголовки будут примерно такими:
+
+```
+Accept:*/*
+Accept-Charset:windows-1251,utf-8;q=0.7,*;q=0.3
+Accept-Encoding:gzip,deflate,sdch
+Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
+Connection:keep-alive
+Host:google.ru
+*!*
+Origin:http://javascript.ru
+Referer:http://javascript.ru/some/url
+*/!*
+```
+
+Как видно, здесь присутствуют и `Referer` и `Origin`.
+
+Итак, вопросы:
+
+1. Зачем нужен `Origin`, если `Referer` содержит даже более полную информацию?
+2. Может ли быть такое, что заголовка `Referer` нет или он неправильный?
+