{"id":13566,"date":"2022-03-16T12:13:08","date_gmt":"2022-03-16T12:13:08","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=13566"},"modified":"2024-02-16T10:47:02","modified_gmt":"2024-02-16T10:47:02","slug":"ajax-xhr-vs-fetch","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=13566","title":{"rendered":"AJAX (XHR vs. Fetch API)"},"content":{"rendered":"

AJAX<\/strong>
\n– stands for “Asynchronous JavaScript and XML”
\n– allows asynchronous communications with the server
\n– is used to update web pages without reloading them<\/p>\n

(It’s normally also called AJAX if not used with XML.)<\/p>\n

\n

Example<\/strong> (with XHR and Fetch API)<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <script src='https:\/\/code.jquery.com\/jquery-latest.js' defer><\/script>\r\n        <script src='countries.js' defer><\/script>\r\n    <\/head>\r\n    <body>\r\n        <div>\r\n            <select id='variantSel'>\r\n                <option value='xhr1' label='via xhr (direct)'><\/option>\r\n                <option value='xhr2' label='via xhr (jQuery)'><\/option>\r\n                <option value='fetch1' label='via fetch (default)'><\/option>\r\n                <option value='fetch2' label='via fetch (async\/await)'><\/option>\r\n            <\/select>\r\n            <button id='requestBtn'>Load countries (EU)<\/button>\r\n        <\/div>\r\n        <div id='contentDiv'>\r\n        <\/div>\r\n    <body>\r\n<\/html>\r\n<\/pre>\n
\r\nconst requestBtn = document.getElementById('requestBtn');\r\nconst contentDiv = document.getElementById('contentDiv');\r\n\r\nrequestBtn.onclick = loadCountries;\r\n\r\nfunction loadCountries() {\r\n    contentDiv.innerHTML = '';\r\n\r\n    const requestURL = 'https:\/\/restcountries.com\/v3.1\/subregion\/europe';\r\n    const variantSel = document.getElementById('variantSel');\r\n    const currentVal = variantSel[variantSel.selectedIndex].value;\r\n\r\n    switch (currentVal) {\r\n        case 'xhr1':\r\n            getWithXhr1(requestURL, writeCountries);\r\n            break;\r\n        case 'xhr2':\r\n            getWithXhr2(requestURL, writeCountries);\r\n            break;\r\n        case 'fetch1':\r\n            getWithFetch1(requestURL, writeCountries);\r\n            break;\r\n        case 'fetch2':\r\n            getWithFetch2(requestURL, writeCountries);\r\n            break;\r\n    }\r\n}\r\n\r\nfunction getWithXhr1(requestURL, callback) {\r\n    const xhr = new XMLHttpRequest();\r\n    xhr.open('GET', requestURL);\r\n    xhr.responseType = 'json';\r\n    xhr.onload = function() {\r\n        callback(xhr.response);\r\n    };\r\n    xhr.send();\r\n}\r\n\r\nfunction getWithXhr2(requestURL, callback) {\r\n    $.ajax({\r\n        url: requestURL,\r\n        dataType: 'json',\r\n        success: function(data) {\r\n            callback(data);\r\n        }\r\n    });\r\n}\r\n\r\nfunction getWithFetch1(requestURL, callback) {\r\n    fetch(requestURL)\r\n    .then(function(httpResponse) {\r\n        return httpResponse.json();\r\n    })\r\n    .then(function(jsonContent) {\r\n        callback(jsonContent);\r\n    });\r\n}\r\n\r\nasync function getWithFetch2(requestURL, callback) {\r\n    const httpResponse = await fetch(requestURL);\r\n    const jsonContent = await httpResponse.json();\r\n    writeCountries(jsonContent);\r\n}\r\n\r\nfunction writeCountries(countries) {\r\n    countries.forEach(function(country) {\r\n        const countryDiv = document.createElement('div');\r\n        countryDiv.innerHTML = country.name.common;\r\n        contentDiv.appendChild(countryDiv);\r\n    });\r\n}\r\n<\/pre>\n
\n
Comparison<\/strong><\/p>\n\n\n\n
XHR<\/th>\nFetch API<\/th>\n<\/tr>\n
– Old school
– Works with Callbacks<\/td>\n		– New school
– Works with Promises<\/td>\n<\/tr>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
AJAX – stands for “Asynchronous JavaScript and XML” – allows asynchronous communications with the server – is used to update<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13566"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13566"}],"version-history":[{"count":1,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13566\/revisions"}],"predecessor-version":[{"id":16830,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13566\/revisions\/16830"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13566"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}