{"id":230404,"date":"2022-11-24T09:55:00","date_gmt":"2022-11-24T06:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230404"},"modified":"2022-11-09T22:14:24","modified_gmt":"2022-11-09T19:14:24","slug":"asianmukainen-tyoeskentely-ajax-pyyntoejen-kanssa-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/asianmukainen-tyoeskentely-ajax-pyyntoejen-kanssa-wordpressissae\/","title":{"rendered":"Asianmukainen ty\u00f6skentely Ajax-pyynt\u00f6jen kanssa WordPressiss\u00e4"},"content":{"rendered":"\n<p>Aina kun ty\u00f6skentelet kolmannen osapuolen sovellusliittymien kanssa ja teet sen asynkronisesti, on aina mahdollisuus, ett\u00e4 mit\u00e4 tahansa pyyd\u00e4tkin, se palauttaa ei-toivotun tuloksen.<\/p>\n<p>Ehk\u00e4 se on virhekoodi, ehk\u00e4 se on varoitus tai ehk\u00e4 se on yksinkertainen viesti, jossa lukee jotain &quot;K\u00e4sittelemme edelleen pyynt\u00f6\u00e4si&quot;.<\/p>\n<p>Kussakin tapauksessa voit yleens\u00e4 k\u00e4sitell\u00e4 niit\u00e4 palvelinpuolella hienosti ja antaa asiakaspuolelle tiet\u00e4\u00e4, kuinka k\u00e4sitell\u00e4 sit\u00e4. Mutta jos k\u00e4sittelet j\u00e4lkimm\u00e4ist\u00e4 tapausta, kolmannen osapuolen k\u00e4sittely est\u00e4\u00e4 sinua. voit tehd\u00e4 muita asioita k\u00e4sitell\u00e4ksesi t\u00e4m\u00e4n tilanteen paremmin.<\/p>\n<p>Esimerkiksi j\u00e4lkimm\u00e4isess\u00e4 tapauksessa on parempi odottaa hetki ja tehd\u00e4 sitten pyynt\u00f6 uudelleen n\u00e4hd\u00e4ksesi, onko API:lla erilainen vastaus sinulle.<\/p>\n<p>Mutta kun teet t\u00e4m\u00e4n, se vaatii Ajaxia, joka tietysti vaatii JavaScriptin. Yksi ilmeisist\u00e4, mutta vanhentuneemmista tavoista tehd\u00e4 t\u00e4m\u00e4 on k\u00e4ytt\u00e4\u00e4 setIntervalia.<\/p>\n<p>Ongelma t\u00e4ss\u00e4 kuitenkin on, ett\u00e4 se luo pinon pyynt\u00f6j\u00e4 ja sitten kun vastaus on valmis, jokainen pinon kohde saa saman vastauksen.<\/p>\n<p>T\u00e4m\u00e4 voi vaikuttaa voimakkaasti mihin tahansa palvelimeen. Ja on olemassa parempia tapoja tehd\u00e4 t\u00e4m\u00e4.<\/p>\n<h2>Asianmukainen ty\u00f6skentely Ajax-pyynt\u00f6jen kanssa<\/h2>\n<p>Kuten tavallista, koska WordPress toimitetaan jQueryn kanssa, k\u00e4yt\u00e4n sit\u00e4; Kehotan kuitenkin sinua my\u00f6s \u2013 jos et ole viel\u00e4 tehnyt \u2013 katsomaan <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/AJAX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ajaxia ES6<\/a><\/strong> :ssa saadaksesi k\u00e4sityksen siit\u00e4, miten t\u00e4m\u00e4 tehd\u00e4\u00e4n alkuper\u00e4isesti.<\/p>\n<p>Joka tapauksessa idea on seuraava: Sen sijaan, ett\u00e4 m\u00e4\u00e4rit\u00e4t jonkin intervallin, k\u00e4yt\u00e4 sitten sis\u00e4\u00e4nrakennettuja Ajax-toimintoja arvioidaksesi vaste oikein. Ja vain tietyiss\u00e4 olosuhteissa, k\u00e4ynnist\u00e4 toiminto uudelleen.<\/p>\n<p>Esimerkki: jQueryn <a href=\"https:\/\/api.jquery.com\/jquery.post\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">$.post<\/a> &#8211; menetelm\u00e4 tarjoaa joitain toimintoja, joita voidaan k\u00e4ytt\u00e4\u00e4 juuri t\u00e4h\u00e4n. Se tarjoaa esimerkiksi menetelmi\u00e4, kuten:<\/p>\n<ul>\n<li>tehty()<\/li>\n<li>ep\u00e4onnistua()<\/li>\n<li>aina()<\/li>\n<\/ul>\n<p>Ja jokainen n\u00e4ist\u00e4 on tarkoitettu k\u00e4ytett\u00e4v\u00e4ksi tietyiss\u00e4 olosuhteissa, joista n\u00e4yt\u00e4n hetkellisesti joissakin koodin\u00e4ytteiss\u00e4.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164533-61e766ff924f1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164533-61e766ff924f1.png\" alt=\"Asianmukainen ty\u00f6skentely Ajax-pyynt\u00f6jen kanssa WordPressiss\u00e4\" ><\/a><\/p>\n<p>Ennen kuin teet sen, on kuitenkin t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4, ett\u00e4 l\u00e4het\u00e4n useita parametreja, jotka oletan sinun tuntevan:<\/p>\n<ul>\n<li>WordPress Ajax -URL-osoite (jonka m\u00e4\u00e4rit\u00e4n nimell\u00e4 acme.ajax_url),<\/li>\n<li>URL-osoite katselemaan viestiin (joka tallennetaan sUrl-muuttujaan),<\/li>\n<li>ja tietoturvan, jota kutsun acme.securityksi<\/li>\n<\/ul>\n<p>Jos jokin yll\u00e4 olevista ei ole selv\u00e4, lue linkitetyt sivut n\u00e4hd\u00e4ksesi, kuinka t\u00e4m\u00e4 saavutetaan.<\/p>\n<p>Mutta t\u00e4ss\u00e4 on idea siit\u00e4, kuinka voit hallita toistuvia Ajax-vastauksia ilman setIntervalia.<\/p>\n<h3>1 Ty\u00f6n toiminto<\/h3>\n<p>Ensimm\u00e4inen asia, joka sinun on teht\u00e4v\u00e4, on k\u00e4\u00e4ri\u00e4 ty\u00f6, jonka aiot tehd\u00e4, omaan teht\u00e4v\u00e4\u00e4ns\u00e4. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voit soittaa sille mist\u00e4 tahansa muualta asiakaspuolen sovelluksessa tai jopa ajastimen yhteydess\u00e4 (jos se on ehdottoman tarpeen).<\/p>\n<p><strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-00-initial-function-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Esimerkiksi<\/a><\/strong> :<\/p>\n<pre><code>var _processArticle = function() {\n\n  var request =\n    $.post(acme.ajax_url, {\n      action:  'acme_get_data',\n      url:      sUrl\n      security: acme.security\n    }, function(response) {\n      \/\/ ...\n    })\n    .done(function(response) {\n      \/\/ ...\n    })\n    .fail(function(xhr, status, error) {\n      \/\/ ...\n    })\n    .always(function() {\n      \/\/ ..\n    });\n}\n<\/code><\/pre>\n<p>Ja kuten n\u00e4et, olen mennyt eteenp\u00e4in ja poistanut joitain yll\u00e4 mainitsemistani toiminnoista.<\/p>\n<h3>2 K\u00e4sittele menestyst\u00e4<\/h3>\n<p>Jos onnistut, voit k\u00e4ytt\u00e4\u00e4 <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-01-handle-success-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anonyymi\u00e4 funktiota<\/a><\/strong> <strong>$.post-<\/strong> funktion takaisinkutsuna. Ensisijainen argumentti, josta sinun pit\u00e4isi olla huolissaan, on <strong>vastausargumentti<\/strong>.<\/p>\n<p>Tyypillisesti pid\u00e4n siit\u00e4, ett\u00e4 vastauksessani on <strong>menestys-<\/strong> ja <strong>ep\u00e4onnistumisattribuutti<\/strong>. T\u00e4m\u00e4 helpottaa tapauksen k\u00e4sittely\u00e4 aina, kun vastaus on t\u00e4ysin onnistunut, mutta palvelimelta palannut data ei ollut sit\u00e4 mit\u00e4 odotin.<\/p>\n<pre><code>var _processArticle = function() {\n\n  var request =\n    $.post(acme.ajax_url, {\n      action:  'acme_get_data',\n      url:      sUrl\n      security: acme.security\n    }, function(response) {\n\n      \/\/ Abort all request operations.\n      if (false === response.success) {\n        request.abort();\n      }\n\n      \/\/ Handle the successful response by modifying the DOM.\n    })\n    .done(function(response) {\n      \/\/ ...\n    })\n    .fail(function(xhr, status, error) {\n      \/\/ ...\n    })\n    .always(function() {\n      \/\/ ...\n    });\n}\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 tarkoita ep\u00e4onnistumista. Se tarkoittaa vain sit\u00e4, ett\u00e4 mit\u00e4 etsin hakemaan, ei l\u00f6ytynyt.<\/p>\n<h3>3 K\u00e4sittele vika<\/h3>\n<p>K\u00e4\u00e4nt\u00f6puolella on aikoja, jolloin jokin voi <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-02-handle-failure-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ep\u00e4onnistua<\/a><\/strong>. Miksi n\u00e4in tapahtuu, voi johtua useista syist\u00e4, ja ymm\u00e4rt\u00e4\u00e4ksesi asian oikein, kannattaa tarkistaa takaisinsoiton argumentit, nimitt\u00e4in <strong>tila<\/strong> ja <strong>virhe<\/strong>.<\/p>\n<pre><code>var _processArticle = function() {\n\n  var request =\n    $.post(acme.ajax_url, {\n      action:  'acme_get_data',\n      url:      sUrl\n      security: acme.security\n    }, function(response) {\n\n      \/\/ Abort all request operations.\n      if (false === response.success) {\n        request.abort();\n      }\n\n      \/\/ Handle the successful response by modifying the DOM like flashing the first image.\n      $('img:first').fadeTo('fast', 0.5, function() {\n        $(this).fadeTo('fast', 1);\n      });\n    })\n    .done(function(response) {\n      \/\/ ...\n    })\n    .fail(function(xhr, status, error) {\n\n      console.log('There was a problem with contacting the API.');\n\n      console.log('The status was:');\n      console.log(status);\n\n      console.log('The error was:')\n      cosole.log(error);\n    })\n    .always(function() {\n      \/\/ ...\n    });\n}\n<\/code><\/pre>\n<p>En voi antaa t\u00e4ss\u00e4 konkreettisia esimerkkej\u00e4, koska jokainen API on erilainen; Suosittelen kuitenkin ainakin tietojen kirjoittamista konsoliin, jotta ymm\u00e4rr\u00e4t mit\u00e4 tapahtuu ja kuinka voit k\u00e4sitell\u00e4 sit\u00e4 sulavasti kooditasolla.<\/p>\n<h3>4 K\u00e4sittele ehdotonta tapausta<\/h3>\n<p>T\u00e4ss\u00e4 nimenomaisessa tapauksessa t\u00e4m\u00e4 toiminto k\u00e4ynnistyy <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-03-handle-always-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">riippumatta siit\u00e4<\/a><\/strong>, onnistuiko jokin vai ei.<\/p>\n<pre><code>var _processArticle = function() {\n\n  var request =\n    $.post(acme.ajax_url, {\n      action:  'acme_get_data',\n      url:      sUrl\n      security: acme.security\n    }, function(response) {\n\n      \/\/ Abort all request operations.\n      if (false === response.success) {\n        request.abort();\n      }\n\n      \/\/ Handle the successful response by modifying the DOM like flashing the first image.\n      $('img:first').fadeTo('fast', 0.5, function() {\n        $(this).fadeTo('fast', 1);\n      });\n    })\n    .done(function(response) {\n      \/\/ ...\n    })\n    .fail(function(xhr, status, error) {\n\n      console.log('There was a problem with contacting the API.');\n\n      console.log('The status was:');\n      console.log(status);\n\n      console.log('The error was:')\n      console.log(error);\n    })\n    .always(function() {\n      \/\/ Regardless of what happens, this is where you can provide the user feedback.\n    });\n}\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 toiminto ei ole jotain, jota saatat aina tarvita (ei sanamuotoilua), mutta se on hyv\u00e4 vaihtoehto esimerkiksi edistymispalkin piilottamiseen tai k\u00e4ytt\u00f6liittym\u00e4n n\u00e4ytt\u00e4miseen. T\u00e4m\u00e4 voi antaa k\u00e4ytt\u00e4j\u00e4lle hieman palautetta siit\u00e4, ett\u00e4 pyynt\u00f6 on suorittanut ty\u00f6ns\u00e4 (j\u00e4lleen huolimatta ep\u00e4onnistumisesta tai onnistumisesta).<\/p>\n<h3>5 K\u00e4sittele menestyst\u00e4 j\u00e4lleen<\/h3>\n<p>Lopuksi totean, ett\u00e4 <strong>tehty<\/strong> menetelm\u00e4 on paljolti menestysmenetelm\u00e4n kaltainen, mutta ajattele, ett\u00e4 sit\u00e4 on tarkoitus kutsua toisen kerran.<\/p>\n<p>T\u00e4m\u00e4 tarkoittaa, ett\u00e4 kun vastaus on palannut palvelimelta <strong>vastausargumentilla<\/strong>, sama asia k\u00e4ynnistyy uudelleen, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-04-handle-success-again-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kun kaikki muu on suoritettu<\/a>.<\/p>\n<pre><code>var _processArticle = function() {\n\n  var request =\n    $.post(acme.ajax_url, {\n      action:  'acme_get_data',\n      url:      sUrl\n      security: acme.security\n    }, function(response) {\n\n      \/\/ Abort all request operations.\n      if (false === response.success) {\n        request.abort();\n      }\n\n      \/\/ Handle the successful response by modifying the DOM.\n    })\n    .done(function(response) {\n      \/\/ Display any additional changes you may want to make based on the respnse.\n    })\n    .fail(function(xhr, status, error) {\n\n      console.log('There was a problem with contacting the API.');\n\n      console.log('The status was:');\n      console.log(status);\n\n      console.log('The error was:')\n      console.log(error);\n    })\n    .always(function() {\n      \/\/ Regardless of what happens, this is where you can provide the user feedback.\n    });\n}\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 antaa sinulle toisen mahdollisuuden tehd\u00e4 mit\u00e4 tahansa haluat tehd\u00e4 vastausargumentilla viel\u00e4 kerran ennen kuin kaikki on valmis.<\/p>\n<p>K\u00e4yt\u00e4n t\u00e4t\u00e4 harvoin, mutta joskus olen halunnut poistaa elementin vasta sen j\u00e4lkeen, kun jotain on tehty, kaikki muu k\u00e4sittely tehty ja vastaus on onnistunut.<\/p>\n<h2>Ehk\u00e4 et tarvitse kaikkea<\/h2>\n<p>Ilmeisesti suuri osa yll\u00e4 olevasta koodista on vain esittely\u00e4 pyynt\u00f6jen k\u00e4sittelyst\u00e4. Mutta tarkoituksena on n\u00e4ytt\u00e4\u00e4, kuinka kyseinen pyynt\u00f6 k\u00e4sitell\u00e4\u00e4n ilman, ett\u00e4 pyynt\u00f6jen pinoamiseen tarvitsee asettaa aikav\u00e4lej\u00e4. Sen sijaan voit hy\u00f6dynt\u00e4\u00e4 olemassa olevia toimintoja esimerkiksi kutsuaksesi funktiota uudelleen, jos tapahtuu virhe.<\/p>\n<p>Joillekin t\u00e4m\u00e4 saattaa olla liioittelua, mutta toisille, jotka ovat tottuneet k\u00e4ytt\u00e4m\u00e4\u00e4n <strong>setInterval<\/strong> -ohjelmaa, se voi olla paljon parempi tapa hallita Ajax-pyynt\u00f6j\u00e4, jotka eiv\u00e4t pinoudu ja k\u00e4ynnist\u00e4v\u00e4t saman pyynn\u00f6n palvelimelle, kun vastaus on jo saatu. onnistui.<\/p>\n<p>Ja loppujen lopuksi se on tavoite: Tehokas koodi, joka hakee tarvitsemamme tiedot ilman, ett\u00e4 kolmannen osapuolen API tai oma k\u00e4ytt\u00e4j\u00e4mme selain jumittuu.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kuinka voimme ty\u00f6skennell\u00e4 oikein Ajax-pyynt\u00f6jen kanssa, jotta emme kasaisi palvelinresursseja.<\/p>\n","protected":false},"author":1,"featured_media":164534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[730,719,917,843,864],"tags":[1166],"class_list":["post-230404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-kehittaejae","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230404"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/164534"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}