jsp+Ajax入门

1、web.xml中添加：
        <servlet>
  <display-name>DWR Servlet</display-name>
  <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>

2、在WEB-INF目录下的web.xml旁边创建一个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="new" javascript="JDate">    //这个是在javascript中对应的对象变量名
      <param name="class" value="java.util.Date"/>  //java中的类
    </create>
    <create creator="new" javascript="Demo">    
      <param name="class" value="your.java.Bean"/>
    </create>
  </allow>
</dwr>

3、在jsp文件中添加：
<script type='text/javascript'

src="${pageContext.request.contextPath}/dwr/engine.js"></script>
<script type='text/javascript' src="${pageContext.request.contextPath}/dwr/util.js"></script>
<script type='text/javascript'

src="${pageContext.request.contextPath}/dwr/interface/jsDate.js"></script>

4、调用：
< script >

    function displayDate()

    {

       var str = JDate.toString(); //在web.xml中对应的类对象

       alert(str);

    }

</ script >

5、反包括原则：
       java function:
       public List getTableContent() {
  
  ArrayList list = new ArrayList();

  TableRow row = null;
  
  row = new TableRow();
  row.setId(1);
  row.setName("Yao Ming");
  row.setRebound("20");
  row.setScore("36.5");
  row.setTurnovers("5");
  row.setDescription("Center");
  list.add(row);
  
  row = new TableRow();
  row.setId(2);
  row.setName("Mcgrady");
  row.setRebound("9");
  row.setScore("28.2");
  row.setTurnovers("4");
  row.setDescription("Guard");
  list.add(row);
  
  row = new TableRow();
  row.setId(3);
  row.setName("Tim Duncan");
  row.setRebound("14");
  row.setScore("31.7");
  row.setTurnovers("5");
  row.setDescription("Forward");
  list.add(row);
  
  row = new TableRow();
  row.setId(4);
  row.setName("Kevin Garnett");
  row.setRebound("22");
  row.setScore("36.2");
  row.setTurnovers("4");
  row.setDescription("Forward");
  list.add(row);
  
  return list;
  
 }

 /
javascript方法：/
function test() {
 listService.getTableContent(show);//getTableContent实际是返回List.
                                          //show实际是调用List
                                          //这个就是反引用了
}

function show(list) {
 DWRUtil.removeAllRows('recordbody');//DWRUtil对象参看下边说明
 alert(DWRUtil.toDescriptiveString(list, 2));
 DWRUtil.addRows('recordbody',list,[getPlayerid, getPlayername, getPlayerscore,

getPlayerrebound, getPlayerturnover]);
}

$();

功能:相当于document.getElementById(id);

参数: id或name属性值;

例:

 

<script>

       Var ele=$(txt_test);

       Var str=DWRUtil.toDescriptiveString(ele,1)

       DWRUtil.debug(str);

</script>

 

DWRUtil.getValue();

功能:获得指定元素value值

参数: id或name属性值;

注意:该函数只能用于有value属性的元素

例:

 

<script>

       var val=DWRUtil.getValue(“txt_test”);

       DWRUtil.debug(val);

</script>

 

DWRUtil.getValues();

功能:获得一组指定元素的value值;

参数:id或name构成的数组对象

例:

 

 

<script>

       Var arr_=DWRUtil.getValues({“txt_name”:null,”txt_pswd”:null});

       Var str=DWRUtil.toDescriptiveString(arr,1)

       DWRUtil.debug(str);

</script>

 

DWRUtil.setValue();

功能:设置指定元素的value值

参数: id或name属性值

 

<script>

       DWRUtil.setValue(“txt_test”,”wiley”);

</script>

 

 

DWRUtil.setValues();

功能:设置一组指定元素的值

参数: id或name构成的数组对象

例:

 

 

<script>

       DWRUtil.setValues({“txt_name”:”wiley”,”txt_pswd”:”wiley”});

</script>

 

DWRUtil.getText();

功能:获得select元素的文本值

参数: id或name属性值

例:

        wiley中国

<script>

       Var txt=DWRUtil.getText (“sel_test”);

       Var val=DWRUtil.getValue(“sel_test”);

       DWRUtil.debug(“Text:”+txt+”/tValue:”+val);

</script>

 

DWRUtil.addRows();

功能:指定表格添加行

格式:DWRUtil.addRows(id,items, functions);

参数:

第一个参数:table或tbody的id属性值

第二个参数:数组或链表(可能用词不是很适合)

第三个参数:函数链表

 

例1:

<script>

       Var arr_={“wiley’s blog”,”wiley中国”};

       DWRUtil.addRows(“tby_test”,arr_,[function(arr_){return arr_}]);

</script>

 

 

例2:

<script>

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“tby_test”,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

 

DWRUtil.romoveAllRows();

功能:删除指定表格行

参数:table或tbody的id属性值

例

<script>

       DWRUtil.romoveAllRows(“tby_test”);//每次添加前将原有数据行删除,防止数据重叠

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“tby_test”,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

 

DWRUtil.addOptions();

功能:添加select元素的option子元素

格式:DWRUtil.addOption(id,items)或DWRUtil.addOption(id,items,valueProp,textProp);

参数:

第一个参数:select的id或name属性值

第二个参数:数组或链表(填充数据)

第三、四个参数:链表节点的属性,第三个填充value值，第四个填充text值

 

例：

 

<script>

       Var arr_={“wiley”,”wiley中国”};

       DWRUtil.addRows(“sel_test”,arr_);//此时value与text值相同

       DWRUtil.romoveAllOptions(“sel_test”);

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“sel_test”,”add”,”name”);//此时value与text不相同

</script>

 

DWRUtil.romoveAllOptions();

功能:删除指定select元素的option子元素

参数:select元素的id或name属性值

例:前面例子有用到

 

DWRUtil.debug();

功能:等价于alert()

例:前面例子有用到

 

DWRUtil.toDescriptiveString();

功能:将对象序列化成字符串,主要用于调试

例:前面的例子有用到