Tutorial by Examples

var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) { //parse the response in xhttp.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(...

6 Fetch request promises initially return Response objects. These will provide response header information, but they don't directly include the response body, which may not have even loaded yet. Methods on the Response object such as .json() can be used to wait for the response body to load, then p...

We can make an AJAX request to Stack Exchange's API to retrieve a list of the top JavaScript questions for the month, then present them as a list of links. If the request fails or the returns an API error, our promise error handling displays the error instead. 6 View live results on HyperWeb. c...

This function runs an AJAX call using GET allowing us to send parameters (object) to a file (string) and launch a callback (function) when the request has been ended. function ajax(file, params, callback) { var url = file + '?'; // loop through object and assemble the url var notFirst ...

This function executes an AJAX request using the HEAD method allowing us to check whether a file exists in the directory given as an argument. It also enables us to launch a callback for each case (success, failure). function fileExists(dir, successCallback, errorCallback) { var xhttp = new XM...

Here's a way to show a GIF preloader while an AJAX call is executing. We need to prepare our add and remove preloader functions: function addPreloader() { // if the preloader doesn't already exist, add one to the page if(!document.querySelector('#preloader')) { var preloaderHTML = '<...

// Store a reference to the native method let open = XMLHttpRequest.prototype.open; // Overwrite the native method XMLHttpRequest.prototype.open = function() { // Assign an event listener this.addEventListener("load", event => console.log(XHR), false); // Call the s...