{"id":9248,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=9248"},"modified":"2026-09-25T15:25:20","modified_gmt":"2026-09-25T15:25:20","slug":"ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov\/","title":{"rendered":"jQuery AJAX: \u0437\u0430\u043f\u0440\u043e\u0441\u044b $.ajax, $.get, $.post \u0438 \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433 \u043d\u0430 fetch"},"content":{"rendered":"

jQuery AJAX<\/strong> — \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 jQuery \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0437 JavaScript \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u0431\u0430\u0437\u043e\u0432\u0430\u044f $.ajax()<\/code> \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f $.get()<\/code>, $.post()<\/code>, $.getJSON()<\/code>, .load()<\/code>. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u044a\u0435\u043a\u0442 XMLHttpRequest<\/code> \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 jqXHR<\/code>, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0448\u0430\u044e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 .done()<\/code>, .fail()<\/code> \u0438 .always()<\/code>.<\/p>\n

\n

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

    \n
  1. \u0427\u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0442\u043e: AJAX, XHR, jqXHR, fetch<\/a><\/li>\n
  2. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/li>\n
  3. \u0420\u0430\u0437\u0431\u043e\u0440 $.ajax: \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/a><\/li>\n
  4. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438: .done, .fail, .always \u0438 .then<\/a><\/li>\n
  5. \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f: $.get, $.post, $.getJSON, .load<\/a><\/li>\n
  6. \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: JSON \u0443\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u0430<\/a><\/li>\n
  7. \u0422\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u043d\u0430 fetch<\/a><\/li>\n
  8. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  9. \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/a><\/li>\n
  10. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  11. \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
  12. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    jQuery \u043d\u0430 2026 \u0433\u043e\u0434 — \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430: \u0432 \u043d\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0442\u043e\u0442 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0438\u0448\u0443\u0442 \u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c fetch<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0438\u0436\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0438\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b \u043d\u0430 jQuery 4.0.0 \u0438 Node.js 24 (\u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044c 2026).<\/p>\n

    \u0427\u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0442\u043e: AJAX, XHR, jqXHR, fetch<\/h2>\n

    \u042d\u0442\u0438 \u0441\u043b\u043e\u0432\u0430 \u0447\u0430\u0441\u0442\u043e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u044e\u0442, \u0445\u043e\u0442\u044f \u043e\u043d\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u0438.<\/p>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u0413\u0434\u0435 \u0436\u0438\u0432\u0435\u0442<\/th>\n<\/tr>\n<\/thead>\n
    AJAX<\/td>\n\u041f\u043e\u0434\u0445\u043e\u0434: \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0444\u043e\u043d\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/td>\n\u0418\u0434\u0435\u044f, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441 2005 \u0433\u043e\u0434\u0430<\/td>\n<\/tr>\n
    XMLHttpRequest<\/code> (XHR)<\/td>\n\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 API \u0434\u043b\u044f HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u044b\u0439<\/td>\n\u0411\u0440\u0430\u0443\u0437\u0435\u0440<\/td>\n<\/tr>\n
    jqXHR<\/code><\/td>\n\u041e\u0431\u0435\u0440\u0442\u043a\u0430 jQuery \u043d\u0430\u0434 XHR \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043f\u0440\u043e\u043c\u0438\u0441\u0430 (.done<\/code>, .fail<\/code>, .then<\/code>)<\/td>\njQuery<\/td>\n<\/tr>\n
    fetch<\/code><\/td>\n\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 API \u043d\u0430 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u0445<\/td>\n\u0411\u0440\u0430\u0443\u0437\u0435\u0440, Node.js 18+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0411\u0443\u043a\u0432\u0430 X \u0432 AJAX \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 XML, \u043d\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 JSON. \u0421\u0430\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c HTTP: \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0433\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b jQuery.<\/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<\/h2>\n

    \u041d\u0443\u0436\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u043d\u0438\u0436\u0435 \u043e\u0442\u0434\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0443\u0440\u0441\u043e\u0432 \u043f\u043e GET, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u0430 \u043a\u0443\u0440\u0441 \u043f\u043e POST (\u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON) \u0438 \u0440\u0430\u0437\u0434\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u043a\u0443. \u041f\u043e\u043b\u043e\u0436\u0438\u0442\u0435 jquery.min.js<\/code> \u0438 index.html<\/code> \u0432 \u043f\u0430\u043f\u043a\u0443 public<\/code> \u0440\u044f\u0434\u043e\u043c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c.<\/p>\n

    \/\/ server.js - \u0443\u0447\u0435\u0431\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440: node server.js, \u0437\u0430\u0442\u0435\u043c http:\/\/localhost:3000<\/span>\nconst<\/span> <\/span>http<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>\"node:http\"<\/span>);<\/span>\nconst<\/span> <\/span>fs<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>\"node:fs\"<\/span>);<\/span>\nconst<\/span> <\/span>path<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>\"node:path\"<\/span>);<\/span>\n\nconst<\/span> <\/span>courses<\/span> <\/span>=<\/span> [{ <\/span>id<\/span>:<\/span> <\/span>1<\/span>, <\/span>title<\/span>:<\/span> <\/span>\"JavaScript Developer. Basic\"<\/span> }];<\/span>\n\nfunction<\/span> <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>status<\/span>, <\/span>obj<\/span>) {<\/span>\n  <\/span>res<\/span>.<\/span>writeHead<\/span>(<\/span>status<\/span>, { <\/span>\"Content-Type\"<\/span>:<\/span> <\/span>\"application\/json; charset=utf-8\"<\/span> });<\/span>\n  <\/span>res<\/span>.<\/span>end<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>obj<\/span>));<\/span>\n}<\/span>\n\nhttp<\/span>.<\/span>createServer<\/span>((<\/span>req<\/span>, <\/span>res<\/span>) => {<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>\"GET\"<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>\"\/api\/courses\"<\/span>) {<\/span>\n    <\/span>return<\/span> <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>200<\/span>, <\/span>courses<\/span>);<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>\"\/api\/slow\"<\/span>) { <\/span>\/\/ \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0430<\/span>\n    <\/span>return<\/span> <\/span>setTimeout<\/span>(() => <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>200<\/span>, { <\/span>late<\/span>:<\/span> <\/span>true<\/span> }), <\/span>3000<\/span>);<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>\"POST\"<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>\"\/api\/signup\"<\/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>return<\/span> <\/span>req<\/span>.<\/span>on<\/span>(<\/span>\"end\"<\/span>, () => {<\/span>\n      <\/span>const<\/span> <\/span>type<\/span> <\/span>=<\/span> <\/span>req<\/span>.<\/span>headers<\/span>[<\/span>\"content-type\"<\/span>] <\/span>||<\/span> <\/span>\"\"<\/span>;<\/span>\n      <\/span>if<\/span> (<\/span>!<\/span>type<\/span>.<\/span>startsWith<\/span>(<\/span>\"application\/json\"<\/span>)) {<\/span>\n        <\/span>return<\/span> <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>415<\/span>, { <\/span>error<\/span>:<\/span> <\/span>\"\u043e\u0436\u0438\u0434\u0430\u044e JSON\"<\/span>, <\/span>got<\/span>:<\/span> <\/span>type<\/span> });<\/span>\n      }<\/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>sendJson<\/span>(<\/span>res<\/span>, <\/span>400<\/span>, { <\/span>error<\/span>:<\/span> <\/span>\"\u0431\u0438\u0442\u044b\u0439 JSON\"<\/span> }); }<\/span>\n      <\/span>if<\/span> (<\/span>!<\/span>data<\/span>.<\/span>email<\/span>) <\/span>return<\/span> <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>422<\/span>, { <\/span>error<\/span>:<\/span> <\/span>\"\u043d\u0435\u0442 email\"<\/span> });<\/span>\n      <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>201<\/span>, { <\/span>ok<\/span>:<\/span> <\/span>true<\/span>, <\/span>email<\/span>:<\/span> <\/span>data<\/span>.<\/span>email<\/span> });<\/span>\n    });<\/span>\n  }<\/span>\n  <\/span>\/\/ \u0441\u0442\u0430\u0442\u0438\u043a\u0430: index.html \u0438 jquery.min.js \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 public<\/span>\n  <\/span>const<\/span> <\/span>file<\/span> <\/span>=<\/span> <\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>\"\/\"<\/span> <\/span>?<\/span> <\/span>\"index.html\"<\/span> <\/span>:<\/span> <\/span>path<\/span>.<\/span>basename<\/span>(<\/span>req<\/span>.<\/span>url<\/span>);<\/span>\n  <\/span>fs<\/span>.<\/span>readFile<\/span>(<\/span>path<\/span>.<\/span>join<\/span>(<\/span>__dirname<\/span>, <\/span>\"public\"<\/span>, <\/span>file<\/span>), (<\/span>err<\/span>, <\/span>content<\/span>) => {<\/span>\n    <\/span>if<\/span> (<\/span>err<\/span>) <\/span>return<\/span> <\/span>sendJson<\/span>(<\/span>res<\/span>, <\/span>404<\/span>, { <\/span>error<\/span>:<\/span> <\/span>\"not found\"<\/span> });<\/span>\n    <\/span>const<\/span> <\/span>type<\/span> <\/span>=<\/span> <\/span>file<\/span>.<\/span>endsWith<\/span>(<\/span>\".js\"<\/span>) <\/span>?<\/span> <\/span>\"text\/javascript\"<\/span> <\/span>:<\/span> <\/span>\"text\/html; charset=utf-8\"<\/span>;<\/span>\n    <\/span>res<\/span>.<\/span>writeHead<\/span>(<\/span>200<\/span>, { <\/span>\"Content-Type\"<\/span>:<\/span> <\/span>type<\/span> });<\/span>\n    <\/span>res<\/span>.<\/span>end<\/span>(<\/span>content<\/span>);<\/span>\n  });<\/span>\n}).<\/span>listen<\/span>(<\/span>3000<\/span>, () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"http:\/\/localhost:3000\"<\/span>));<\/span><\/code><\/pre>\n
    \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0434\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430: GET \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438 POST \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c\u044b.<\/p>\n
    <!doctype html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><<\/span>title<\/span>><\/span>jQuery AJAX<\/<\/span>title<\/span>><\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>ul<\/span> id<\/span>=<\/span>\"courses\"<\/span>><\/<\/span>ul<\/span>><\/span>\n  <<\/span>form<\/span> id<\/span>=<\/span>\"signup\"<\/span>><\/span>\n    <<\/span>input<\/span> name<\/span>=<\/span>\"email\"<\/span> value<\/span>=<\/span>\"student@example.com\"<\/span>><\/span>\n    <<\/span>button<\/span>><\/span>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f<\/<\/span>button<\/span>><\/span>\n  <\/<\/span>form<\/span>><\/span>\n  <<\/span>p<\/span> id<\/span>=<\/span>\"status\"<\/span>><\/<\/span>p<\/span>><\/span>\n\n  <<\/span>script<\/span> src<\/span>=<\/span>\"\/jquery.min.js\"<\/span>><\/<\/span>script<\/span>><\/span>\n  <<\/span>script<\/span>><\/span>\n    <\/span>\/\/ 1. GET: \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c JSON \u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0441\u043f\u0438\u0441\u043e\u043a<\/span>\n    <\/span>$<\/span>.<\/span>ajax<\/span>({ <\/span>url<\/span>:<\/span> <\/span>\"\/api\/courses\"<\/span>, <\/span>method<\/span>:<\/span> <\/span>\"GET\"<\/span>, <\/span>dataType<\/span>:<\/span> <\/span>\"json\"<\/span>, <\/span>timeout<\/span>:<\/span> <\/span>5000<\/span> })<\/span>\n      .<\/span>done<\/span>(<\/span>function<\/span> (<\/span>courses<\/span>) {<\/span>\n        <\/span>courses<\/span>.<\/span>forEach<\/span>(<\/span>function<\/span> (<\/span>c<\/span>) {<\/span>\n          <\/span>$<\/span>(<\/span>\"<li>\"<\/span>).<\/span>text<\/span>(<\/span>c<\/span>.<\/span>title<\/span>).<\/span>appendTo<\/span>(<\/span>\"#courses\"<\/span>); <\/span>\/\/ .text(), \u043d\u0435 .html()<\/span>\n        });<\/span>\n      })<\/span>\n      .<\/span>fail<\/span>(<\/span>function<\/span> (<\/span>jqXHR<\/span>, <\/span>textStatus<\/span>) {<\/span>\n        <\/span>$<\/span>(<\/span>\"#status\"<\/span>).<\/span>text<\/span>(<\/span>\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438: \"<\/span> <\/span>+<\/span> <\/span>textStatus<\/span> <\/span>+<\/span> <\/span>\" \"<\/span> <\/span>+<\/span> <\/span>jqXHR<\/span>.<\/span>status<\/span>);<\/span>\n      });<\/span>\n\n    <\/span>\/\/ 2. POST: \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043a\u0430\u043a JSON \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/span>\n    <\/span>$<\/span>(<\/span>\"#signup\"<\/span>).<\/span>on<\/span>(<\/span>\"submit\"<\/span>, <\/span>function<\/span> (<\/span>event<\/span>) {<\/span>\n      <\/span>event<\/span>.<\/span>preventDefault<\/span>();<\/span>\n      <\/span>$<\/span>.<\/span>ajax<\/span>({<\/span>\n        <\/span>url<\/span>:<\/span> <\/span>\"\/api\/signup\"<\/span>,<\/span>\n        <\/span>method<\/span>:<\/span> <\/span>\"POST\"<\/span>,<\/span>\n        <\/span>contentType<\/span>:<\/span> <\/span>\"application\/json\"<\/span>,<\/span>\n        <\/span>data<\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>({ <\/span>email<\/span>:<\/span> <\/span>$<\/span>(<\/span>this<\/span>).<\/span>find<\/span>(<\/span>\"[name=email]\"<\/span>).<\/span>val<\/span>() }),<\/span>\n        <\/span>dataType<\/span>:<\/span> <\/span>\"json\"<\/span>\n      })<\/span>\n        .<\/span>done<\/span>(<\/span>function<\/span> (<\/span>data<\/span>, <\/span>textStatus<\/span>, <\/span>jqXHR<\/span>) {<\/span>\n          <\/span>$<\/span>(<\/span>\"#status\"<\/span>).<\/span>text<\/span>(<\/span>jqXHR<\/span>.<\/span>status<\/span> <\/span>+<\/span> <\/span>\": \u0437\u0430\u043f\u0438\u0441\u0430\u043d \"<\/span> <\/span>+<\/span> <\/span>data<\/span>.<\/span>email<\/span>);<\/span>\n        })<\/span>\n        .<\/span>fail<\/span>(<\/span>function<\/span> (<\/span>jqXHR<\/span>) {<\/span>\n          <\/span>$<\/span>(<\/span>\"#status\"<\/span>).<\/span>text<\/span>(<\/span>jqXHR<\/span>.<\/span>status<\/span> <\/span>+<\/span> <\/span>\": \"<\/span> <\/span>+<\/span> (<\/span>jqXHR<\/span>.<\/span>responseJSON<\/span> <\/span>?<\/span> <\/span>jqXHR<\/span>.<\/span>responseJSON<\/span>.<\/span>error<\/span> <\/span>:<\/span> <\/span>jqXHR<\/span>.<\/span>statusText<\/span>));<\/span>\n        })<\/span>\n        .<\/span>always<\/span>(<\/span>function<\/span> () {<\/span>\n          <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\"<\/span>);<\/span>\n        });<\/span>\n    });<\/span>\n  <\/<\/span>script<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
    \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 node server.js<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 http:\/\/localhost:3000<\/code>. \u0412 \u0441\u043f\u0438\u0441\u043a\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u00abJavaScript Developer. Basic\u00bb. \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0430\u0431\u0437\u0430\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 201: \u0437\u0430\u043f\u0438\u0441\u0430\u043d student@example.com<\/code>, \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 — \u00ab\u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u00bb. \u0415\u0441\u043b\u0438 \u0441\u0442\u0435\u0440\u0435\u0442\u044c email \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043d\u043e\u0432\u0430, \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 .fail<\/code>: 422: \u043d\u0435\u0442 email<\/code>. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f.<\/p>\n
    \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c index.html<\/code> \u0434\u0432\u043e\u0439\u043d\u044b\u043c \u043a\u043b\u0438\u043a\u043e\u043c (\u0430\u0434\u0440\u0435\u0441 file:\/\/<\/code>) \u043d\u0435\u043b\u044c\u0437\u044f: \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \/api\/...<\/code> \u0443\u0439\u0434\u0443\u0442 \u043d\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 $.ajax: \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/h2>\n
    $.ajax()<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 jQuery \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 — \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0442\u043e\u0439 \u0436\u0435 $.ajax()<\/code>.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
    \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<\/th>\n\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442<\/th>\n\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/th>\n<\/tr>\n<\/thead>\n
    url<\/code><\/td>\n\u0410\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/td>\n\"\/api\/courses\"<\/code><\/td>\n<\/tr>\n
    method<\/code><\/td>\nHTTP-\u043c\u0435\u0442\u043e\u0434 (\u0441\u0442\u0430\u0440\u043e\u0435 \u0438\u043c\u044f — type<\/code>, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0441\u0438\u043d\u043e\u043d\u0438\u043c)<\/td>\n\"POST\"<\/code><\/td>\n<\/tr>\n
    data<\/code><\/td>\n\u0414\u0430\u043d\u043d\u044b\u0435: \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u0430 a=1&b=2<\/code>, \u0441\u0442\u0440\u043e\u043a\u0430 \u0443\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0435\u0441\u0442\u044c<\/td>\nJSON.stringify(...)<\/code><\/td>\n<\/tr>\n
    contentType<\/code><\/td>\n\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Content-Type<\/code> \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e — \u0444\u043e\u0440\u043c\u0430<\/td>\n\"application\/json\"<\/code><\/td>\n<\/tr>\n
    dataType<\/code><\/td>\n\u041a\u0430\u043a \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442: json<\/code>, text<\/code>, html<\/code>, script<\/code><\/td>\n\"json\"<\/code><\/td>\n<\/tr>\n
    timeout<\/code><\/td>\n\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0436\u0434\u0430\u0442\u044c \u0434\u043e \u043e\u0448\u0438\u0431\u043a\u0438 timeout<\/code><\/td>\n5000<\/code><\/td>\n<\/tr>\n
    headers<\/code><\/td>\n\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 CSRF-\u0442\u043e\u043a\u0435\u043d<\/td>\n—<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0412\u0430\u0436\u043d\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c contentType<\/code> \u0438 dataType<\/code>: \u043f\u0435\u0440\u0432\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0435, \u0432\u0442\u043e\u0440\u043e\u0439 — \u043a\u0430\u043a jQuery \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442 \u043e\u0442\u0432\u0435\u0442.<\/p>\n
    \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438: .done, .fail, .always \u0438 .then<\/h2>\n
    .done(data, textStatus, jqXHR)<\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u043a\u043e\u0434\u0435 2xx \u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u043e\u0442\u0432\u0435\u0442\u0430. .fail(jqXHR, textStatus, errorThrown)<\/code> — \u043f\u0440\u0438 \u043a\u043e\u0434\u0435 4xx\/5xx, \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0435, \u043e\u0431\u0440\u044b\u0432\u0435 \u0441\u0435\u0442\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0440\u0430\u0437\u0431\u043e\u0440\u0430. .always<\/code> — \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. jqXHR<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438 .then()<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432 \u0442\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442: $.getJSON(\"\/api\/courses\").then(d => d.length)<\/code> \u0432\u0435\u0440\u043d\u0435\u0442 1<\/code>.<\/p>\n
    \u041e\u043f\u0446\u0438\u0438 success<\/code>, error<\/code> \u0438 complete<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0410 \u0432\u043e\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0443\u0431\u0440\u0430\u043b\u0438 \u0432 jQuery 3.0, \u0438 \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u0434 \u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 4.0.0 \u0442\u0430\u043a:<\/p>\n
    TypeError: $.ajax(...).success is not a function\n<\/code><\/pre>\n
    \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c .success()<\/code> \u043d\u0430 .done()<\/code>, .error()<\/code> \u043d\u0430 .fail()<\/code>, .complete()<\/code> \u043d\u0430 .always()<\/code>.<\/p>\n
    \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f: $.get, $.post, $.getJSON, .load<\/h2>\n\n\n\n\n\n\n\n\n\n
    \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435<\/th>\n\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442<\/th>\n\u042d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 $.ajax<\/th>\n<\/tr>\n<\/thead>\n
    $.get(url, data)<\/code><\/td>\nGET, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/td>\nmethod: \"GET\"<\/code><\/td>\n<\/tr>\n
    $.post(url, data)<\/code><\/td>\nPOST, \u0442\u0435\u043b\u043e \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u0430<\/td>\nmethod: \"POST\"<\/code><\/td>\n<\/tr>\n
    $.getJSON(url)<\/code><\/td>\nGET \u0441 \u0440\u0430\u0437\u0431\u043e\u0440\u043e\u043c JSON<\/td>\ndataType: \"json\"<\/code><\/td>\n<\/tr>\n
    $(\"#box\").load(url)<\/code><\/td>\nGET \u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0430 HTML \u043e\u0442\u0432\u0435\u0442\u0430 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442; \u0435\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u043e\u0431\u044a\u0435\u043a\u0442, \u0443\u0445\u043e\u0434\u0438\u0442 POST<\/td>\ndataType: \"html\"<\/code> + .html()<\/code><\/td>\n<\/tr>\n
    $.getScript(url)<\/code><\/td>\n\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 JS<\/td>\ndataType: \"script\"<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0443\u0434\u043e\u0431\u043d\u044b, \u043f\u043e\u043a\u0430 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u0439. \u0412 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 $.post(url, data, success, dataType)<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 contentType<\/code> \u043d\u0435\u0442, \u0438 \u044d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0438\u0436\u0435. \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 $.post({ url, data, contentType: \"application\/json\" })<\/code> \u0435\u0433\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442, \u043d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0442\u043e\u0442 \u0436\u0435 $.ajax<\/code> \u0441 method: \"POST\"<\/code>.<\/p>\n
    \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: JSON \u0443\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u0430<\/h2>\n
    \u041d\u0435\u0432\u0435\u0440\u043d\u043e: \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 JSON-\u0441\u0442\u0440\u043e\u043a\u0443 \u0431\u0435\u0437 contentType<\/code>.<\/p>\n
    $<\/span>.<\/span>post<\/span>(<\/span>\"\/api\/signup\"<\/span>, <\/span>JSON<\/span>.<\/span>stringify<\/span>({ <\/span>email<\/span>:<\/span> <\/span>\"b@example.com\"<\/span> }), <\/span>null<\/span>, <\/span>\"json\"<\/span>)<\/span>\n  .<\/span>fail<\/span>(<\/span>function<\/span> (<\/span>jqXHR<\/span>) { <\/span>console<\/span>.<\/span>log<\/span>(<\/span>jqXHR<\/span>.<\/span>status<\/span>, <\/span>jqXHR<\/span>.<\/span>responseText<\/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 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n
    415 {"error":"\u043e\u0436\u0438\u0434\u0430\u044e JSON","got":"application\/x-www-form-urlencoded; charset=UTF-8"}\n<\/code><\/pre>\n
    \u0422\u0435\u043b\u043e \u0443\u0448\u043b\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439 JSON, \u043d\u043e \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u044b, \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0435\u0433\u043e \u043e\u0442\u0432\u0435\u0440\u0433. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432 data<\/code> \u0431\u044b\u043b \u043e\u0431\u044a\u0435\u043a\u0442, jQuery \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u044b \u0435\u0433\u043e \u043a\u0430\u043a email=b%40example.com<\/code> — \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0431\u044b \u0442\u043e\u0442 \u0436\u0435 415. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — $.ajax<\/code> (\u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 $.post<\/code>) \u0441 contentType: \"application\/json\"<\/code> \u0438 JSON.stringify<\/code>, \u043a\u0430\u043a \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435: \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 201<\/code>.<\/p>\n
    \u0422\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u043d\u0430 fetch<\/h2>\n
    fetch<\/code> \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u0432 Node.js 18+, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435: \u043f\u0440\u043e\u043c\u0438\u0441 fetch<\/code> \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u0438\u043b\u0438 \u043e\u0442\u043c\u0435\u043d\u0435. \u041e\u0442\u0432\u0435\u0442 404 \u0438\u043b\u0438 422 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0434 \u043e\u0442\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u0441\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 response.ok<\/code>.<\/p>\n
    \/\/ fetch-demo.mjs - \u0442\u0435 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 fetch (Node 18+ \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440)<\/span>\nconst<\/span> <\/span>base<\/span> <\/span>=<\/span> <\/span>\"http:\/\/localhost:3000\"<\/span>; <\/span>\/\/ \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 - \u043f\u0440\u043e\u0441\u0442\u043e \"\"<\/span>\n\nasync<\/span> <\/span>function<\/span> <\/span>getJson<\/span>(<\/span>url<\/span>, <\/span>options<\/span> <\/span>=<\/span> {}) {<\/span>\n  <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>base<\/span> <\/span>+<\/span> <\/span>url<\/span>, {<\/span>\n    <\/span>signal<\/span>:<\/span> <\/span>AbortSignal<\/span>.<\/span>timeout<\/span>(<\/span>2000<\/span>), <\/span>\/\/ \u0430\u043d\u0430\u043b\u043e\u0433 timeout: 2000 \u0432 $.ajax<\/span>\n    ...<\/span>options<\/span>,<\/span>\n  });<\/span>\n  <\/span>const<\/span> <\/span>data<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>().<\/span>catch<\/span>(() => <\/span>null<\/span>);<\/span>\n  <\/span>if<\/span> (<\/span>!<\/span>response<\/span>.<\/span>ok<\/span>) { <\/span>\/\/ fetch \u041d\u0415 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441 \u043d\u0430 4xx\/5xx<\/span>\n    <\/span>throw<\/span> <\/span>new<\/span> <\/span>Error<\/span>(<\/span>`${<\/span>response<\/span>.<\/span>status<\/span>}: ${<\/span>data<\/span>?<\/span>.<\/span>error<\/span> <\/span>??<\/span> <\/span>response<\/span>.<\/span>statusText<\/span>}`<\/span>);<\/span>\n  }<\/span>\n  <\/span>return<\/span> <\/span>data<\/span>;<\/span>\n}<\/span>\n\nconst<\/span> <\/span>courses<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>getJson<\/span>(<\/span>\"\/api\/courses\"<\/span>);<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>\"GET:\"<\/span>, <\/span>courses<\/span>.<\/span>map<\/span>((<\/span>c<\/span>) => <\/span>c<\/span>.<\/span>title<\/span>));<\/span>\n\nconst<\/span> <\/span>created<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>getJson<\/span>(<\/span>\"\/api\/signup\"<\/span>, {<\/span>\n  <\/span>method<\/span>:<\/span> <\/span>\"POST\"<\/span>,<\/span>\n  <\/span>headers<\/span>:<\/span> { <\/span>\"Content-Type\"<\/span>:<\/span> <\/span>\"application\/json\"<\/span> },<\/span>\n  <\/span>body<\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>({ <\/span>email<\/span>:<\/span> <\/span>\"student@example.com\"<\/span> }),<\/span>\n});<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>\"POST:\"<\/span>, <\/span>created<\/span>);<\/span>\n\nfor<\/span> (<\/span>const<\/span> [<\/span>url<\/span>, <\/span>options<\/span>] <\/span>of<\/span> [<\/span>\n  [<\/span>\"\/api\/signup\"<\/span>, { <\/span>method<\/span>:<\/span> <\/span>\"POST\"<\/span>, <\/span>headers<\/span>:<\/span> { <\/span>\"Content-Type\"<\/span>:<\/span> <\/span>\"application\/json\"<\/span> }, <\/span>body<\/span>:<\/span> <\/span>\"{}\"<\/span> }],<\/span>\n  [<\/span>\"\/api\/slow\"<\/span>, {}],<\/span>\n]) {<\/span>\n  <\/span>try<\/span> {<\/span>\n    <\/span>await<\/span> <\/span>getJson<\/span>(<\/span>url<\/span>, <\/span>options<\/span>);<\/span>\n  } <\/span>catch<\/span> (<\/span>error<\/span>) {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u041e\u0448\u0438\u0431\u043a\u0430:\"<\/span>, <\/span>error<\/span>.<\/span>name<\/span>, <\/span>error<\/span>.<\/span>message<\/span>);<\/span>\n  }<\/span>\n}<\/span><\/code><\/pre>\n
    \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 node fetch-demo.mjs<\/code> \u0432\u044b\u0432\u043e\u0434\u0438\u0442:<\/p>\n
    GET: [ 'JavaScript Developer. Basic' ]\nPOST: { ok: true, email: 'student@example.com' }\n\u041e\u0448\u0438\u0431\u043a\u0430: Error 422: \u043d\u0435\u0442 email\n\u041e\u0448\u0438\u0431\u043a\u0430: TimeoutError The operation was aborted due to timeout\n<\/code><\/pre>\n
    \u0411\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 response.ok<\/code> \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 422 \u043f\u0440\u043e\u0448\u0435\u043b \u0431\u044b \u043a\u0430\u043a \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439: fetch<\/code> \u0432\u0435\u0440\u043d\u0443\u043b \u0431\u044b ok: false, status: 422<\/code> \u0431\u0435\u0437 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n\n\n\n\n\n\n\n
    \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/th>\njQuery $.ajax<\/code><\/th>\nfetch<\/code><\/th>\n<\/tr>\n<\/thead>\n
    \u041e\u0442\u0432\u0435\u0442 4xx\/5xx<\/td>\n\u0423\u0445\u043e\u0434\u0438\u0442 \u0432 .fail<\/code><\/td>\n\u041f\u0440\u043e\u043c\u0438\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c response.ok<\/code><\/td>\n<\/tr>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 JSON<\/td>\n\u041f\u043e dataType<\/code> \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u043e\u0442\u0432\u0435\u0442\u0430<\/td>\n\u042f\u0432\u043d\u043e: await response.json()<\/code><\/td>\n<\/tr>\n
    \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 JSON<\/td>\ncontentType<\/code> + JSON.stringify<\/code><\/td>\n\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a + JSON.stringify<\/code><\/td>\n<\/tr>\n
    \u0422\u0430\u0439\u043c\u0430\u0443\u0442<\/td>\n\u041e\u043f\u0446\u0438\u044f timeout<\/code>, \u0441\u0442\u0430\u0442\u0443\u0441 timeout<\/code><\/td>\nAbortSignal.timeout(ms)<\/code>, \u043e\u0448\u0438\u0431\u043a\u0430 TimeoutError<\/code><\/td>\n<\/tr>\n
    \u041e\u0442\u043c\u0435\u043d\u0430<\/td>\njqXHR.abort()<\/code><\/td>\nAbortController<\/code><\/td>\n<\/tr>\n
    \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c<\/td>\n\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435<\/td>\n\u0412\u0441\u0442\u0440\u043e\u0435\u043d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n