{"id":128395,"date":"2022-09-26T19:52:27","date_gmt":"2022-09-26T19:52:27","guid":{"rendered":"https:\/\/phppot.com\/?p=19530"},"modified":"2022-09-26T19:52:27","modified_gmt":"2022-09-26T19:52:27","slug":"ajax-call-in-javascript-with-example","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/09\/26\/ajax-call-in-javascript-with-example\/","title":{"rendered":"AJAX Call in JavaScript with Example"},"content":{"rendered":"
by Vincy<\/a>. Last modified on September 27th, 2022.<\/div>\n

This is a pure JavaScript solution to use AJAX without jQuery<\/strong> or any other third-party plugins.<\/p>\n

The AJAX is a way of sending requests to the server asynchronously from a client-side script. In general, update the UI with server response without reloading the page.<\/p>\n

I present two different methods of calling backend (PHP) with JavaScript AJAX.<\/p>\n

    \n
  1. via XMLHTTPRequest.<\/li>\n
  2. using JavaScript fetch<\/em> prototype.<\/li>\n<\/ol>\n

    This tutorial creates simple examples of both methods. It will be an easy start for beginners of AJAX programming. It simply reads the content of a .txt<\/em> file that is in the server via JavaScript AJAX.<\/p>\n

    If you want to search for a code for using jQuery AJAX<\/a>, then we also have examples in it.<\/p>\n

    \"ajax<\/p>\n

    AJAX call via XMLHTTPRequest<\/h2>\n

    This example uses XMLHttpRequest<\/code><\/em> in JavaScript to send an AJAX request to the server<\/a>.<\/p>\n

    The below script has the following AJAX lifecycle to get the response from the server.<\/p>\n

      \n
    1. It instantiates XMLHttpRequest<\/code> class.<\/li>\n
    2. It defines a callback function to handle the onreadystatechange<\/code> event.<\/li>\n
    3. It prepares the AJAX request by setting the request method, server endpoint and more.<\/li>\n
    4. Calls send() with the reference of the XMLHttpRequest<\/code> instance.<\/li>\n<\/ol>\n

      In the onreadystatechange<\/code> event, it can read the response from the server. This checks the HTTP response code from the server and updates the UI without page refresh.<\/p>\n

      During the AJAX request processing, it shows a loader icon till the UI gets updated with the AJAX response data.<\/p>\n

      ajax-xhr.php<\/p>\n

      <!DOCTYPE html>\n<html>\n<head>\n<title>How to make an AJAX Call in JavaScript with Example<\/title>\n<link rel='stylesheet' href='style.css' type='text\/css' \/>\n<link rel='stylesheet' href='form.css' type='text\/css' \/>\n<style>\n#loader-icon { display: none;\n}\n<\/style>\n<\/head>\n<body> <div class=\"phppot-container\"> <h1>How to make an AJAX Call in JavaScript<\/h1> <p>This example uses plain JavaScript to make an AJAX call.<\/p> <p>It uses good old JavaScript's XMLHttpRequest. No dependency or libraries!<\/p> <div class=\"row\"> <button onclick=\"loadDocument()\">AJAX Call<\/button> <div id=\"loader-icon\"> <img src=\"loader.gif\" \/> <\/div> <\/div> <div id='ajax-example'><\/div> <script> function loadDocument() { document.getElementById(\"loader-icon\").style.display = 'inline-block'; var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.onreadystatechange = function() { if (xmlHttpRequest.readyState == XMLHttpRequest.DONE) { document.getElementById(\"loader-icon\").style.display = 'none'; if (xmlHttpRequest.status == 200) { \/\/ on success get the response text and \/\/ insert it into the ajax-example DIV id. document.getElementById(\"ajax-example\").innerHTML = xmlHttpRequest.responseText; } else if (xmlHttpRequest.status == 400) { \/\/ unable to load the document alert('Status 400 error - unable to load the document.'); } else { alert('Unexpected error!'); } } }; xmlHttpRequest.open(\"GET\", \"ajax-example.txt\", true); xmlHttpRequest.send(); }\n<\/script> <\/body>\n<\/html>\n<\/code><\/pre>\n
      Using JavaScript fetch<\/em> prototype<\/h2>\n
      This example calls JavaScript fetch()<\/em> method by sending the server endpoint URL as its argument.<\/p>\n
      This method returns the server response as an object. This response object will contain the status and the response data returned by the server.<\/p>\n
      As like in the first method, it checks the status code if the \u201cresponse.status\u201d<\/em> is 200. If so, it updates UI with the server response without reloading the page.<\/p>\n
      ajax-fetch.php<\/p>\n
      <!DOCTYPE html>\n<html>\n<head>\n<title>How to make an AJAX Call in JavaScript using Fetch API with Example<\/title>\n<link rel='stylesheet' href='style.css' type='text\/css' \/>\n<link rel='stylesheet' href='form.css' type='text\/css' \/>\n<style>\n#loader-icon { display: none;\n}\n<\/style>\n<\/head>\n<body> <div class=\"phppot-container\"> <h1>How to make an AJAX Call in JavaScript using Fetch<\/h1> <p>This example uses core JavaScript's Fetch API to make an AJAX call.<\/p> <p>JavaScript's Fetch API is a good alternative for XMLHttpRequest. No dependency or libraries! It has wide support with all major browsers.<\/p> <div class=\"row\"> <button onclick=\"fetchDocument()\">AJAX Call with Fetch<\/button> <div id=\"loader-icon\"> <img src=\"loader.gif\" \/> <\/div> <\/div> <div id='ajax-example'><\/div> <script> async function fetchDocument() { let response = await fetch('ajax-example.txt'); document.getElementById(\"loader-icon\").style.display = 'inline-block'; console.log(response.status); console.log(response.statusText); if (response.status === 200) { document.getElementById(\"loader-icon\").style.display = 'none'; let data = await response.text(); document.getElementById(\"ajax-example\").innerHTML = data; } }\n<\/script> <\/body>\n<\/html>\n<\/code><\/pre>\n
      An example use case scenarios of using AJAX in an application<\/h2>\n
      AJAX is a powerful tool. It has to be used in an effective way wherever needed.<\/p>\n
      The following are the perfect example scenarios of using AJAX in an application.<\/p>\n
        \n
      1. To update the chat window with recent messages.<\/li>\n
      2. To have the recent notification on a social media networking website.<\/li>\n
      3. To update the scoreboard.<\/li>\n
      4. To load recent events on scroll without page reload.<\/li>\n<\/ol>\n
        We have seen how to keep on posting events into a calender using jQuery AJAX script<\/a> in a previous article.
        Download<\/a><\/p>\n
          <\/p>\n
        \n
        Popular Articles<\/h2>\n<\/p><\/div>\n
         \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
        by Vincy. Last modified on September 27th, 2022. This is a pure JavaScript solution to use AJAX without jQuery or any other third-party plugins. The AJAX is a way of sending requests to the server asynchronously from a client-side script. In general, update the UI with server response without reloading the page. I present two […]<\/p>\n","protected":false},"author":2,"featured_media":128396,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-128395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/128395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=128395"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/128395\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/128396"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=128395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=128395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=128395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}