{"id":229809,"date":"2022-11-24T10:01:00","date_gmt":"2022-11-24T07:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229809"},"modified":"2022-11-09T16:28:15","modified_gmt":"2022-11-09T13:28:15","slug":"oige-toeoe-ajaxi-taotlustega-wordpressis","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/oige-toeoe-ajaxi-taotlustega-wordpressis\/","title":{"rendered":"\u00d5ige t\u00f6\u00f6 Ajaxi taotlustega WordPressis"},"content":{"rendered":"\n<p>Kui t\u00f6\u00f6tate kolmanda osapoole API-dega ja teete seda as\u00fcnkroonselt, on alati v\u00f5imalus, et k\u00f5ik, mida te taotlete, annab soovimatu tulemuse.<\/p>\n<p>V\u00f5ib-olla on see veakood, v\u00f5ib-olla on see hoiatus v\u00f5i v\u00f5ib-olla lihtne s\u00f5num, mis \u00fctleb midagi sellist nagu &quot;Me t\u00f6\u00f6tleme endiselt teie taotlust.&quot;<\/p>\n<p>Igal juhul saate nendega serveri poolel tavaliselt h\u00e4sti hakkama ja andke kliendile teada, kuidas seda k\u00e4sitleda. Kui aga tegelete viimase juhtumiga, blokeerib teid kolmanda osapoole t\u00f6\u00f6tlemine; on ka muid asju, mida saate selle olukorra paremaks lahendamiseks teha.<\/p>\n<p>N\u00e4iteks viimasel juhul on parem veidi oodata ja seej\u00e4rel uuesti p\u00e4ring teha, et n\u00e4ha, kas API-l on teie jaoks erinev vastus.<\/p>\n<p>Kuid seda tehes on vaja Ajaxit, mis ilmselt n\u00f5uab JavaScripti. \u00dcks ilmsemaid, kuid aegunud meetodeid selleks on setIntervali kasutamine.<\/p>\n<p>Selle probleemiks on aga see, et see loob taotluste virna ja siis, kui vastus on valmis, saavad k\u00f5ik virnas olevad \u00fcksused sama vastuse.<\/p>\n<p>See v\u00f5ib iga serverit drastiliselt m\u00f5jutada. Ja selleks on paremaid viise.<\/p>\n<h2>\u00d5ige t\u00f6\u00f6 Ajaxi taotlustega<\/h2>\n<p>Nagu tavaliselt, kuna WordPress tarnitakse koos jQueryga, kasutan seda; Siiski soovitan teil tungivalt \u2013 kui te seda juba teinud pole \u2013 vaadata <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/AJAX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ES6-s olevat Ajaxit,<\/a><\/strong> et saada aimu, kuidas seda natiivselt teha.<\/p>\n<p>Igatahes on idee j\u00e4rgmine: intervalli seadistamise asemel kasutage vastuse \u00f5igeks hindamiseks sisseehitatud Ajaxi funktsioone. Ja ainult teatud tingimustel k\u00e4ivitage funktsioon uuesti.<\/p>\n<p>N\u00e4ide: jQuery <a href=\"https:\/\/api.jquery.com\/jquery.post\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">$.post<\/a> meetod pakub m\u00f5ningaid funktsioone, mida saab t\u00e4pselt selleks kasutada. N\u00e4iteks pakub see selliseid meetodeid nagu:<\/p>\n<ul>\n<li>tehtud()<\/li>\n<li>eba\u00f5nnestub ()<\/li>\n<li>alati()<\/li>\n<\/ul>\n<p>Ja iga\u00fcks neist on ette n\u00e4htud k\u00e4itamiseks teatud tingimustel, mida ma n\u00e4itan hetkeks m\u00f5nes koodin\u00e4idises.<\/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=\"\u00d5ige t\u00f6\u00f6 Ajaxi taotlustega WordPressis\" ><\/a><\/p>\n<p>Enne selle tegemist on siiski oluline m\u00f5ista, et on mitmeid saadavaid parameetreid, millega ma eeldan, et olete tuttav.<\/p>\n<ul>\n<li>WordPress Ajaxi URL (mida ma m\u00e4\u00e4ratlen kui acme.ajax_url),<\/li>\n<li>meie vaadatava postituse URL (mis salvestatakse muutujasse sUrl),<\/li>\n<li>ja turvalisus, mida ma kutsun acme.securityks<\/li>\n<\/ul>\n<p>Kui m\u00f5ni \u00fclaltoodust pole selge, lugege lingitud lehti, et n\u00e4ha, kuidas see saavutatakse.<\/p>\n<p>Kuid siin on idee, kuidas saate hallata korduvaid Ajaxi vastuseid ilma setIntervalita.<\/p>\n<h3>1 Funktsioon t\u00f6\u00f6 jaoks<\/h3>\n<p>Esimene asi, mida peate tegema, on koondada t\u00f6\u00f6, mida kavatsete teha, oma funktsiooni. See t\u00e4hendab, et saate sellele helistada k\u00f5ikjalt mujalt kliendipoolses rakenduses v\u00f5i isegi taimeri kontekstis (kui see on h\u00e4davajalik).<\/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\">N\u00e4iteks<\/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 nagu n\u00e4ete, olen j\u00e4tkanud ja eemaldanud m\u00f5ned \u00fclalmainitud funktsioonid.<\/p>\n<h3>2 Saate hakkama eduga<\/h3>\n<p>Edu korral saate funktsiooni <strong>$.post<\/strong> tagasihelistamiseks kasutada <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-01-handle-success-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anon\u00fc\u00fcmset<\/a><\/strong> funktsiooni. Peamine argument, mille p\u00e4rast peaksite muretsema, on <strong>vastuse<\/strong> argument.<\/p>\n<p>Tavaliselt meeldib mulle, kui mu vastusel on <strong>edu<\/strong> ja <strong>eba\u00f5nnestumise<\/strong> atribuut. See muudab juhtumi k\u00e4sitlemise lihtsamaks, kui vastus on t\u00e4iesti edukas, kuid serverist tagasi tulnud andmed ei vastanud ootustele.<\/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>See ei t\u00e4henda tingimata eba\u00f5nnestumist. See t\u00e4hendab lihtsalt, et seda, mida ma otsisin, ei leitud.<\/p>\n<h3>3 K\u00e4sitlege eba\u00f5nnestumist<\/h3>\n<p>Teisest k\u00fcljest v\u00f5ib juhtuda, et miski v\u00f5ib <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-02-handle-failure-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">eba\u00f5nnestuda<\/a><\/strong>. Miks see juhtub, v\u00f5ib olla mitmel p\u00f5hjusel ja selle \u00f5igeks m\u00f5istmiseks tasub uurida tagasihelistamise argumente, nimelt <strong>olekut<\/strong> ja <strong>viga<\/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>Ma ei saa siin konkreetseid n\u00e4iteid tuua, sest iga API on erinev; aga soovitan v\u00e4hemalt andmed konsooli v\u00e4lja kirjutada, et saaksid aru, mis toimub ja kuidas sellega kooditasemel graatsiliselt hakkama saada.<\/p>\n<h3>4 K\u00e4sitlege tingimusteta juhtumit<\/h3>\n<p>Sel konkreetsel juhul k\u00e4ivitub see funktsioon <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-03-handle-always-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">olenemata sellest<\/a><\/strong>, kas miski \u00f5nnestus v\u00f5i mitte.<\/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>See funktsioon ei ole midagi, mida te alati vajate (pole m\u00f5eldud), kuid see on hea v\u00f5imalus n\u00e4iteks edenemisriba peitmiseks v\u00f5i kasutajaliideses millegi kuvamiseks. See v\u00f5ib anda kasutajale veidi tagasisidet, et p\u00e4ring on oma t\u00f6\u00f6 l\u00f5petanud (j\u00e4llegi, olenemata eba\u00f5nnestumisest v\u00f5i \u00f5nnestumisest).<\/p>\n<h3>5 J\u00e4llegi \u00f5nnestumine<\/h3>\n<p>L\u00f5puks sarnaneb <strong>tehtud<\/strong> meetod paljuski edumeetodile, kuid m\u00f5elge sellele, et seda kavatsetakse teist korda nimetada.<\/p>\n<p><strong>See t\u00e4hendab, et p\u00e4rast seda, kui vastus on serverist vastuse<\/strong> argumendiga tagasi tulnud, k\u00e4ivitub sama asi uuesti, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2dbe93fe47a96657e2ce7e4da0313bab#file-04-handle-success-again-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kui k\u00f5ik muu on l\u00f5pule viidud<\/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>See annab teile veel \u00fche v\u00f5imaluse teha vastuse argumendiga k\u00f5ike, mida soovite teha, enne kui k\u00f5ik on l\u00f5pule viidud.<\/p>\n<p>Kasutan seda harva, kuid on olnud aegu, kus olen soovinud elemendi eemaldada alles p\u00e4rast seda, kui midagi oli tehtud, kogu muu t\u00f6\u00f6tlus oli tehtud ja vastus oli edukas.<\/p>\n<h2>V\u00f5ib-olla pole teil seda k\u00f5ike vaja<\/h2>\n<p>Ilmselgelt on suur osa \u00fclaltoodud koodist vaid demo jaoks, kuidas taotlusi k\u00e4sitleda. Kuid eesm\u00e4rk on n\u00e4idata, kuidas nimetatud p\u00e4ringut k\u00e4sitleda, ilma et oleks vaja taotluste virnastamise intervalle m\u00e4\u00e4rata. Selle asemel kasutate \u00e4ra juba olemasolevaid funktsioone, et n\u00e4iteks t\u00f5rke korral funktsiooni uuesti v\u00e4lja kutsuda.<\/p>\n<p>Igatahes v\u00f5ib see m\u00f5ne jaoks olla liialdatud, kuid teiste jaoks, kes on harjunud kasutama <strong>setInterval<\/strong>, v\u00f5ib see olla palju parem viis Ajaxi taotluste haldamiseks, mis ei virna ja k\u00e4ivitavad sama p\u00e4ringu serverisse, kui vastus on juba saadud. juhitud.<\/p>\n<p>Ja l\u00f5puks on see eesm\u00e4rk: t\u00f5hus kood, mis hangib meile vajaliku teabe ilma kolmanda osapoole API-t v\u00f5i meie enda kasutaja brauserit segamata.<\/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>Kuidas saaksime Ajaxi p\u00e4ringutega korralikult t\u00f6\u00f6tada, et mitte serveriressursse kuhjata.<\/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":[718,729,916,842,863],"tags":[1165],"class_list":["post-229809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-javascript-4","category-muud","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229809"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229809\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/164534"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}