Using ajax in mule
-
Upload
anirban-sen-chowdhary -
Category
Technology
-
view
323 -
download
1
Transcript of Using ajax in mule
![Page 1: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/1.jpg)
Using AJAX in MuleBy Anirban Sen Chowdhary
![Page 2: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/2.jpg)
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
![Page 3: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/3.jpg)
Now, the question is how can we use AJAX in Mule application ??
?
![Page 4: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/4.jpg)
Yes .. It is possible to use …… Let’s see how ….
![Page 5: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/5.jpg)
Now, Mule has a AJAX component that will help us to use AJAX in our application :-
![Page 6: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/6.jpg)
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
![Page 7: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/7.jpg)
So, we will create another Mule flow that will expose the web service to carry the data backend :-
![Page 8: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/8.jpg)
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
![Page 9: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/9.jpg)
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
![Page 10: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/10.jpg)
.
And our HTML will be :-
![Page 11: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/11.jpg)
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 :-
![Page 12: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/12.jpg)
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
![Page 13: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/13.jpg)
.
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
![Page 14: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/14.jpg)
.
Now let’s put some value and hit insert button, :-
![Page 15: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/15.jpg)
.
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 !!!!
![Page 16: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/16.jpg)
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
![Page 17: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/17.jpg)
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
![Page 18: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/18.jpg)
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 !!!!.
![Page 19: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/19.jpg)
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
![Page 20: Using ajax in mule](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a81cca1a28ab072e8b48b0/html5/thumbnails/20.jpg)
Thank You