{"id":697,"date":"2025-09-11T09:18:27","date_gmt":"2025-09-11T09:18:27","guid":{"rendered":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/?page_id=697"},"modified":"2025-09-18T08:45:56","modified_gmt":"2025-09-18T08:45:56","slug":"harjutus-6-asunkroonne-voi-sunkroone","status":"publish","type":"page","link":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/","title":{"rendered":"Harjutus 6: API p\u00e4ring"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">AJAX-i t\u00f6\u00f6p\u00f5him\u00f5te detailselt:<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>S\u00fcndmus (Event)<\/strong>: Kasutaja teeb midagi lehel (kl\u00f5psab nuppu, sisestab teksti jne), mis k\u00e4ivitab JavaScripti funktsiooni.<\/li>\n\n\n\n<li><strong>XMLHttpRequest objekt (XHR)<\/strong>: See JavaScripti funktsioon loob <code>XMLHttpRequest<\/code> objekti ja saadab selle kaudu p\u00e4ringu serverile. Kuigi nimes on &#8220;XML&#8221;, v\u00f5ib see t\u00f6\u00f6delda igat t\u00fc\u00fcpi andmeid (t\u00e4nap\u00e4eval eelk\u00f5ige JSON-it).<\/li>\n\n\n\n<li><strong>Serveri t\u00f6\u00f6tlus<\/strong>: Server saab p\u00e4ringu, t\u00f6\u00f6tleb seda (nt. loeb andmebaasist andmeid) ja saadab vastuse tagasi brauserile.<\/li>\n\n\n\n<li><strong>Vastuse t\u00f6\u00f6tlus<\/strong>: Brauser (JavaScript) tuvastab, et serverilt on vastus saabunud. Seej\u00e4rel parsib vastuse (nt. JSONi JavaScripti objektiks) ja uuendab <strong>DOM-i<\/strong> (Document Object Model), st. muudab lehe olemasolevat HTML-i, ilma seda uuesti laadimata.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">H.6: API p\u00e4ring<\/h2>\n\n\n\n<p>Bacon API on naljakas ja kergekasutusega API, mis pakub erinevaid \u201cbacon\u201d-teemalisi andmeid ja pilte.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Avage CodeSandbox \u2192 valige mall Static (et lihtsalt hostida index.html).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"595\" src=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png\" alt=\"\" class=\"wp-image-755\" srcset=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png 936w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA-300x191.png 300w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA-768x488.png 768w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA-150x95.png 150w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA-600x381.png 600w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/figure>\n\n\n\n<ol id=\"yui_3_17_2_1_1730274367658_32\" class=\"wp-block-list\">\n<li>Vali Official Templates alt static<\/li>\n\n\n\n<li>Kirjuta pildil olev kood index.html faili. Alustuseks kasuta HTML trafaretti (h\u00fc\u00fcum\u00e4rk ja tab klahv).<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\" \/>\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    &lt;title>Static Template&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"styles.css\" \/>\n  &lt;\/head>\n  &lt;body>\n    &lt;button type=\"button\" onclick=\"loadDoc()\">Request bacon&lt;\/button>\n    &lt;p id=\"demo\">&lt;\/p>\n\n    &lt;script>\n      function loadDoc() {\n        const xhttp = new XMLHttpRequest();\n        xhttp.onload = function () {\n          document.getElementById(\"demo\").innerHTML = this.responseText;\n        };\n        xhttp.open(\"GET\", \"https:\/\/baconipsum.com\/api\/?type=all-meat\");\n        xhttp.send();\n      }\n    &lt;\/script>\n  &lt;\/body>\n&lt;\/html>\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">en<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">http-equiv<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">X-UA-Compatible<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">ie=edge<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Static Template<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">styles.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">button<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onclick<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">loadDoc()<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Request bacon<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;p<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">demo<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      function loadDoc() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">xhttp<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">XMLHttpRequest<\/span><span style=\"color: #D8DEE9FF\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">xhttp<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">onload<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">demo<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">responseText<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">xhttp<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">open<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">GET<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/baconipsum.com\/api\/?type=all-meat<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">xhttp<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">send<\/span><span style=\"color: #D8DEE9FF\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"822\" src=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727.png\" alt=\"\" class=\"wp-image-703\" srcset=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727.png 833w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727-300x296.png 300w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727-768x758.png 768w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727-150x148.png 150w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727-600x592.png 600w, https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/9CB4DA35-5A3D-4478-A807-05D2F0B9C727-100x100.png 100w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n\n\n\n<p>4. Salvesta (Ctrl+S) \u2014 CodeSandboxis salvestatakse tavaliselt automaatselt, kuid seda saab teha ka k\u00e4sitsi.<\/p>\n\n\n\n<p>5. Vajuta lehel nuppu \u2014 n\u00e4ed API vastust (tekst\/JSON \u201ebacon\u201d kohta).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kokkuv\u00f5te: <\/h2>\n\n\n\n<p>xhttp.open(\u201cGET\u201d, \u201curl\u201d) \u2013 avab uus HTTP p\u00e4ring<\/p>\n\n\n\n<p>xhhtp.send() \u2013 saadab p\u00e4ringu serverisse<\/p>\n\n\n\n<p>XMLHTTPrequest \u2013 AJAX p\u00e4ring mis saadab API aadressile p\u00e4ringu<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AJAX-i t\u00f6\u00f6p\u00f5him\u00f5te detailselt: H.6: API p\u00e4ring Bacon API on naljakas ja kergekasutusega API, mis pakub erinevaid \u201cbacon\u201d-teemalisi andmeid ja pilte. 4. Salvesta (Ctrl+S) \u2014 CodeSandboxis salvestatakse tavaliselt automaatselt, kuid seda saab teha ka k\u00e4sitsi. 5. Vajuta lehel nuppu \u2014 n\u00e4ed API vastust (tekst\/JSON \u201ebacon\u201d kohta). Kokkuv\u00f5te: xhttp.open(\u201cGET\u201d, \u201curl\u201d) \u2013 avab uus HTTP p\u00e4ring xhhtp.send() \u2013 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"plugin_block_meta":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-697","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio\" \/>\n<meta property=\"og:description\" content=\"AJAX-i t\u00f6\u00f6p\u00f5him\u00f5te detailselt: H.6: API p\u00e4ring Bacon API on naljakas ja kergekasutusega API, mis pakub erinevaid \u201cbacon\u201d-teemalisi andmeid ja pilte. 4. Salvesta (Ctrl+S) \u2014 CodeSandboxis salvestatakse tavaliselt automaatselt, kuid seda saab teha ka k\u00e4sitsi. 5. Vajuta lehel nuppu \u2014 n\u00e4ed API vastust (tekst\/JSON \u201ebacon\u201d kohta). Kokkuv\u00f5te: xhttp.open(\u201cGET\u201d, \u201curl\u201d) \u2013 avab uus HTTP p\u00e4ring xhhtp.send() \u2013 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/\" \/>\n<meta property=\"og:site_name\" content=\"Aleksandra Semjonova &otilde;pimapp | portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-18T08:45:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png\" \/>\n\t<meta property=\"og:image:width\" content=\"936\" \/>\n\t<meta property=\"og:image:height\" content=\"595\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/\",\"url\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/\",\"name\":\"Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png\",\"datePublished\":\"2025-09-11T09:18:27+00:00\",\"dateModified\":\"2025-09-18T08:45:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png\",\"contentUrl\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png\",\"width\":936,\"height\":595},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/harjutus-6-asunkroonne-voi-sunkroone\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Harjutus 6: API p\u00e4ring\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/#website\",\"url\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/\",\"name\":\"Aleksandra Semjonova &otilde;pimapp | portfoolio\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aleksandrasemjonova23.thkit.ee\\\/WP\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/","og_locale":"en_US","og_type":"article","og_title":"Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio","og_description":"AJAX-i t\u00f6\u00f6p\u00f5him\u00f5te detailselt: H.6: API p\u00e4ring Bacon API on naljakas ja kergekasutusega API, mis pakub erinevaid \u201cbacon\u201d-teemalisi andmeid ja pilte. 4. Salvesta (Ctrl+S) \u2014 CodeSandboxis salvestatakse tavaliselt automaatselt, kuid seda saab teha ka k\u00e4sitsi. 5. Vajuta lehel nuppu \u2014 n\u00e4ed API vastust (tekst\/JSON \u201ebacon\u201d kohta). Kokkuv\u00f5te: xhttp.open(\u201cGET\u201d, \u201curl\u201d) \u2013 avab uus HTTP p\u00e4ring xhhtp.send() \u2013 [&hellip;]","og_url":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/","og_site_name":"Aleksandra Semjonova &otilde;pimapp | portfoolio","article_modified_time":"2025-09-18T08:45:56+00:00","og_image":[{"width":936,"height":595,"url":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/","url":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/","name":"Harjutus 6: API p\u00e4ring - Aleksandra Semjonova &otilde;pimapp | portfoolio","isPartOf":{"@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/#primaryimage"},"image":{"@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/#primaryimage"},"thumbnailUrl":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png","datePublished":"2025-09-11T09:18:27+00:00","dateModified":"2025-09-18T08:45:56+00:00","breadcrumb":{"@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/#primaryimage","url":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png","contentUrl":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C2675997-DAD1-456D-B871-36FD2CBEE4AA.png","width":936,"height":595},{"@type":"BreadcrumbList","@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/harjutus-6-asunkroonne-voi-sunkroone\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/"},{"@type":"ListItem","position":2,"name":"Harjutus 6: API p\u00e4ring"}]},{"@type":"WebSite","@id":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/#website","url":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/","name":"Aleksandra Semjonova &otilde;pimapp | portfoolio","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"}]}},"_links":{"self":[{"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/comments?post=697"}],"version-history":[{"count":17,"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/697\/revisions"}],"predecessor-version":[{"id":778,"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/697\/revisions\/778"}],"wp:attachment":[{"href":"https:\/\/aleksandrasemjonova23.thkit.ee\/WP\/wp-json\/wp\/v2\/media?parent=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}