How To Make Ajax Call Using JavaScript In Blogger

Success Trending    December 15, 2021    Blogging Tips , Tech Skills   

Have you ever faced challenges when designing a form on a blogger to capture user input and send it to the server for processing?

It's a fairly common requirement for any blogger to use a form to send data. But most of the time when the form is submitted it opens a page where it sends the data. Today, I will show how to send the form using AJAX without opening a new document page. 

So what is AJAX? 

AJAX is an acronym for Asynchronous JavaScript and XML. It allows us to send the data asynchronously to the server in the background and makes it possible to update the page, without reloading. When the form is submitted an event listener attached to the form element passes the control to a JavaScript function which then proceeds to send data asynchronously using the XMLHttpRequest Object.

First, we will design a simple form.

Simple Form

  <form id="myForm">
  <label for="myName">Name</label>
  <input id="myName" name="name" type="text">
  <input type="submit" value="Submit">
  </form>

Copy and paste the above into the HTML section of the page and it should look like below

Name

Then comes the JavaScript to send the form to the server through AJAX.
Let us design a function to send the data.

JS Function for AJAX

  function SendForm( data ) {
  const xmlhttp = new XMLHttpRequest();
  var formdataobj = new FormData(form);
  xmlhttp.addEventListener( "load", function(event) {
  alert( event.target.responseText );
  } );
  xmlhttp.addEventListener( "error", function( event ) {
  alert( 'Something went wrong.' );
  } );
  xmlhttp.open( "POST", "contact.php" );
  xmlhttp.send( formdataobj);
  var form = document.getElementById( "myForm" );
  form.addEventListener( "submit", function ( event ) {
  event.preventDefault();
  sendForm();
  } ); }
  

The main drawback of the AJAX method, the page where the data is sent should be in the same domain. If it is not on the same domain then it will be blocked by the browsers. You can still do a workaround on this issue which I will tell you later in the article.

AJAX is not supported by all the browsers and there is a different way of implementing AJAX in different browsers. For example, Opera 8.0+, Firefox, Safari, and Chrome will support the new XMLHttpRequest(); but a browser like Internet Explorer requires you to use the ActiveX Object for this purpose.

You can replace this code above const xmlhttp = new XMLHttpRequest(); with more browser-specific JavaScript code below

Cross Browser Compatible Code

 var xmlhttp;  
            try {
               xmlhttp = new XMLHttpRequest();
            } catch (e) {
               try {
                  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                   try {
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     alert("Something went wrong");
                     return false;
                  }
               }
            } 
  

This is an example of the Front end code. You would also require a corresponding code on the server. Depending on the type of server, this can be done in PHP or Active Server Pages or any language available on the server. If it is a third-party API, then there will be documentation guiding you with implementing the communication between the AJAX code and the Server.

When AJAX requests are sent to a domain that is not the same as where the page is stored, the requests are blocked by the browser as this causes CORS Issue. Read the below article to correct the CORS issue.

How To Fix The CORS Policy Errors in Blogger

Knowing AJAX can help you make simpler pages that update using the response from the server. It is useful when communicating with various APIs on the internet.

Using the JQuery library, you can easily implement AJAX as shown below.

Using JQUERY

  <script>
  $.ajax('/jquery/getdata',
  {
    success: function (data, status, xhr) { 
    $('#results').append(data);
  }
  });
  </script>
  <div id="results" ></div>

However, You Might Not Need JQuery always because the JQuery library can be heavy on resources if you are just using it for AJAX. It's always better to use JavaScript instead.