Send HTML Forms on Blogger Asynchronously Using AJAX

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 making 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.

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

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

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

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.

Great User Experience

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.

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.

Share with your friends

Add your opinion
You can subscribe to our blog or follow us on social media to get notified about the new posts.
Text Content
Cookies used on the website!
We and our partners use cookies to personalize content and ads, to provide social media features and to analyze our traffic.
You consent to use of these cookies if you continue to use this website.
Learn more »