beginning of the example<\/strong><\/a> below.<\/div>\n1. Installing the web server<\/h2>\n As said before, we are not using any server-side language, so we just need a web server, without any interpreter for any language.<\/p>\n
For example, we can install Nginx:<\/p>\n
sudo apt-get update\r\nsudo apt-get install nginx\r\n<\/pre>\nAfter the installation the web server service should automatically start, and, if we access localhost<\/code> or 127.0.0.1<\/code>, we should see the Nginx welcome page.<\/p>\n2. Transferring BLOBs<\/h2>\n One of the improvements was the option of allowing to transfer binary data. The simplest case can be to GET or POST some image, for example.<\/p>\n
Let’s imagine that we want to have a page, with a button that, when clicked, creates a request for getting an image and show it. Obviously, images are binary data, which is something to take into account for making these requests.<\/p>\n
We have chosen getting an image instead of posting one, not to have to install a web server. That means that we have to GET an image from some server. So, let’s GET the WebCodeGeeks logo, for example.<\/p>\n
The HTML would just consist on including the script, a button and an image element, apart from additional styles:<\/p>\n
1_blob.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>1 - BLOBs<\/title>\r\n <script src=\"1_blob.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 60%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n #img {\r\n display: block;\r\n margin: auto;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>1 - BLOBs<\/h1>\r\n <button id=\"button\">Click me!<\/button>\r\n <img id=\"img\">\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nIf we open it with a browser, we will just see a blank page. with a header and a button.<\/p>\n1. The HTML page, before the making the request.<\/figcaption><\/figure>\nThe interesting part is the script, let’s see it:<\/p>\n
1_blob.js<\/span><\/em><\/p>\ndocument.addEventListener('DOMContentLoaded', function(domEvent) {\r\n document.getElementById('button').onclick = function(clickEvent) {\r\n var xhr = new XMLHttpRequest(),\r\n resource = 'http:\/\/localhost\/WebCodeGeeks-logo.png';\r\n\r\n xhr.onreadystatechange = function() {\r\n var finishedAndSuccess = this.readyState == 4 && this.status == 200,\r\n finishedAndError = this.readyState == 4 && this.status != 200;\r\n\r\n if (finishedAndSuccess) {\r\n var img = document.getElementById('img');\r\n var url = window.URL || window.webkitURL;\r\n img.src = url.createObjectURL(this.response);\r\n } else if (finishedAndError) {\r\n alert('An error occured in the request, check the log.');\r\n }\r\n }\r\n\r\n xhr.open('GET', resource);\r\n xhr.responseType = 'blob';\r\n\r\n xhr.send();\r\n } \r\n});\r\n<\/pre>\nThe first listener is to load the second listener (the one setting the onclick event) when the whole document is loaded, actually nothing to see with the request.<\/p>\n
The first step is to instantiate the XMLHttpRequest<\/code> class, often shortened to xhr<\/code>. Note that we don’t have to specify that it’s its second version or similar.<\/p>\nThen, we set the handler to execute every time the request state changes. The request suffers changes on its state several times from the very beginning, to its end; it’s not just beginning\/end. This is way we have to check that the state of the request is 4<\/code> (finished), apart from checking that it was successful (HTTP 200<\/code> code).<\/p>\nChecking if the request was successful or not doesn’t have any\u00a0secret: if it was successful, we just add the image to its corresponding tag; and, if not, we show the error.<\/p>\n
After defining what to do when the request is ended and successful, we have to open<\/code> it, specifying the method and the resource; set that the response type is blob<\/code>, and send<\/code> it.<\/p>\nIf we now try to click the button… Nothing happened. In theory,\u00a0our script is correct. But this is a special case for which we have to do something different, but it’s not related to the transfer of the BLOB.<\/p>\n
If we check the console of the browser, we should see an error message similar to the following one:<\/p>\n
XMLHttpRequest cannot load https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.<\/p><\/blockquote>\n
By default, for security reasons, browsers (should) block AJAX\u00a0requests\u00a0to different domains, which are known as CORS (Cross-Origin Resource Sharing). If a web server doesn’t allow CORS, there’s no chance for the client: it won’t be able to get the resource<\/strong>.<\/p>\nNote<\/strong>: actually, transferring BLOBs is not the only change in what to data format regards. We can also set, besides text<\/code>, arraybuffer<\/code> or document<\/code>.<\/p>\n2.1. Making the request to our own server<\/h3>\n Note<\/strong>: these steps are not necessary. The code above is correct and it will work for contents that are allowed to be shared from other domains. What we make here is just to test it with a server that we make sure it allows CORS (our own local server).<\/p>\nThe first thing is to allow CORS in Nginx:<\/p>\n
cd \/var\/www\/html\/<\/pre>\nSo, for testing this, we need a server that allows cross-origin resource sharing. That’s for what we installed our own server.<\/p>\n
Before, we have configure Nginx to send the Access-Control-Allow-Origin<\/code> HTTP header to the client:<\/p>\n\/etc\/nginx\/sites-enabled\/default<\/em><\/span><\/p>\n# ...\r\n\r\nserver {\r\n # ...\r\n add_header 'Access-Control-Allow-Origin' '*';\r\n # ...\r\n}\r\n<\/pre>\nNow, we have to place our HTML and JavaScript files in the web directory, \/var\/www\/html\/<\/code>, to access the HTML file via web browser, instead of locally. In my case, http:\/\/localhost\/html5_xmlhttprequest_example\/1_blobs\/1_blob.html<\/code>.<\/p>\nNow, we have to download the image to our server:<\/p>\n
cd \/var\/www\/html\/\r\nsudo wget https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png\r\nsudo chown www-data:www-data WebCodeGeeks-logo.png<\/pre>\nOf course, we have to update our JavaScript file to GET the image locally:<\/p>\n
1_blob.js<\/em><\/span><\/p>\n\/\/ ...\r\nresource = 'http:\/\/localhost\/WebCodeGeeks-logo.png';\r\n\/\/ ...\r\n<\/pre>\nIf we now access the HTML file and click the button, we will see the image!<\/p>\n2. The HTML page, after the request.<\/figcaption><\/figure>\n3. Setting a timeout<\/h2>\n Setting a timeout is something we should do for most of the times\u00a0we request an external resource, regardless the technique or method, specially asynchronous ones. Because we shouldn’t wait leave the possibility of waiting forever for the request, unless it’s explicitly necessary for the scenario.<\/p>\n
With the level 2 of XHR, we can easily set a timeout for a request. For this, we will use the same HTML as for the example before (just changing the title of the page, the header, and the name to the script.<\/p>\n
The script would be almost the same:<\/p>\n
2_timeout.js<\/span><\/em><\/p>\ndocument.addEventListener('DOMContentLoaded', function(domEvent) {\r\n document.getElementById('button').onclick = function(clickEvent) {\r\n var xhr = new XMLHttpRequest(),\r\n resource = 'http:\/\/localhost\/WebCodeGeeks-logo.png';\r\n\r\n xhr.onreadystatechange = function() {\r\n var finishedAndSuccess = this.readyState == 4 && this.status == 200,\r\n finishedAndError = this.readyState == 4 && this.status != 200;\r\n\r\n if (finishedAndSuccess) {\r\n var img = document.getElementById('img');\r\n var url = window.URL || window.webkitURL;\r\n img.src = url.createObjectURL(this.response);\r\n } else if (finishedAndError) {\r\n alert('An error occured in the request, check the log.');\r\n }\r\n }\r\n\r\n xhr.open('GET', resource);\r\n xhr.responseType = 'blob';\r\n xhr.timeout = 100; \/\/ milliseconds.\r\n\r\n xhr.send();\r\n } \r\n});\r\n<\/pre>\nAs we can see, it’s just about setting a value to the timeout<\/code> attribute of our xhr<\/code> object, in milliseconds.<\/p>\nAdditionally, we can set an ontimeout<\/code> event for executing a piece of code if the timeout is reached:<\/p>\n2_timeout.js<\/span><\/em><\/p>\n\/\/ ...\r\nxhr.ontimeout = function(timeoutEvent) {\r\n alert('Timeout reached');\r\n}\r\n\r\n\/\/ ...<\/pre>\n4.\u00a0Setting key\/value as attributes of the request<\/h2>\n In the previous specification, when we wanted to send data to the server, we had to define a string with the format key1=value1&key2=value2<\/code>, which is actually quite dirty and unreadable.<\/p>\nIn this second level of XMLHttpRequest, we can set this data in a much more tidier way, thanks to the FormData<\/code> object.<\/p>\nBefore seeing how, let’s define a HTML page with some inputs for the user:<\/p>\n
3_sending_data.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>3 - Sending data<\/title>\r\n <script src=\"3_sending_data.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 60%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n .row {\r\n margin-bottom: 20px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>3 - Sending data<\/h1>\r\n\r\n <div class=\"row\">\r\n <input type=\"text\" name=\"key1\" id=\"key1\" placeholder=\"Key 1\" required>\r\n <input type=\"text\" name=\"value1\" id=\"value1\" placeholder=\"Value 1\" required>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <input type=\"text\" name=\"key2\" id=\"key2\" placeholder=\"Key 2\" required>\r\n <input type=\"text\" name=\"value2\" id=\"value2\" placeholder=\"Value 2\" required>\r\n <\/div>\r\n\r\n <button id=\"button\">Send<\/button>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nNow, the JavaScript:<\/p>\n
3_sending_data.js<\/em><\/span><\/p>\ndocument.addEventListener('DOMContentLoaded', function(domEvent) {\r\n document.getElementById('button').onclick = function(clickEvent) {\r\n var xhr = new XMLHttpRequest(),\r\n requestData = new FormData();\r\n\r\n xhr.onreadystatechange = function() {\r\n var finishedAndSuccess = this.readyState == 4 && this.status == 200,\r\n finishedAndError = this.readyState == 4 && this.status != 200;\r\n\r\n if (finishedAndSuccess) {\r\n alert('Success! (you can check the request with the dev tools)');\r\n } else if (finishedAndError) {\r\n alert('An error occured in the request, check the log.');\r\n }\r\n }\r\n\r\n var key1 = document.getElementById('key1').value,\r\n value1 = document.getElementById('value1').value,\r\n key2 = document.getElementById('key2').value,\r\n value2 = document.getElementById('value2').value;\r\n\r\n xhr.open('POST', '3_sending_data.html');\r\n\r\n requestData.append(key1, value1);\r\n requestData.append(key2, value2);\r\n\r\n xhr.send(requestData);\r\n } \r\n});\r\n<\/pre>\nIn this case, as we don’t expect any answer from the server, we just make the checks on the status for showing if it was successful or not, nothing else.<\/p>\n
The work has to be done before checking the state. For this situation, we have set the HTML itself as endpoint, in open<\/code>, even if it won’t process the data; but if we set an non-existing file, or an endpoint of another domain, we will get an error (404 and CORS non-allowed, respectively).<\/p>\nAfter retrieving the values, we instantiate a FormData<\/code> object, and we append them in (key, value)<\/code> format. Finally, we just have to pass this object to the send<\/code> method.<\/p>\nAs we don’t process this data in the backend, we can check that the data has been transferred correctly with the developer tools of the browser. The following is the output for Chromium.<\/p>\n3. Checking the posted data with development tools.<\/figcaption><\/figure>\n <\/p>\n
5. Summary<\/h2>\n This example has shown the improvements of the specification of XMLHttpRequest object for HTML5. This improvements include the specification of the file format, when before we could just send data in text format; setting a timeout for the request, to avoid possible infinite or very large requests, may caused by a high latency or huge files; and the improvement of setting the data, in key-value format, with the FormData<\/code> object.<\/p>\n6. Download the source code<\/h2>\n This was an example of HTML5 XMLHttpRequest example.<\/p>\n
Download<\/strong>HTML5XMLHttpRequestExample<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known as AJAX. The XMLHttpRequest object is far from being new: it’s more than 10 years old. But, with HTML5, a “level 2” of this object was introduced, with some improvements. …<\/p>\n","protected":false},"author":160,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-16897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\n
HTML5 XMLHttpRequest Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 XMLHttpRequest Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-20T13:15:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:02:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Toni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Toni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\"},\"author\":{\"name\":\"Toni\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\"},\"headline\":\"HTML5 XMLHttpRequest Example\",\"datePublished\":\"2017-04-20T13:15:50+00:00\",\"dateModified\":\"2017-12-19T11:02:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\"},\"wordCount\":1348,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\",\"name\":\"HTML5 XMLHttpRequest Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-04-20T13:15:50+00:00\",\"dateModified\":\"2017-12-19T11:02:41+00:00\",\"description\":\"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 XMLHttpRequest Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\",\"name\":\"Toni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"caption\":\"Toni\"},\"url\":\"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 XMLHttpRequest Example - Web Code Geeks - 2026","description":"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known","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:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 XMLHttpRequest Example - Web Code Geeks - 2026","og_description":"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-04-20T13:15:50+00:00","article_modified_time":"2017-12-19T11:02:41+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Toni","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Toni","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/"},"author":{"name":"Toni","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966"},"headline":"HTML5 XMLHttpRequest Example","datePublished":"2017-04-20T13:15:50+00:00","dateModified":"2017-12-19T11:02:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/"},"wordCount":1348,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/","name":"HTML5 XMLHttpRequest Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-04-20T13:15:50+00:00","dateModified":"2017-12-19T11:02:41+00:00","description":"As you probably already know, the XMLHttpRequest object is used for making asynchronous requests from the client to the server, with the technique known","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-xmlhttprequest-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 XMLHttpRequest Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966","name":"Toni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","caption":"Toni"},"url":"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=16897"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=16897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=16897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=16897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/blobs_empty.jpg\"){kind=spacer}
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/blobs_image.jpg\")
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/posting_data.jpg\")