AJAX快速应用体验

         AJAX作为一种创建全新的用户体验技术组合，目前已有一些开源的实现，在经过技术研究和试用以后，感觉Buffalo和DWR比较方面，能快速上手，两者结合起来使用就更加灵活了。
      再结合两者使用时，建议使用DWR用作与服务器的交互，而将Buffalo提供的JavaScript对象用作回调函数处理DWR返回的结果。
      关于Buffalo和DWR的使用，请参看作者其他文章。
 举例如下，我要使两各下拉框连动，一个下拉框的内容是省份，另一个的是城市，后台获取城市的类为Demo，获取城市的方法为getCities(String)，则代码如下：

< head >
< title >测试 </ title >
< link href = " <%=styleSheet%> "  rel = " stylesheet "  type = " text/css " >
< script src = " <%=webapp%>/common/scripts/validate.js " ></ script >
< script language = " JavaScript "  src = " <%=webapp%>/common/scripts/prototype.js " ></ script >
< script language = " JavaScript "  src = " <%=webapp%>/common/scripts/buffalo.js " ></ script >
< script language = " JavaScript "  src = " <%=webapp%>/common/scripts/template.js " ></ script >
< script src = " <%=webapp%>/dwr/engine.js "   ></ script >
< script src = " <%=webapp%>/dwr/interface/Demo.js " ></ script >

< script  >
    function changeCities(province)
     {
        Buffalo.Bind.bind( " city " , categories);
    }
    function changeProvince(province)
     {
        Demo.getCities(province,changeCities);
    }
    
</ script >

</ head >
< body >
< form name = " test " >
< table  width = " 95% "  border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 " >
   < tr  class = " list " >
       < td >
          省份：
       </ td >
       < td width = " 70% "  nowrap   >
           < select name = " province "  id = " provinde "  onchange = " changeProvince(this.value) " >
            < option value = "" >- 请省份 -</ option >
            < option  > 湖北 </ option >        
</ select >
         </ td >
      </ tr >
      < tr  >
         < td width = " 30% "  nowrap  >
           城市
         </ td >
         < td width = " 70% "  nowrap  >
             < select name = " city "  id = " city " ></ select >
         </ td >
      </ tr >
</ table >

</ html:form >

</ body >

onlylife 2006-03-22 13:11 发表评论