Downloaded 21 times
Uploaded byAnirban Sen Chowdhary
Using ajax in mule
The document discusses how to use AJAX in Mule applications. It explains that AJAX allows updating parts of a web page without reloading the entire page. It then demonstrates creating a Mule flow with a web service that can insert and retrieve data from a database in response to requests from an HTML page hosted using Mule's AJAX component, without reloading the page. The HTML page is hosted at a URL and uses the web service to handle data input and output without changing the page. This allows asynchronous data exchange between the HTML page and backend database via a web service in Mule.
Using ajax in mule
- 1. By Anirban SenChowdhary
- 2. AJAX :- AsynchronousJavaScript 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
- 3. Now, the questionis how can we use AJAX in Mule application ??
- 4. Yes .. Itis possible to use …… Let’s see how ….
- 5. Now, Mule hasa AJAX component that will help us to use AJAX in our application :-
- 6. Now, let’s createour 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
- 7. So, we willcreate another Mule flow that will expose the web service to carry the data backend :-
- 8. So, the Muleflow 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
- 9. So, the Muleapplication 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
- 10. . And our HTMLwill be :-
- 11. The Mule flowthat will get the data from the HTML page and consume the web service to take the data to and from database will be :-
- 12. The Mule flowwill 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
- 13. . Let’s test ourapplication , 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
- 14. . Now let’s putsome value and hit insert button, :-
- 15. . We will getthe 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 !!!!
- 16. This is whathappened 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
- 17. Now after thedata has been inserted into database, the web service carries the response back to the web page (HTML) on the same page !!!
- 18. So, we cansee 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 !!!!.
- 19. Hope you likedthis small tricks in Mule. If you have any similar tricks in Mule, please do share it with all and let our Mule community grow Happy coding