Ajax ??

??

Ajax? Asynchronous Javascript and XML (??? ??????? XML)? ???, ??? UI? ?? ? ????????? ??? ??? ?? ?????. ?? ??? ??????? ????? Ruby? Groovy ?? ?? ??? ? ? ?????. Grails? ??? Ajax ?? ?????? ?? Ajax ?????? ??? ?????. ?? ?? ????? ??? ?? ????? ???? ? ?????.

Rails?? Grails? ? ?? ?????? ???? ?? ???(helper method)? ?? ??? Rails ???? Grails? Ajax ?? ?????? ?? ???? ? ????.

????(adaptive) Ajax ??

Grails Ajax ??? ??? ??? ? ??? ??? Prototype ?????? ????? ??? ????. HTMl ??? "head" ??? ???? Ajax ?????? ?????? ??? ??? ?????? "??(adapt)"? ????.

Prototype ????:

<g:javascript library="prototype" />

Yahoo UI ????:

<g:javascript library="yahoo" />

Dojo ????:

<g:javascript library="dojo" />

?? ?? ?? ??? ???? ???? ???? ??? ????? ?? ?? Ajax ?????? ???? ?? ??? ??? ?? ? ??? ????. ?? Ajax ?????? ??? ??? ?? ????. ???? ??? ?? ? ???? ?????? ???? ?? ? ????.

Dojo ????

Dojo? ?? ? ??????? Grails? ???? ???? ????. ??? Dojo? ????? ??? ??? ???? ???. ??? Grails? Dojo? ?? ??? ? ??? ???? ?? ??? ???? ????. Grails ???? ?? ?????? ?? ??? ???? Dojo? ???? ????? ? ?????:

grails install-dojo

?? ??? ????

?? ???? ???? ??? ????? ???, ?? ???? ??? "remoteLink" ??? ???? ????. ? ??? ??? ??? ???, ??? ?? HTML ??? ??(?? ??)?? ??? ???? HTML ??(anchor) ??? ?????. ?? ??? ??? ??? ????:

<g:remoteLink action="delete" id="1">? ???</g:remoteLink>

def delete = {
      def b = Book.get( params.id )
      b.delete()
      render "${b.id}? ?? ??????"
}

<div id="message"></div>
<g:remoteLink action="delete" id="1" update="message">? ???</g:remoteLink>

<div id="message"></div>
<div id="error"></div>
<g:remoteLink action="delete" id="1"
update="[update:'message',failure:'error']">? ???</g:remoteLink>

??? ???

?? ???? ???? ? ??? ??????? ???? ? ? ????. ??? ????? ??? ???? ??? ?? ?? ?? ????? ? ? ????:

<g:remoteLink action="show" id="1" update="sucess" onLoading="showProgress();">1? ? ??</g:remoteLink>

• onSuccess (????) - ?? ??? ??? ?? ??? ?????? ??
• onFailure (????) - ?? ??? ??? ?? ??? ?????? ??
• on_ERROR_CODE (????) - ?? ?? ??? ?? ?????? ?? (?: on404="alert('not found!')")
• onUninitialized (????) - Ajax ?? ???? ??? ?? ??? ?????? ??
• onLoading (????) - ?? ??? ?? ??? ???? ??? ? ??? ?????? ??
• onLoaded (????) - ?? ??? ?? ??? ??? ??? ? ??? ?????? ??
• onComplete (????) - ?? ????? ????, ?? ??? ??? ? ??? ?????? ??

HTML ?? Ajax? ???(submit)

HTML ? ?? ?? ? ? ??? ??? ?? ?????? ??(submit)? ? ????. ??? ??? ??? ??? "remoteLink"? ??? ??? ??? "formRemote" ??? ???? ????:

<g:formRemote url="[controller:'book',action:'delete']" update="[success:'message',failure:'error']">
       <input type="hidden" name="id" value="1" />
       <input type="submit" value="Delete Book!" />
</g:formRemote >

<form action="delete">
       <input type="hidden" name="id" value="1" />
       <g:submitToRemote action="delete" update="[success:'message',failure:'error']" />
</form>

Ajax? render ???

Ajax? ?? HTTP ??? ????? ???, Grails? render ???? ???? ??? ????. ?? ??, ??? ??? ??? ???? ??? ?????:

…
    // controller action
    def time = {
       render "${new Date()}"
    }
    …
    <g:remoteLink action="time" update="time">Get Time</g:remoteLink>
    <div id="time">Time to be displayed here</time>

? ???? render method? "time" div? ?? ???? ???? ?? ?????. ?? ???? ???? ?? ??? ??? ? ????:

…
    // controller action
    def time = {
       render(contentType:'text/xml') {
           time(new Date())
       }
    }
    …
    // resulting response
    <time>(the current time)</time>

?? ???, ??? ?? ??? ???? JSON ??? ??? ??? ?? ????:

…
    // controller action
    def time = {
       render(contentType:'text/json') {
           time(new Date())
       }
    }
    …
    // resulting JSON response
    { time: "..." }

?? OpenRico ?????? ????? ??? OpenRico ??? ??? ??? ?? ????:

…
    // controller action
    def time = {
       render(builder:'rico') {
          element(id:'time') {
              new Date()
          }
       }
    }
    …
    // resulting Rico response
    <ajax-response>
          <response type="element" id="time">
               … // current time here
          </response>
    </ajax-response>