The document discusses AJAX technology and its integration with the Grails framework, which automates certain AJAX functionalities to enhance web applications. It outlines the advantages of using AJAX, such as avoiding full page refreshes and includes various Grails tags for implementing remote calls and updating DOM elements. Additionally, the document touches on performance considerations like caching and the importance of optimizing AJAX calls to reduce server requests.

2. Grails & Ajax

3. 1. What isAjax?
2. Grails inbuiltsupport for Ajax
3. Some Cute examples
4. Questions
3
Session Agenda

4. ● The technology was originally developed by Microsoft to power a web-
based version of itsOutlook e-mail software. Microsoft implemented Ajax as
an ActiveX control that could be used by its browser, Internet Explorer, and
be called from JavaScript to perform asynchronous browser requests
● The advantage of the approach isthat the browser doesn’t have to refresh
the entire page to interact with the server
● We have to write browser-specific code to load XMLHttpRequest object
● Grails tags did thisthingautomatically
● Writing Browser Specific JavaScript code can become rather repetitive and
tedious. Fortunately, there are Ajax frameworks that encapsulate much of this
logic, ranging from the simple (such as Prototype) to the comprehensive
(such asDojo)
4
AJAX

5. The browser calls some JavaScript, which in turn creates the XMLHttpRequest
object that isable to make the remote call. When the remote call has been
made, the XMLHttpRequest object then invokes the callback (in this case the
processRequest function), which in turn displays the alert
Ajax Flow
5

6. Grails uses prototype library to provide support for ajax
Include this line on the page where you are using ajax
<g:javascript library="prototype"/>
6
Grails Support For Ajax

7. Some of the basic tags are as follows:
RemoteLink
– <g:remoteLink action="showTime"update="time">
• Show thetime!
</g:remoteLink>
•
<divid="time">
• </div>
– def showTime ={
– render "Thetime is${newDate()}"
– }
– Remote link calls an action at server and updates a div tag on
success/failure
7

8. <g:formRemote
name="loginForm"
url="[controller:'user',action:'login']"
update="loginBox">
...
</g:formRemote>
<divid="loginBox">
</div>
def loginBox ={
//process formhere
render "Success"
}
Alternatively you can use submitToRemote tag as well
8
Form Remote

9. <select
onchange="${remoteFunction(action:'bookbyname',update:[success:'great'
, failure:'ohno'], params:''bookName=' +this.value')}">
– <option>first</option>
– <option>second</option>
– </select>
– Creates a remote javascript function that can be assigned to a DOM
event to call the remote method
9
Remote Function

10. <g:formRemoteaction="login"
before="setDefaultValue(this);"
update="loginBox"
name="loginForm">
...</g:formRemote>
<divid="loginBox"></div>
<script type=”text/javascript”>
function setDefaultValue(x){
//somecode here
}
</script>
def loginBox ={
//process formhere
render "Success"
}
10
Executing Code Before and After a Call

11. <g:formRemote url="[controller:'user',action:'login']"
onLoading="showProgress();" onComplete="hideProgress();"
update="loginBox" name="loginForm">
...
</g:formRemote>
ListOfevents
onSuccess : Called when the remote call issuccessful
onFailure : Called when the remote call begins to load the response
onLoaded :Called when the remote call has loaded the response
onComplete :Called when the response has been received and any
updates arecompleted
onERROR_CODE : Called for specific error codes such as on404
11
Handling Events

12. Grails provides an extremely useful tag to help implement the search feature—
the <g:remoteField> tag. As you might guess from the name, <g:remoteField> is
a text field that sends itsvalue to the server whenever it changes..
<divid="searchBox">
Instant Search:<g:remoteField
name="searchBox"
update="musicPanel"
paramName="q"
url="[control er:'store', action:'search']"/>
</div>
12
Ajax-Enabled Form Fields

13. OnClicking a link you gotta fetch a template to update a div
onclick="fetchTemplate('$createLink(action:'todo',controller:'dashBoard')}',
this.id);"
function fetchTemplate(url, id) {
jQuery.get(url, {ajax: 'true'}, function(todo){
jQuery('#todoTab').html(todo);
});
}
def todo ={
– //do someprocessing
// render atemplate
render (template:'someTemplate')
}
13
Some Cute Codes

14. Getting a JSONresponse
Ajax–like File Upload . (In-House researchproject)
14
Some Cute Codes

15. • Given the number of small snippets of code that get rendered, it wil come as
little surprise that badly designed Ajax applications have to deal with a
significantly larger number ofrequests
• The firstthing to remember isthat an Ajax call isa remote network call and
therefore expensive. Ifyou have developed with EJB,you will recall some of
the patterns used to optimizeEJB remote method calls. Things such as the
Data Transfer Object (DTO) are equally applicable in the Ajax world
• Fundamentally, the DTO pattern serves as a mechanism for batching
operations into a single call and passing enough state to the server for
several operations to be executed at once. This pattern can be equally
effective in Ajax, given that it isbetter to do one call that transmits a lot of
information than a dozen small ones
15
A Note on Ajax and Performance

16. • Caching isprobably the most important technique in Ajax development
and,where possible, should be exploited to optimize communications
with theserver
• Debugging istough (yikes....)
16
A Note on Ajax and Performance

17. 1.www.grails.org
2.DGG
17
References

18. Contact us
Our Office
Client
Location
Click Here To Know More!
Have more queries on Grails?
Talk to our GRAILS experts
Now!
Talk To Our Experts
Here's how the world's
biggest Grails team is
building enterprise
applications on Grails!