Using AJAX in MuleBy Anirban Sen Chowdhary

AJAX :- Asynchronous JavaScript and XML.

It is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. Using Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page.

Source :- Wikipedia and W3school

Now, the question is how can we use AJAX in Mule application ??

?

Yes .. It is possible to use …… Let’s see how ….

Now, Mule has a AJAX component that will help us to use AJAX in our application :-

Now, let’s create our application with a HTML web page such that the Web page can interact with our Mule :-

Here we can see we enter some value from a HTML web page which is carried at the backend by a web service and the data is stored/retrieve from Database

So, we will create another Mule flow that will expose the web service to carry the data backend :-

So, the Mule flow will be :-

Now, what we will be doing is we creating a flow that will be a client of this web service and will be consuming this web service in carrying the data to and from the database

So, the Mule application folder structure will be :-

We will be creating docroot package where out HTML page with it’s dependent .css files and .js files will exists

.

And our HTML will be :-

The Mule flow that will get the data from the HTML page and consume the web service to take the data to and from database will be :-

The Mule flow will be :-

You can see we have used AJAX connector here that is hosting the HTML web page at http://0.0.0.0:9092/client url

.

Let’s test our application , and we will be hitting url http://0.0.0.0:9092/client and we will get following :-

We can see our HTML page has appeared on the screen

.

Now let’s put some value and hit insert button, :-

.

We will get the response back to the browser

You can see easily that the backend web service exposed in Mule has inserted the data into the database and returned the response back to the HTML page without changing the page !!!!

This is what happened behind …. When we entered the value in our web page (HTML) and hit the insert button, the data is carried into the database by the backend web service hosted in Mule without changing the HTML page

Data from HTML page Data inserted to DB

Now after the data has been inserted into database, the web service carries the response back to the web page (HTML) on the same page !!!

Data to HTML page Acknowledgment from DB

The HTML page remains same without change

So, we can see that Mule can easily use AJAX component to host a HTML page, a web service from our Mule flow which carried all the data to and from the web page , which is displayed in the same HTML page without being refreshed !!!!.

Hope you liked this small tricks in Mule.If you have any similar tricks in Mule, please do share it with all and let our Mule community growHappy coding

Thank You