{"id":9759,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=9759"},"modified":"2026-09-25T15:25:09","modified_gmt":"2026-09-25T15:25:09","slug":"xhr-v-javascript-vvedenie-v-asinhronnost","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/xhr-v-javascript-vvedenie-v-asinhronnost\/","title":{"rendered":"XHR \u0432 JavaScript: \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 XMLHttpRequest \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441"},"content":{"rendered":"

XHR (XMLHttpRequest)<\/strong> — \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u044a\u0435\u043a\u0442 JavaScript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0437\u0430\u043f\u0440\u043e\u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439: \u043c\u0435\u0442\u043e\u0434 send()<\/code> \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0430 \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0437\u0436\u0435 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f load<\/code>. \u041d\u0438\u0436\u0435 — \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0440\u0430\u0437\u0431\u043e\u0440 open<\/code>\/send<\/code>\/onload<\/code>, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f readyState<\/code>, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 fetch<\/code>.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u0422\u0440\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u0443\u0442\u0430\u044e\u0442<\/a><\/li>\n
  2. \u0421\u0442\u0435\u043d\u0434 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432<\/a><\/li>\n
  3. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: GET-\u0437\u0430\u043f\u0440\u043e\u0441<\/a><\/li>\n
  4. \u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u0430: \u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 send()<\/a><\/li>\n
  5. readyState: \u043f\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/a><\/li>\n
  6. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a: \u0447\u0442\u043e \u043b\u043e\u0432\u0438\u0442 onload, \u0430 \u0447\u0442\u043e onerror<\/a><\/li>\n
  7. POST: \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 JSON \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/a><\/li>\n
  8. \u0412\u044b\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0435\u0437 XSS<\/a><\/li>\n
  9. XHR \u0438 Promise: \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f async\/await<\/a><\/li>\n
  10. \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 XHR: \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442<\/a><\/li>\n
  11. XHR \u0438\u043b\u0438 fetch<\/a><\/li>\n
  12. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/a><\/li>\n
  13. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  14. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  15. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b 24.09.2026 \u0432 Chromium 152 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0435\u043d\u0434\u0435 (Node.js), \u043a\u043e\u0434 \u0441\u0442\u0435\u043d\u0434\u0430 — \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n

    \u0422\u0440\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u0443\u0442\u0430\u044e\u0442<\/h2>\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    AJAX<\/td>\n\u041f\u043e\u0434\u0445\u043e\u0434: \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432 \u0444\u043e\u043d\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0431\u044f<\/td>\n\u041f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/td>\n<\/tr>\n
    XHR<\/td>\n\u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 API \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u0431\u043c\u0435\u043d\u0430, \u043e\u0431\u044a\u0435\u043a\u0442 XMLHttpRequest<\/code><\/td>\nnew XMLHttpRequest()<\/code><\/td>\n<\/tr>\n
    fetch<\/td>\n\u0411\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 API \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0436\u0435, \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Promise<\/td>\nfetch('\/api\/users')<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    AJAX \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0447\u0435\u0440\u0435\u0437 XHR, \u0438 \u0447\u0435\u0440\u0435\u0437 fetch<\/code>. \u0421\u043b\u043e\u0432\u043e XML \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435: XHR \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, JSON, \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (Blob<\/code>, ArrayBuffer<\/code>) \u0438 FormData<\/code>.<\/p>\n

    \u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c<\/strong> \u0437\u0434\u0435\u0441\u044c \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0434\u043d\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: \u043f\u043e\u043a\u0430 \u0438\u0434\u0435\u0442 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u043d\u0435 \u0436\u0434\u0435\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u043a\u0438 \u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u0438\u0434\u0435\u0442 \u0438 \u0434\u043e \u043d\u0435\u0433\u043e \u0434\u043e\u0439\u0434\u0435\u0442 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432 \u0446\u0438\u043a\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n

    \u0421\u0442\u0435\u043d\u0434 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432<\/h2>\n

    XHR \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u043a\u0430\u043a \u0444\u0430\u0439\u043b (file:\/\/<\/code>): \u043d\u0443\u0436\u0435\u043d HTTP-\u0441\u0435\u0440\u0432\u0435\u0440. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Node.js \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n

    \/\/ server.js - \u0437\u0430\u043f\u0443\u0441\u043a: node server.js, \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c http:\/\/localhost:8765\/<\/span>\nconst<\/span> <\/span>http<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>'http'<\/span>);<\/span>\nconst<\/span> <\/span>users<\/span> <\/span>=<\/span> [{ <\/span>id<\/span>:<\/span> <\/span>1<\/span>, <\/span>name<\/span>:<\/span> <\/span>'\u0410\u043d\u043d\u0430'<\/span> }, { <\/span>id<\/span>:<\/span> <\/span>2<\/span>, <\/span>name<\/span>:<\/span> <\/span>'\u0411\u043e\u0440\u0438\u0441'<\/span> }];<\/span>\n\nhttp<\/span>.<\/span>createServer<\/span>((<\/span>req<\/span>, <\/span>res<\/span>) => {<\/span>\n  <\/span>const<\/span> <\/span>json<\/span> <\/span>=<\/span> (<\/span>code<\/span>, <\/span>data<\/span>) => {<\/span>\n    <\/span>res<\/span>.<\/span>writeHead<\/span>(<\/span>code<\/span>, { <\/span>'Content-Type'<\/span>:<\/span> <\/span>'application\/json; charset=utf-8'<\/span> });<\/span>\n    <\/span>res<\/span>.<\/span>end<\/span>(<\/span>typeof<\/span> <\/span>data<\/span> <\/span>===<\/span> <\/span>'string'<\/span> <\/span>?<\/span> <\/span>data<\/span> <\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>data<\/span>));<\/span>\n  };<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/'<\/span>) {<\/span>\n    <\/span>res<\/span>.<\/span>writeHead<\/span>(<\/span>200<\/span>, { <\/span>'Content-Type'<\/span>:<\/span> <\/span>'text\/html; charset=utf-8'<\/span> });<\/span>\n    <\/span>return<\/span> <\/span>res<\/span>.<\/span>end<\/span>(<\/span>'<!doctype html><meta charset=\"utf-8\"><ul id=\"list\"><\/ul>'<\/span>);<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/users'<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>'GET'<\/span>) <\/span>return<\/span> <\/span>json<\/span>(<\/span>200<\/span>, <\/span>users<\/span>);<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/users'<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>'POST'<\/span>) {<\/span>\n    <\/span>let<\/span> <\/span>body<\/span> <\/span>=<\/span> <\/span>''<\/span>;<\/span>\n    <\/span>req<\/span>.<\/span>on<\/span>(<\/span>'data'<\/span>, <\/span>chunk<\/span> => { <\/span>body<\/span> <\/span>+=<\/span> <\/span>chunk<\/span>; });<\/span>\n    <\/span>req<\/span>.<\/span>on<\/span>(<\/span>'end'<\/span>, () => {<\/span>\n      <\/span>let<\/span> <\/span>data<\/span>;<\/span>\n      <\/span>try<\/span> { <\/span>data<\/span> <\/span>=<\/span> <\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>body<\/span>); } <\/span>catch<\/span> { <\/span>return<\/span> <\/span>json<\/span>(<\/span>400<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'bad json'<\/span> }); }<\/span>\n      <\/span>if<\/span> (<\/span>!<\/span>data<\/span> <\/span>||<\/span> <\/span>typeof<\/span> <\/span>data<\/span>.<\/span>name<\/span> <\/span>!==<\/span> <\/span>'string'<\/span>) <\/span>return<\/span> <\/span>json<\/span>(<\/span>400<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'name required'<\/span> });<\/span>\n      <\/span>json<\/span>(<\/span>201<\/span>, { ...<\/span>data<\/span>, <\/span>id<\/span>:<\/span> <\/span>3<\/span> });<\/span>\n    });<\/span>\n    <\/span>return<\/span>;<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/slow'<\/span>) <\/span>return<\/span> <\/span>setTimeout<\/span>(() => <\/span>json<\/span>(<\/span>200<\/span>, { <\/span>ok<\/span>:<\/span> <\/span>true<\/span> }), <\/span>3000<\/span>);<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/broken'<\/span>) <\/span>return<\/span> <\/span>json<\/span>(<\/span>200<\/span>, <\/span>'{oops'<\/span>);<\/span>\n  <\/span>json<\/span>(<\/span>404<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'not found'<\/span> });<\/span>\n}).<\/span>listen<\/span>(<\/span>8765<\/span>);<\/span><\/code><\/pre>\n
    \u041a\u043e\u0434 \u043d\u0438\u0436\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (F12) \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 http:\/\/localhost:8765\/<\/code>.<\/p>\n
    \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: GET-\u0437\u0430\u043f\u0440\u043e\u0441<\/h2>\n
    const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\nxhr<\/span>.<\/span>responseType<\/span> <\/span>=<\/span> <\/span>'json'<\/span>;<\/span>\nxhr<\/span>.<\/span>timeout<\/span> <\/span>=<\/span> <\/span>5000<\/span>;<\/span>\n\nxhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => {<\/span>\n  <\/span>if<\/span> (<\/span>xhr<\/span>.<\/span>status<\/span> <\/span>>=<\/span> <\/span>200<\/span> <\/span>&&<\/span> <\/span>xhr<\/span>.<\/span>status<\/span> <\/span><<\/span> <\/span>300<\/span>) {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438:'<\/span>, <\/span>xhr<\/span>.<\/span>response<\/span>.<\/span>map<\/span>(<\/span>u<\/span> => <\/span>u<\/span>.<\/span>name<\/span>).<\/span>join<\/span>(<\/span>', '<\/span>));<\/span>\n  } <\/span>else<\/span> {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u041e\u0448\u0438\u0431\u043a\u0430 HTTP:'<\/span>, <\/span>xhr<\/span>.<\/span>status<\/span>);<\/span>\n  }<\/span>\n};<\/span>\nxhr<\/span>.<\/span>onerror<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u0421\u0435\u0442\u0435\u0432\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0435\u0442'<\/span>);<\/span>\nxhr<\/span>.<\/span>ontimeout<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u0421\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u043b \u0437\u0430 5 \u0441\u0435\u043a\u0443\u043d\u0434'<\/span>);<\/span>\n\nxhr<\/span>.<\/span>send<\/span>();<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>'send() \u0432\u0435\u0440\u043d\u0443\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043e\u0442\u0432\u0435\u0442\u0430 \u0435\u0449\u0435 \u043d\u0435\u0442'<\/span>);<\/span><\/code><\/pre>\n
    \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0430\u0436\u0435\u043d — \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c:<\/p>\n
    send() \u0432\u0435\u0440\u043d\u0443\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043e\u0442\u0432\u0435\u0442\u0430 \u0435\u0449\u0435 \u043d\u0435\u0442\n\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438: \u0410\u043d\u043d\u0430, \u0411\u043e\u0440\u0438\u0441\n<\/code><\/pre>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u0448\u0430\u0433\u0430\u043c:<\/p>\n
      \n
    1. new XMLHttpRequest()<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0435\u0441\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0412 Node.js \u0435\u0433\u043e \u043d\u0435\u0442 — \u0442\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 fetch<\/code>.<\/li>\n
    2. open(method, url)<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441: \u043c\u0435\u0442\u043e\u0434 \u0438 \u0430\u0434\u0440\u0435\u0441. \u0421\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043e\u043d \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442.<\/li>\n
    3. responseType = 'json'<\/code> \u043f\u0440\u043e\u0441\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0430\u043c\u043e\u043c\u0443 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043b\u043e \u043a\u0430\u043a JSON, \u0432 xhr.response<\/code> \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043b\u043e \u043b\u0435\u0436\u0438\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 xhr.responseText<\/code>, \u0438 \u043d\u0443\u0436\u0435\u043d JSON.parse<\/code>.<\/li>\n
    4. timeout<\/code> — \u043b\u0438\u043c\u0438\u0442 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445, 0 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u0431\u0435\u0437 \u043b\u0438\u043c\u0438\u0442\u0430\u00bb.<\/li>\n
    5. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 onload<\/code>, onerror<\/code>, ontimeout<\/code> \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u043e send()<\/code>.<\/li>\n
    6. send()<\/code> \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441. \u0423 GET \u0442\u0435\u043b\u0430 \u043d\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 (\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 null<\/code>).<\/li>\n<\/ol>\n
      \u041f\u043e\u043b\u043d\u0430\u044f \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430: open(method, url, async, user, password)<\/code>. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. async<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e true<\/code>; false<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c (\u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435). user<\/code> \u0438 password<\/code> — \u0434\u043b\u044f HTTP-\u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0432 \u0443\u0447\u0435\u0431\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0438\u0445 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442.<\/p>\n
      \u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u0430: \u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 send()<\/h2>\n
      \u041d\u0435\u0432\u0435\u0440\u043d\u043e:<\/p>\n
      const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\nxhr<\/span>.<\/span>send<\/span>();<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>'responseText:'<\/span>, <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>xhr<\/span>.<\/span>responseText<\/span>));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>'readyState:'<\/span>, <\/span>xhr<\/span>.<\/span>readyState<\/span>);<\/span><\/code><\/pre>\n
      \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 — \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043e\u0442\u0432\u0435\u0442\u0430 \u0435\u0449\u0435 \u043d\u0435\u0442:<\/p>\n
      responseText: ""\nreadyState: 1\n<\/code><\/pre>\n
      \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435: \u0432\u0441\u0435, \u0447\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043e\u0442\u0432\u0435\u0442\u0430, \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 onload<\/code> (\u043a\u0430\u043a \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435) \u0438\u043b\u0438 \u0432 Promise-\u043e\u0431\u0435\u0440\u0442\u043a\u0443, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u043d\u0438\u0436\u0435.<\/p>\n
      readyState: \u043f\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/h2>\n\n\n\n\n\n\n\n\n\n
      readyState<\/th>\n\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430<\/th>\n\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e<\/th>\n<\/tr>\n<\/thead>\n
      0<\/td>\nUNSENT<\/code><\/td>\n\u041e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u043d, open()<\/code> \u0435\u0449\u0435 \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d<\/td>\n<\/tr>\n
      1<\/td>\nOPENED<\/code><\/td>\n\u0412\u044b\u0437\u0432\u0430\u043d open()<\/code><\/td>\n<\/tr>\n
      2<\/td>\nHEADERS_RECEIVED<\/code><\/td>\n\u041f\u0440\u0438\u0448\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/td>\n<\/tr>\n
      3<\/td>\nLOADING<\/code><\/td>\n\u0418\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0442\u0435\u043b\u0430<\/td>\n<\/tr>\n
      4<\/td>\nDONE<\/code><\/td>\n\u0417\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d: \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443 \u0438\u043b\u0438 \u043e\u0442\u043c\u0435\u043d\u0435\u043d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>'\u043f\u043e\u0441\u043b\u0435 new: readyState ='<\/span>, <\/span>xhr<\/span>.<\/span>readyState<\/span>);<\/span>\nxhr<\/span>.<\/span>onreadystatechange<\/span> <\/span>=<\/span> () => {<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'readyState ='<\/span>, <\/span>xhr<\/span>.<\/span>readyState<\/span>, <\/span>'status ='<\/span>, <\/span>xhr<\/span>.<\/span>status<\/span>);<\/span>\n};<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\nxhr<\/span>.<\/span>send<\/span>();<\/span><\/code><\/pre>\n
      \u043f\u043e\u0441\u043b\u0435 new: readyState = 0\nreadyState = 1 status = 0\nreadyState = 2 status = 200\nreadyState = 3 status = 200\nreadyState = 4 status = 200\n<\/code><\/pre>\n
      \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 3 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u0412 \u0441\u0442\u0430\u0440\u043e\u043c \u043a\u043e\u0434\u0435 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f onreadystatechange<\/code> \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 readyState === 4<\/code>; \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0449\u0435 onload<\/code>, onerror<\/code>, ontimeout<\/code> — \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0432\u043e\u0439 \u0438\u0441\u0445\u043e\u0434. \u0412\u0430\u0436\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430: readyState === 4<\/code> \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0443\u0441\u043f\u0435\u0445, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0441\u044f\u00bb.<\/p>\n
      \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a: \u0447\u0442\u043e \u043b\u043e\u0432\u0438\u0442 onload, \u0430 \u0447\u0442\u043e onerror<\/h2>\n
      \u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 — \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 404 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 onerror<\/code>. \u041d\u0435\u0432\u0435\u0440\u043d\u043e:<\/p>\n
      const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/userz'<\/span>);<\/span>\nxhr<\/span>.<\/span>responseType<\/span> <\/span>=<\/span> <\/span>'json'<\/span>;<\/span>\nxhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => {<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'onload, status ='<\/span>, <\/span>xhr<\/span>.<\/span>status<\/span>);<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>xhr<\/span>.<\/span>response<\/span>.<\/span>map<\/span>(<\/span>u<\/span> => <\/span>u<\/span>.<\/span>name<\/span>));<\/span>\n};<\/span>\nxhr<\/span>.<\/span>onerror<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'onerror'<\/span>);<\/span>\nxhr<\/span>.<\/span>send<\/span>();<\/span><\/code><\/pre>\n
      \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b onload<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u0434 \u0443\u043f\u0430\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0440\u0438\u0448\u0435\u043b \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0438 (\u0441\u0442\u0440\u043e\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Failed to load resource ... 404<\/code> \u0438\u0437 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u0435\u0442\u0438 \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c):<\/p>\n
      onload, status = 404\nUncaught TypeError: xhr.response.map is not a function\n<\/code><\/pre>\n
      \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c xhr.status<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 onload<\/code>, \u043a\u0430\u043a \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u0421\u0432\u043e\u0434\u043a\u0430 \u0438\u0441\u0445\u043e\u0434\u043e\u0432 (\u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043e \u043d\u0430 \u0441\u0442\u0435\u043d\u0434\u0435):<\/p>\n\n\n\n\n\n\n\n\n\n\n
      \u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/th>\n\u0421\u043e\u0431\u044b\u0442\u0438\u0435<\/th>\nxhr.status<\/code><\/th>\nxhr.response<\/code> \u043f\u0440\u0438 responseType = 'json'<\/code><\/th>\n<\/tr>\n<\/thead>\n
      200, \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 JSON<\/td>\nload<\/code><\/td>\n200<\/td>\n\u043e\u0431\u044a\u0435\u043a\u0442<\/td>\n<\/tr>\n
      \u041e\u0442\u0432\u0435\u0442 404 (\u0442\u0430\u043a \u0436\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f 500 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u0434\u044b)<\/td>\nload<\/code><\/td>\n404<\/td>\n\u0442\u0435\u043b\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/td>\n<\/tr>\n
      200, \u043d\u043e \u0442\u0435\u043b\u043e \u043d\u0435 JSON (\/api\/broken<\/code>)<\/td>\nload<\/code><\/td>\n200<\/td>\nnull<\/code><\/td>\n<\/tr>\n
      \u0421\u0435\u0440\u0432\u0435\u0440 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0442 CORS<\/td>\nerror<\/code><\/td>\n0<\/td>\nnull<\/code><\/td>\n<\/tr>\n
      \u0418\u0441\u0442\u0435\u043a timeout<\/code><\/td>\ntimeout<\/code><\/td>\n0<\/td>\nnull<\/code><\/td>\n<\/tr>\n
      \u0412\u044b\u0437\u0432\u0430\u043d abort()<\/code><\/td>\nabort<\/code><\/td>\n0<\/td>\nnull<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u041f\u0440\u0430\u0432\u0438\u043b\u043e: HTTP-\u043e\u0448\u0438\u0431\u043a\u0430 — \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442, \u043e\u043d \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 load<\/code>; error<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u043e\u043e\u0431\u0449\u0435. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 loadend<\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043e\u0432, \u0432 \u043d\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n
      \u041e\u0442\u043c\u0435\u043d\u0430 \u0438 \u0442\u0430\u0439\u043c\u0430\u0443\u0442 \u043d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0430\u0434\u0440\u0435\u0441\u0435:<\/p>\n
      const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/slow'<\/span>);<\/span>\nxhr<\/span>.<\/span>onabort<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'abort, status ='<\/span>, <\/span>xhr<\/span>.<\/span>status<\/span>);<\/span>\nxhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'onload \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f'<\/span>);<\/span>\nxhr<\/span>.<\/span>send<\/span>();<\/span>\nsetTimeout<\/span>(() => <\/span>xhr<\/span>.<\/span>abort<\/span>(), <\/span>500<\/span>);<\/span><\/code><\/pre>\n
      abort, status = 0\n<\/code><\/pre>\n
      abort()<\/code> \u043d\u0443\u0436\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u0432\u0435\u0442 \u0441\u0442\u0430\u043b \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0448\u0435\u043b \u0441\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0438\u043b\u0438 \u0432\u0432\u0435\u043b \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n
      POST: \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 JSON \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/h2>\n
      const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'POST'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\nxhr<\/span>.<\/span>setRequestHeader<\/span>(<\/span>'Content-Type'<\/span>, <\/span>'application\/json'<\/span>);<\/span>\nxhr<\/span>.<\/span>responseType<\/span> <\/span>=<\/span> <\/span>'json'<\/span>;<\/span>\nxhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>xhr<\/span>.<\/span>status<\/span>, <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>xhr<\/span>.<\/span>response<\/span>));<\/span>\nxhr<\/span>.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>({ <\/span>name<\/span>:<\/span> <\/span>'\u0412\u0435\u0440\u0430'<\/span>, <\/span>job<\/span>:<\/span> <\/span>'QA'<\/span> }));<\/span><\/code><\/pre>\n
      201 {"name":"\u0412\u0435\u0440\u0430","job":"QA","id":3}\n<\/code><\/pre>\n
      setRequestHeader<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 open()<\/code> \u0438 \u0434\u043e send()<\/code>. \u041e\u0431\u044a\u0435\u043a\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 JSON.stringify<\/code>: \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 [object Object]<\/code>. \u0414\u043b\u044f HTML-\u0444\u043e\u0440\u043c\u044b \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 send(new FormData(form))<\/code> — \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Content-Type<\/code> \u0441 \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0447\u0430\u0441\u0442\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043c.<\/p>\n
      \u0412\u044b\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0435\u0437 XSS<\/h2>\n
      \u0414\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 innerHTML<\/code>: \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u0438\u0434\u0430 <img src=x onerror=...><\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0447\u0443\u0436\u043e\u0439 \u043a\u043e\u0434. \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 — textContent<\/code>:<\/p>\n
      const<\/span> <\/span>list<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'list'<\/span>);<\/span>\nconst<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\nxhr<\/span>.<\/span>open<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\nxhr<\/span>.<\/span>responseType<\/span> <\/span>=<\/span> <\/span>'json'<\/span>;<\/span>\nxhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => {<\/span>\n  <\/span>if<\/span> (<\/span>xhr<\/span>.<\/span>status<\/span> <\/span>!==<\/span> <\/span>200<\/span> <\/span>||<\/span> <\/span>!<\/span>Array<\/span>.<\/span>isArray<\/span>(<\/span>xhr<\/span>.<\/span>response<\/span>)) <\/span>return<\/span>;<\/span>\n  <\/span>for<\/span> (<\/span>const<\/span> <\/span>user<\/span> <\/span>of<\/span> <\/span>xhr<\/span>.<\/span>response<\/span>) {<\/span>\n    <\/span>const<\/span> <\/span>li<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'li'<\/span>);<\/span>\n    <\/span>li<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>user<\/span>.<\/span>name<\/span>;<\/span>\n    <\/span>list<\/span>.<\/span>append<\/span>(<\/span>li<\/span>);<\/span>\n  }<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>list<\/span>.<\/span>children<\/span>.<\/span>length<\/span>, <\/span>'\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435'<\/span>);<\/span>\n};<\/span>\nxhr<\/span>.<\/span>send<\/span>();<\/span><\/code><\/pre>\n
      \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u043f\u0443\u043d\u043a\u0442\u044b \u00ab\u0410\u043d\u043d\u0430\u00bb \u0438 \u00ab\u0411\u043e\u0440\u0438\u0441\u00bb, \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 — 2 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435<\/code>. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 Array.isArray<\/code> \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043e\u0442 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b. \u042d\u0442\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0432\u043e\u0434: \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u0440\u0430\u0432 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0432\u0445\u043e\u0434\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n
      XHR \u0438 Promise: \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f async\/await<\/h2>\n
      function<\/span> <\/span>request<\/span>(<\/span>method<\/span>, <\/span>url<\/span>, <\/span>body<\/span>) {<\/span>\n  <\/span>return<\/span> <\/span>new<\/span> <\/span>Promise<\/span>((<\/span>resolve<\/span>, <\/span>reject<\/span>) => {<\/span>\n    <\/span>const<\/span> <\/span>xhr<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\n    <\/span>xhr<\/span>.<\/span>open<\/span>(<\/span>method<\/span>, <\/span>url<\/span>);<\/span>\n    <\/span>xhr<\/span>.<\/span>responseType<\/span> <\/span>=<\/span> <\/span>'json'<\/span>;<\/span>\n    <\/span>xhr<\/span>.<\/span>timeout<\/span> <\/span>=<\/span> <\/span>5000<\/span>;<\/span>\n    <\/span>if<\/span> (<\/span>body<\/span> <\/span>!==<\/span> <\/span>undefined<\/span>) {<\/span>\n      <\/span>xhr<\/span>.<\/span>setRequestHeader<\/span>(<\/span>'Content-Type'<\/span>, <\/span>'application\/json'<\/span>);<\/span>\n    }<\/span>\n    <\/span>xhr<\/span>.<\/span>onload<\/span> <\/span>=<\/span> () => {<\/span>\n      <\/span>if<\/span> (<\/span>xhr<\/span>.<\/span>status<\/span> <\/span><<\/span> <\/span>200<\/span> <\/span>||<\/span> <\/span>xhr<\/span>.<\/span>status<\/span> <\/span>>=<\/span> <\/span>300<\/span>) {<\/span>\n        <\/span>reject<\/span>(<\/span>new<\/span> <\/span>Error<\/span>(<\/span>'HTTP '<\/span> <\/span>+<\/span> <\/span>xhr<\/span>.<\/span>status<\/span>));<\/span>\n      } <\/span>else<\/span> <\/span>if<\/span> (<\/span>xhr<\/span>.<\/span>response<\/span> <\/span>===<\/span> <\/span>null<\/span> <\/span>&&<\/span> <\/span>xhr<\/span>.<\/span>status<\/span> <\/span>!==<\/span> <\/span>204<\/span>) {<\/span>\n        <\/span>reject<\/span>(<\/span>new<\/span> <\/span>Error<\/span>(<\/span>'\u041e\u0442\u0432\u0435\u0442 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c JSON'<\/span>));<\/span>\n      } <\/span>else<\/span> {<\/span>\n        <\/span>resolve<\/span>(<\/span>xhr<\/span>.<\/span>response<\/span>);<\/span>\n      }<\/span>\n    };<\/span>\n    <\/span>xhr<\/span>.<\/span>onerror<\/span> <\/span>=<\/span> () => <\/span>reject<\/span>(<\/span>new<\/span> <\/span>Error<\/span>(<\/span>'\u0421\u0435\u0442\u0435\u0432\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 CORS'<\/span>));<\/span>\n    <\/span>xhr<\/span>.<\/span>ontimeout<\/span> <\/span>=<\/span> () => <\/span>reject<\/span>(<\/span>new<\/span> <\/span>Error<\/span>(<\/span>'\u0422\u0430\u0439\u043c\u0430\u0443\u0442 5 \u0441'<\/span>));<\/span>\n    <\/span>xhr<\/span>.<\/span>send<\/span>(<\/span>body<\/span> <\/span>===<\/span> <\/span>undefined<\/span> <\/span>?<\/span> <\/span>null<\/span> <\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>body<\/span>));<\/span>\n  });<\/span>\n}<\/span>\n\nasync<\/span> <\/span>function<\/span> <\/span>main<\/span>() {<\/span>\n  <\/span>const<\/span> <\/span>users<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>request<\/span>(<\/span>'GET'<\/span>, <\/span>'\/api\/users'<\/span>);<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'GET:'<\/span>, <\/span>users<\/span>.<\/span>length<\/span>, <\/span>'\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f'<\/span>);<\/span>\n  <\/span>const<\/span> <\/span>created<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>request<\/span>(<\/span>'POST'<\/span>, <\/span>'\/api\/users'<\/span>, { <\/span>name<\/span>:<\/span> <\/span>'\u0412\u0435\u0440\u0430'<\/span> });<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'POST: id ='<\/span>, <\/span>created<\/span>.<\/span>id<\/span>);<\/span>\n  <\/span>for<\/span> (<\/span>const<\/span> <\/span>url<\/span> <\/span>of<\/span> [<\/span>'\/api\/userz'<\/span>, <\/span>'\/api\/broken'<\/span>]) {<\/span>\n    <\/span>try<\/span> {<\/span>\n      <\/span>await<\/span> <\/span>request<\/span>(<\/span>'GET'<\/span>, <\/span>url<\/span>);<\/span>\n    } <\/span>catch<\/span> (<\/span>e<\/span>) {<\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>url<\/span>, <\/span>'->'<\/span>, <\/span>e<\/span>.<\/span>message<\/span>);<\/span>\n    }<\/span>\n  }<\/span>\n}<\/span>\nmain<\/span>();<\/span><\/code><\/pre>\n
      GET: 2 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\nPOST: id = 3\n\/api\/userz -> HTTP 404\n\/api\/broken -> \u041e\u0442\u0432\u0435\u0442 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c JSON\n<\/code><\/pre>\n
      \u0413\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0438: \u043f\u0440\u0438 responseType = 'json'<\/code> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u0434\u0430\u0435\u0442 null<\/code> \u0438 \u0434\u043b\u044f \u0431\u0438\u0442\u043e\u0433\u043e JSON, \u0438 \u0434\u043b\u044f \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u0442\u0435\u043b\u0430, \u0438 \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0433\u043e JSON-\u043b\u0438\u0442\u0435\u0440\u0430\u043b\u0430 null<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 xhr.response === null<\/code> \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u0445 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442. \u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043a\u043e\u043d\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 null<\/code> \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u044b\u043c \u0442\u0435\u043b\u043e\u043c \u0441 \u043a\u043e\u0434\u043e\u043c 200, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0442\u0435\u043b\u043e \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442 (responseType = 'text'<\/code>) \u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0439\u0442\u0435 JSON.parse<\/code> \u0432 try<\/code>.<\/p>\n
      \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 XHR: \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442<\/h2>\n
      \u0412\u044b\u0437\u043e\u0432 open('GET', url, false)<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c: send()<\/code> \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0442\u043e\u043a, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442, \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0438\u0448\u0435\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0430\u0439\u043c\u0430\u0443\u0442 — Chromium 152 \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442:<\/p>\n
      InvalidAccessError: Failed to set the 'timeout' property on 'XMLHttpRequest': Timeouts cannot be set for synchronous requests made from a document.\n<\/code><\/pre>\n
      \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 XHR \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0440\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u0432 Web Worker, \u0433\u0434\u0435 \u043e\u043d \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441; \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 — \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c.<\/p>\n
      XHR \u0438\u043b\u0438 fetch<\/h2>\n\n\n\n\n\n\n\n\n\n\n
      \u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0439<\/th>\nXHR<\/th>\nfetch<\/th>\n<\/tr>\n<\/thead>\n
      \u0421\u0442\u0438\u043b\u044c<\/td>\n\u0421\u043e\u0431\u044b\u0442\u0438\u044f (onload<\/code>, onerror<\/code>)<\/td>\nPromise, \u0443\u0434\u043e\u0431\u043d\u043e \u0441 async\/await<\/code><\/td>\n<\/tr>\n
      \u041e\u0442\u0432\u0435\u0442 404\/500<\/td>\n\u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 load<\/code>, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c status<\/code><\/td>\nPromise \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c res.ok<\/code><\/td>\n<\/tr>\n
      \u0422\u0430\u0439\u043c\u0430\u0443\u0442<\/td>\n\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e timeout<\/code><\/td>\nAbortSignal.timeout(ms)<\/code><\/td>\n<\/tr>\n
      \u041e\u0442\u043c\u0435\u043d\u0430<\/td>\nxhr.abort()<\/code><\/td>\nAbortController<\/code><\/td>\n<\/tr>\n
      \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430<\/td>\nxhr.upload.onprogress<\/code><\/td>\n\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0435\u0442<\/td>\n<\/tr>\n
      \u0413\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d<\/td>\n\u0411\u0440\u0430\u0443\u0437\u0435\u0440, Web Worker<\/td>\n\u0411\u0440\u0430\u0443\u0437\u0435\u0440, Worker, Node.js (\u0431\u0435\u0437 \u0444\u043b\u0430\u0433\u0430 \u0441 18, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441 21)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u0422\u043e\u0442 \u0436\u0435 GET \u043d\u0430 fetch<\/code>:<\/p>\n
      async<\/span> <\/span>function<\/span> <\/span>loadUsers<\/span>() {<\/span>\n  <\/span>const<\/span> <\/span>res<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>'\/api\/users'<\/span>);<\/span>\n  <\/span>if<\/span> (<\/span>!<\/span>res<\/span>.<\/span>ok<\/span>) <\/span>throw<\/span> <\/span>new<\/span> <\/span>Error<\/span>(<\/span>'HTTP '<\/span> <\/span>+<\/span> <\/span>res<\/span>.<\/span>status<\/span>);<\/span>\n  <\/span>return<\/span> <\/span>res<\/span>.<\/span>json<\/span>();<\/span>\n}<\/span>\nloadUsers<\/span>().<\/span>then<\/span>(<\/span>users<\/span> => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'fetch:'<\/span>, <\/span>users<\/span>.<\/span>map<\/span>(<\/span>u<\/span> => <\/span>u<\/span>.<\/span>name<\/span>).<\/span>join<\/span>(<\/span>', '<\/span>)));<\/span><\/code><\/pre>\n
      fetch: \u0410\u043d\u043d\u0430, \u0411\u043e\u0440\u0438\u0441\n<\/code><\/pre>\n
      \u0414\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0431\u0435\u0440\u0443\u0442 fetch<\/code>. XHR \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445: \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (xhr.upload.onprogress<\/code>) \u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043d\u0430 XHR \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, $.ajax<\/code> \u0432 jQuery). \u041f\u0440\u043e jQuery-\u0432\u0430\u0440\u0438\u0430\u043d\u0442 — \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 AJAX-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e jQuery<\/a>.<\/p>\n
      \u0415\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/h2>\n