现在的位置: 首页 > 综合 > 正文

Ajax牛刀小试

2013年03月13日 ⁄ 综合 ⁄ 共 2253字 ⁄ 字号 评论关闭
使用了DWR框架,将数据库中城市列出在页面上

step1)web.xml中的配置

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
 
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
 </servlet>

 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>

step2)dwr.xml

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
    <allow>
       
        <create creator="spring" javascript="SignupService">
            <param name="beanName" value="signupService" />
            <param name="location" value="applicationContext-baby-beans.xml" />
            <include method="loadGateway" />
        </create>
       
        <convert converter="bean" match="com.mofile.baby.domain.Area"/>
    </allow>

</dwr>

step3)测试页面
<html>
    <head>
        <script type='text/javascript' src='/dwr/interface/SignupService.js'></script>
        <script type='text/javascript' src='/dwr/engine.js'></script>
        <script type='text/javascript' src='/dwr/util.js'></script>
        <script type='text/javascript'>
            function showList() {
               
               
                SignupService.loadGateway (loadList);
               
                document.getElementById("xx").innerHTML ="loading....";
               
            }
           
            function loadList(data) {
              
               
               
                var list = data.arealist;
               
                var temparea;
               
                var listarea="";
               
                for(var i=0;i<list.length;i++){
                   
                    temparea = list[i];
                   
                    listarea = listarea + (i+1) +":" + temparea.name + "<br>";
                }
              
               
                document.getElementById("xx").innerHTML = listarea ;
               
               
               
            }
    </script>
    </head>

    <body>
        <INPUT type="button" value="ajax" onclick="showList();">
        <div id="xx">
        </div>
    </body>
</html>

总结如下:

dwr.xml非常值得关注,在dwr中你需要配置你的service,这样可以通过js远程调用service,另外如果你返回的数据包含一些非典型的 java数据结构,比如list,map之类的话,你必须在dwr.xml中配置,一个典型的情况是你返回领域对象。如果你不配置,异步返回的数据会出现空 数据,因为dwr框架不知如何转化。

说白了,dwr框架调用远程service(在dwr中配置),然后根据将service返回的java对象转化为js对象,如何转换就需要你配置dwr.xml来告诉框架。

dwr的使用很简单,确实简化了ajax的开发。而且其文档也很详细。

参考文档:dwr官方网站

抱歉!评论已关闭.