基于dwr框架的Ajax技术的使用

基于dwr框架的Ajax技术的使用

1、  配置dwr环境

a)         将dwr压缩解压，将包内WEB-INF/lib文件下的所有jar包全部复制到项目中去，

b)        在项目中的web.xml文件里配置dwr的控制器

<!-- 配置dwr的控制器 -->

 <servlet>

  <servlet-name>dwr-invoker</servlet-name>

  <servlet-class>org.directwebremoting.servlet.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>

c) 将压缩baonei的dwr.xml文件复制到项目web-inf文件夹下面，并只取<allow></allow>节点

2、  创建实体类entity.City，创建逻辑处理java文件 dao.Ta

3、  在dwr.xml文件里处理java逻辑文件和实体类

<allow>

   <!-- 构造器:生成类Ta的对象t -->

   <create creator="new" javascript="t">

    <param name="class" value="dao.Ta"/>

   </create>

   <!-- 构造器:生成类Ta的对象t （从spring中获取类，再生成javascript对象）-->

<!—-红色的地方是区别与直接获取java类的地方-->

   <create creator="spring" javascript="b">

    <param name="beanName" value="b"/>

   </create>

   <!-- 转换器:将对象转换为键值对字符串 -->

    <convert converter="bean" match="entity.City">

      <param name="include" value="label,value"/>

    </convert>

  </allow>

4、  在jsp文件中使用

a)         导入js文件

<script type="text/javascript" src="dwr/engine.js">

</script>//固定形式

       <script type="text/javascript"src="dwr/interface/t.js">

</script> //所有通过构造器创建出来的js对象都是以这种形式导入jsp文件中的，只是不//同的是t.js要根据不同的js对象名而变换

<script type="text/javascript">

function ab2(va){

          t.findAllCity(va,cb2);

         }

          //处理返回值--回调函数

          function cb2(d){

           var shi=document.getElementById("shi");//获得表单元素

           shi.length=0;

           for(var i=0;i<d.length;i++){//循环向下拉列表中添加数据

           shi.add(new Option(d[i].value,d[i].label));

           }

         }

</script>

<form method="post" action="ca.do" name="fm">

              //调用javascript中的ab2方法，传入本元素选中的value值

           省:<select id="sheng" onchange="ab2(this.value)">

             <option value="hn">河南</option>

             <option value="hb">河北</option>

           </select>

              &nbsp;

           市:<select id="shi">

             <option>请选择....</option>

           </select>

        

       </form>