dwr实现ajax学习

前一段时间看了一点dwr实现ajax的介绍信息,一直想找个机会看看到底怎么用。今天起了个早,试了一下感觉还挺好用的。 下面是我的一点学习总结:

一、配置DWR(http://getahead.org/dwr/getstarted)
1、将dwr.jar包放在web-info/lib目录下
2、编辑web.xml文件,添加servlet

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <display-name>DWR Servlet</display-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>

3、创建dwr.xml配置文件注册JAVA类和脚本的对应信息。
<!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">
      <param name="class"
value="java.util.Date"/>
    </create>
    <create
creator="new" javascript="Demo">
      <param name="class"
value="your.java.Bean"/>
    </create>-->
 
</allow>
</dwr>
4、通过http://localhost:8080/[your
webapp]/dwr可以获取到当前dwr中可以使用的JAVA类。

检测用户名是否已经使用例子:
1、按照前面两部配置一下DWR。
2、编写类:test.CheckUser
package
test;

public class CheckUser {
public String
check(String name){
 //访问数据库验证信息
 if(name.startsWith("aa")){
  return
"用户已经存在";
 }
 else{
  return
"可以使用该用户";
 }
}
}
3、创建配置文件并在配置文件中配置CheckUser类。
<?xml
version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
   
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create
creator="new" javascript="CheckUser">
      <param name="class"
value="test.CheckUser"/>
    </create>
 
</allow>
</dwr>
4、重启tomcat服务器,通过http://localhost:8080/[your
webapp]/dwr可以看到CheckUser类,点击连接可以查看该类的方法和并测试。
5、编写index.jsp页面,实现效果。
在页面文件中实现效果
1)在javascript中通过使用dwr.util.getValue()
来获取页面中某个页面元素的值。
2)直接调用后台java类的方法,传递方法参数和“异不调用返回后的处理脚本函数"
3)”在处理脚本函数“中我们可以通过dwr.util.setValue(”控件ID",值)来个控件更新数据。
4)为了让javascript脚本中可以调用java类的方法我们需要在dwr.xml文件中申明java类。
注意:在页面中需要包含引入:
<script
type=‘text/javascript‘
src=‘/test/dwr/interface/CheckUser.js‘></script><!---
dwr.xml中定义的脚本名字-->
<script type=‘text/javascript‘
src=‘/test/dwr/engine.js‘></script><!--- DWR-->
<script
type=‘text/javascript‘
src=‘/test/dwr/util.js‘></script><!---可以通过dwr.util.getValue方法获取元素值--->
否则会出现脚本错误

<html> 
<head> 
<script type=‘text/javascript‘ src=‘/test/dwr/interface/CheckUser.js‘></script>
<script type=‘text/javascript‘ src=‘/test/dwr/engine.js‘></script>
<script type=‘text/javascript‘ src=‘/test/dwr/util.js‘></script>

<script LANGUAGE=javascript>... 
<!-- 
function check() ...{
  var name = dwr.util.getValue("username");
  CheckUser.check(name, function(data) ...{
    dwr.util.setValue("result", data);
  });
}
//--> 
</script> 
</head> 
<body> 
<input type="text" id="username"/>
<input value="check" type="button" onclick="check()"/>
<br/>
 <span id="result"></span>
</body> 
</html> 

dwr实现ajax学习,布布扣,bubuko.com

时间: 2024-12-29 04:28:54

dwr实现ajax学习的相关文章

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

Ajax学习教程在线阅读

  1.什么是AJAX ?(1) 2.什么是AJAX ?(2) 3.什么是AJAX ?(3) 4.什么是AJAX ?(4) 5.Ajax基础教程(1)-Ajax简介 1.1 Web应用简史 6.Ajax基础教程(1)-Ajax简介 1.2 浏览器历史 7.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程 8.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(2) 9.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(3) 10.Ajax基础教

Ajax 学习初步

Ajax学习 第一步.创建 XMLHTTPRequest 对象 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject : var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera,Safari xmlhttp=new XMLHttpRe

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

Ajax学习心得

Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网页没有使用Ajax技术,当更新网页内容时要重新加载页面来重写页面,如果是整个网站,这工作量无疑是巨大的,但有了Ajax技术,我们在后台进行表单设计时,加入相关代码,实现异步输入输出,局部更新,这就使工作变得轻便.例如,现在很多的知名网站,像腾讯,新浪,谷歌,百度地图等等,都使用了这种技术. 而要学习

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

ASP.net中的AJAX学习记录六 无刷新的数据编辑(GridView和DetailsView结合实例)(转)

本篇博客是仿照书中实例,实现GridView和DetailsView结合无刷新的数据编辑效果,页面效果:当点击GridView1的行或换页时,都会引发DetailsView1的数据绑定显示至页面,同时当使用DetailsView1编辑.删除.添加时,也会引起GridView1的重新绑定,整体页面实现无刷新. 页面布局: 1.新建AJAX窗口,命名为:"NoRefreshEdit.aspx".要想实现页面无刷新编辑,就必须使用两个Updatepanel. 2.在NoRefreshEdit

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM