First they ignore you
then they ridicule you
then they fight you
then you win
    -- Mahatma Gandhi
Chinese => English     英文 => 中文             
随笔-221  评论-1047  文章-0  trackbacks-0
Ajax虽是“旧酒装新瓶”,但其威力着实不小。近两年来可谓红透半边天,它之所以能为大众接受,其中一个很大的原因就是提高了用户浏览体验,能更逼真的模拟出GUI界面。好了,Ajax的益处就说到这里,下面让我们看下Grails是如何帮助我们方便地应用Ajax的:

如果您对下面说设计的内容有点不解,那么您可以先看一下
Groovy轻松入门——Grails实战基础篇,然后开始我们的Ajax之旅。

1, 在命令行中输入:“grails create-app AjaxDemo”(注意:不带引号“”)创建一个Grails project,我将它命名为AjaxDemo:

D:\Temp\grails_apps>grails create-app AjaxDemo

Welcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:\D\MY_DEV\grails-0.5

Base Directory: D:\Temp\grails_apps
Environment set to production
Note: No plugin scripts found
Running script D:\D\MY_DEV\grails-0.5\scripts\CreateApp.groovy
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\src
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\src\java
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\src\groovy
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\src\test
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\controllers
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\jobs
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\services
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\domain
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\taglib
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\utils
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\views
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\views\layouts
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\i18n
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-app\conf
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\grails-tests
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\scripts
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\js
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\css
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\images
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\classes
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\META-INF
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\lib
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\spring
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\hibernate
[propertyfile] Creating new property file: D:\Temp\grails_apps\AjaxDemo\application.properties
     [copy] Copying 2 files to D:\Temp\grails_apps\AjaxDemo
     [copy] Copying 2 files to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF
     [copy] Copying 5 files to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\tld
     [copy] Copying 119 files to D:\Temp\grails_apps\AjaxDemo\web-app
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-app\conf
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-app\conf
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-app\conf
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-app\conf
     [copy] Copying 13 files to D:\Temp\grails_apps\AjaxDemo\grails-app
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\plugins\core\grails-app\taglib
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\plugins\core\grails-app\utils
     [copy] Copying 7 files to D:\Temp\grails_apps\AjaxDemo\plugins\core\grails-app\taglib
     [copy] Copying 4 files to D:\Temp\grails_apps\AjaxDemo\plugins\core\grails-app\utils
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\spring
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo
[propertyfile] Updating property file: D:\Temp\grails_apps\AjaxDemo\application.properties
Created Grails Application at D:\Temp\grails_apps/AjaxDemo
D:\Temp\grails_apps>


2,“cd AjaxDemo”,进入AjaxDemo目录,输入“grails create-domain-class User”,创建一个域类User:
D:\Temp\grails_apps\AjaxDemo>grails create-domain-class User

Welcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:\D\MY_DEV\grails-0.5

Base Directory: D:\Temp\grails_apps\AjaxDemo
Environment set to production
Running script D:\D\MY_DEV\grails-0.5\scripts\CreateDomainClass.groovy
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-app\domain
Created  for User
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\grails-tests
Created Tests for User
D:\Temp\grails_apps\AjaxDemo>

3,“grails generate-all User”,生成scaffolding code(如:list.gsp等):
D:\Temp\grails_apps\AjaxDemo>grails generate-all User

Welcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:\D\MY_DEV\grails-0.5

Base Directory: D:\Temp\grails_apps\AjaxDemo
Environment set to production
Running script D:\D\MY_DEV\grails-0.5\scripts\GenerateAll.groovy
Compiling sources 
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\lib
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\spring
     [copy] Copying 34 files to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\lib
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\grails-app\i18n
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\grails-app\views
     [copy] Copying 2 files to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\grails-app\views
    [mkdir] Created dir: D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\templates\scaffolding
     [copy] Copying 5 files to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\templates\scaffolding
[native2ascii] Converting 7 files from D:\Temp\grails_apps\AjaxDemo\grails-app\i18n to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\grails-app\i1
8n
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\spring
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\classes
     [copy] Copying 1 file to D:\Temp\grails_apps\AjaxDemo\web-app\WEB-INF\classes
Generating views for domain class [User]
Generating list view for domain class [User]
list view generated at D:\Temp\grails_apps\AjaxDemo\.\grails-app\views\user\list.gsp
Generating show view for domain class [User]
Show view generated at D:\Temp\grails_apps\AjaxDemo\.\grails-app\views\user\show.gsp
Generating edit view for domain class [User]
Edit view generated at D:\Temp\grails_apps\AjaxDemo\.\grails-app\views\user\edit.gsp
Generating create view for domain class [User]
Create view generated at D:\Temp\grails_apps\AjaxDemo\.\grails-app\views\user\create.gsp
Generating controller for domain class [User]
Controller generated at .\grails-app\controllers\UserController.groovy
D:\Temp\grails_apps\AjaxDemo>

4,修改AjaxDemo\grails-app\controllers\UserController.groovy的内容为:
            
class  UserController {
    def index 
=  { redirect(action:list,params:params) }

    
//  the delete, save and update actions only
    
//  accept POST requests
    def allowedMethods  =  [delete: ' POST ' ,
                          save:
' POST ' ,
                          update:
' POST ' ]

    def list 
=  {
        
if ( ! params.max)params.max  =   10
        [ userList: User.list( params ) ]
    }

    def show 
=  {
        [ user : User.get( params.id ) ]
    }

    def delete 
=  {
        def user 
=  User.get( params.id )
        
if (user) {
            user.delete()
            flash.message 
=   " User ${params.id} deleted. "
            redirect(action:list)
        }
        
else  {
            flash.message 
=   " User not found with id ${params.id} "
            redirect(action:list)
        }
    }

    def edit 
=  {
        def user 
=  User.get( params.id )

        
if ( ! user) {
                flash.message 
=   " User not found with id ${params.id} "
                redirect(action:list)
        }
        
else  {
            
return  [ user : user ]
        }
    }

    def update 
=  {
        def user 
=  User.get( params.id )
        
if (user) {
             user.properties 
=  params
            
if (user.save()) {
                redirect(action:show,id:user.id)
            }
            
else  {
                render(view:
' edit ' ,model:[user:user])
            }
        }
        
else  {
            flash.message 
=   " User not found with id ${params.id} "
            redirect(action:edit,id:params.id)
        }
    }

    def create 
=  {
        def user 
=   new  User()
        user.properties 
=  params
        
return  [ ' user ' :user]
    }

    def save 
=  {
        def user 
=   new  User()
        user.properties 
=  params
        
if (user.save()) {
            redirect(action:show,id:user.id)
        }
        
else  {
            render(view:
' create ' ,model:[user:user])
        }
    }

    
//  自己添加的Closure ajax定义
    def ajax  =  {}
    
    
//  自己添加的Closure sayHello定义
    def sayHello  =  {
        render 
" [${new Date()}] Hello, ${params.name} "
    }

}
添加sayHello闭包的目的很明显,因为客户端需要调用。那为什么还要添加ajax这个闭包呢?其实添加 ajax 这个闭包的目的是使http://localhost:8080/AjaxDemo/user/ ajax 这个请求合法化,否则会发生404错误,找不到页面:

HTTP ERROR: 404

Not Found

RequestURI=/AjaxDemo/user/ajax

Powered by Jetty://


所以被客户端请求的 每个 gsp页面,都需要在相应的Controller中添加以gsp文件名为变量名的Closure,如上面的ajax.gsp和ajax = {}所示,其中Closure中可以添加相关代码,我们这里仅仅是做Ajax的演示,所以就不需要代码



5,在AjaxDemo\grails-app\views\user目录下,新建ajax.gsp,用来演示remoteLink的用法,内容为:

< g:javascript  library ="prototype"   />


< div  id ="hello" > Content will be displayed here </ div >

< g:remoteLink  action ="sayHello"  params ="[name:'BlueSUN']"  update ="hello" >Say Hello </ g:remoteLink >
params表示要传递的参数,而update表示返回结果显示的地方,注意update="hello"中的hello对应于div的id,表示结果将显示于div所在处。

点击链接后的界面:
[Fri May 11 17:46:47 CST 2007] Hello, BlueSUN
Say Hello

6,修改AjaxDemo\grails-app\views\user\ ajax.gsp,演示formRemote的用法,内容为:
<g:javascript library="prototype" />


<div id="hello">Content will be displayed here</div>
<div id="error"></div>

<g:remoteLink action="sayHello" params="[name:'BlueSUN']" update="hello">Say Hello</g:remoteLink>

<hr />

<g:formRemote name="test" url="[controller:'user',action:'sayHello']" update="[success:'hello',failure:'error']">
    
<input type="text" name="name" value="BlueSUN" />
    
<input type="submit" value="Say Hello" />
</g:formRemote >
原本用params传递的参数,现在可以以form的形式传递了,将想传递的内容输入name的textfield中即可。

默认值我设为BlueSUN,现在我将值改为terry,点击Say Hello按钮,结果如下:
[Fri May 11 18:16:17 CST 2007] Hello, terry
Say Hello


7,修改AjaxDemo\grails-app\views\user\
ajax.gsp和AjaxDemo\grails-app\controllers\UserController.groovy,演示remoteField的用法:
ajax.gsp:
<g:javascript library="prototype" />


<div id="hello">Content will be displayed here</div>
<div id="error"></div>

<g:remoteLink action="sayHello" params="[name:'BlueSUN']" update="hello">Say Hello</g:remoteLink>

<hr />

<g:formRemote name="test" url="[controller:'user',action:'sayHello']" update="[success:'hello',failure:'error']">
    
<input type="text" name="name" value="BlueSUN" />
    
<input type="submit" value="Say Hello" />
</g:formRemote >

<hr />

<g:remoteField action="sayHello2" update="hello"  name="name" value="" />

UserController.groovy:
            
class UserController {
    def index 
= { redirect(action:list,params:params) }

    
// the delete, save and update actions only
    
// accept POST requests
    def allowedMethods = [delete:'POST',
                          save:
'POST',
                          update:
'POST']

    def list 
= {
        
if(!params.max)params.max = 10
        [ userList: User.list( params ) ]
    }

    def show 
= {
        [ user : User.get( params.id ) ]
    }

    def delete 
= {
        def user 
= User.get( params.id )
        
if(user) {
            user.delete()
            flash.message 
= "User ${params.id} deleted."
            redirect(action:list)
        }
        
else {
            flash.message 
= "User not found with id ${params.id}"
            redirect(action:list)
        }
    }

    def edit 
= {
        def user 
= User.get( params.id )

        
if(!user) {
                flash.message 
= "User not found with id ${params.id}"
                redirect(action:list)
        }
        
else {
            
return [ user : user ]
        }
    }

    def update 
= {
        def user 
= User.get( params.id )
        
if(user) {
             user.properties 
= params
            
if(user.save()) {
                redirect(action:show,id:user.id)
            }
            
else {
                render(view:
'edit',model:[user:user])
            }
        }
        
else {
            flash.message 
= "User not found with id ${params.id}"
            redirect(action:edit,id:params.id)
        }
    }

    def create 
= {
        def user 
= new User()
        user.properties 
= params
        
return ['user':user]
    }

    def save 
= {
        def user 
= new User()
        user.properties 
= params
        
if(user.save()) {
            redirect(action:show,id:user.id)
        }
        
else {
            render(view:
'create',model:[user:user])
        }
    }

    
// 自己添加的Closure ajax定义
    def ajax = {}
    
    
// 自己添加的Closure sayHello定义
    def sayHello = {
        render 
"[${new Date()}] Hello, ${params.name}"
    }
    
    
// 自己添加的Closure sayHello2定义
    def sayHello2 = {
        render 
"[${new Date()}] Hello, ${params.value}"
    }

}
由于
用remoteField传递过来的参数名为value,又为了保留以前的演示,所以再定义一个sayHello2闭包,注意是params.value而非params.name


输入“BlueSUN”
,请注意输入时页面的相应更新效果,结果界面:
输入到一半,即输入“Blue”
[Fri May 11 18:34:03 CST 2007] Hello, Blue
Say Hello



紧接着输入“SUN”
[Fri May 11 18:32:42 CST 2007] Hello, BlueSUN
Say Hello



8,修改AjaxDemo\grails-app\views\user\ ajax.gsp,演示remoteFunction的用法,内容为:
<g:javascript library="prototype" />


<div id="hello">Content will be displayed here</div>
<div id="error"></div>

<g:remoteLink action="sayHello" params="[name:'BlueSUN']" update="hello">Say Hello</g:remoteLink>

<hr />

<g:formRemote name="test" url="[controller:'user',action:'sayHello']" update="[success:'hello',failure:'error']">
    
<input type="text" name="name" value="BlueSUN" />
    
<input type="submit" value="Say Hello" />
</g:formRemote >

<hr />

<g:remoteField action="sayHello2" update="hello"  name="name" value="" />

<hr />

<button onClick="${remoteFunction(action:'sayHello',update:[success:'hello', failure:'error'], params:'\'name=\' + \'BlueSUN\'')}">Say Hello</button>

点击Say Hello按钮后,结果页面:
[Fri May 11 18:48:37 CST 2007] Hello, BlueSUN
Say Hello






9,Grails也可以利用Ajax异步显示Server端返回的页面,新建页面AjaxDemo\grails-app\views\user\result.gsp:
< html >
    
< head >
         
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" />
         
< meta  name ="layout"  content ="main"   />
         
< title > Result Page </ title >
    
</ head >
    
< body >
        
< div  class ="nav" >
            
< span  class ="menuButton" >< href ="${createLinkTo(dir:'')}" > Home </ a ></ span >
        
</ div >
        
< div  class ="body" >
           
< h1 > ${name} </ h1 >
        
</ div >
    
</ body >
</ html >

修改AjaxDemo\grails-app\controllers\UserController.groovy:
            
class  UserController {
    def index 
=  { redirect(action:list,params:params) }

    
//  the delete, save and update actions only
    
//  accept POST requests
    def allowedMethods  =  [delete: ' POST ' ,
                          save:
' POST ' ,
                          update:
' POST ' ]

    def list 
=  {
        
if ( ! params.max)params.max  =   10
        [ userList: User.list( params ) ]
    }

    def show 
=  {
        [ user : User.get( params.id ) ]
    }

    def delete 
=  {
        def user 
=  User.get( params.id )
        
if (user) {
            user.delete()
            flash.message 
=   " User ${params.id} deleted. "
            redirect(action:list)
        }
        
else  {
            flash.message 
=   " User not found with id ${params.id} "
            redirect(action:list)
        }
    }

    def edit 
=  {
        def user 
=  User.get( params.id )

        
if ( ! user) {
                flash.message 
=   " User not found with id ${params.id} "
                redirect(action:list)
        }
        
else  {
            
return  [ user : user ]
        }
    }

    def update 
=  {
        def user 
=  User.get( params.id )
        
if (user) {
             user.properties 
=  params
            
if (user.save()) {
                redirect(action:show,id:user.id)
            }
            
else  {
                render(view:
' edit ' ,model:[user:user])
            }
        }
        
else  {
            flash.message 
=   " User not found with id ${params.id} "
            redirect(action:edit,id:params.id)
        }
    }

    def create 
=  {
        def user 
=   new  User()
        user.properties 
=  params
        
return  [ ' user ' :user]
    }

    def save 
=  {
        def user 
=   new  User()
        user.properties 
=  params
        
if (user.save()) {
            redirect(action:show,id:user.id)
        }
        
else  {
            render(view:
' create ' ,model:[user:user])
        }
    }

    
//  自己添加的Closure ajax定义
    def ajax  =  {}
    
    
//  自己添加的Closure sayHello定义
    def sayHello  =  {
        render 
" [${new Date()}] Hello, ${params.name} "
    }
    
    
//  自己添加的Closure sayHello2定义
    def sayHello2  =  {
        render 
" [${new Date()}] Hello, ${params.value} "
    }
    
//  自己添加的Closure displayResultPage定义
    def displayResultPage  =  {
        render(view:
' result ' , model:[name:params.name])
    }
}

修改AjaxDemo\grails-app\views\user\ajax.gsp:
< g:javascript  library ="prototype"   />


< div  id ="hello" > Content will be displayed here </ div >
< div  id ="error" ></ div >

< g:remoteLink  action ="sayHello"  params ="[name:'BlueSUN']"  update ="hello" > Say Hello </ g:remoteLink >

< hr  />

< g:formRemote  name ="test"  url ="[controller:'user',action:'sayHello']"  update ="[success:'hello',failure:'error']" >
    
< input  type ="text"  name ="name"  value ="BlueSUN"   />
    
< input  type ="submit"  value ="Say Hello"   />
</ g:formRemote  >

< hr  />

< g:remoteField  action ="sayHello2"  update ="hello"   name ="name"  value =""   />

< hr  />

< button  onClick ="${remoteFunction(action:'sayHello',update:[success:'hello', failure:'error'], params:'\'name=\' + \'BlueSUN\'')}" > Say Hello </ button >

< hr  />

< g:formRemote  name ="test"  url ="[controller:'user',action:'displayResultPage']"  update ="[success:'hello',failure:'error']" >
    
< input  type ="text"  name ="name"  value ="BlueSUN"   />
    
< input  type ="submit"  value ="Say Hello"   />
</ g:formRemote  >

输入“terry”,点击Say Hello按钮,结果页面(样式的丢失是因为在ajax.gsp中没有声明css,目的是抓重点,抛开一切琐碎的内容):



最后要提醒大家一点,如果要使用中文,请将中文写在AjaxDemo\grails-app\i18n\messages_zh_CN.properties中,然后用<g:message code="key" />来显示。


正如各位所看到的那样,在Grails中使用Ajax就是那么简单,此外DWR插件即将出炉,到时利用DWR来开发Ajax应用也将变的十分方便 :)

如果您急需使用DWR,请参考《 Groovy轻松入门——Grails实战之遗留框架利用篇

附:朝花夕拾——Groovy & Grails
posted on 2007-05-11 19:24 山风小子 阅读(8481) 评论(9)  编辑  收藏 所属分类: Groovy & GrailsAjax