Ajax三步曲和DWR的使用

使用DWR开发Ajax应用：
1、导入DWR的Jar包：dwr.jar;
2、在/WEB-INF下添加dwr.xml配置文件；
3、在web.xml文件中配置dwr的服务器端组件（DwrServlet）:
<!-- 添加DWR的Servlet -->
  <servlet>
  <servlet-name>dwr</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</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
4、创建JavaScript调用的服务器端组件，可以是一个普通的Java类；
5、对dwr.xml文件进行配置;
<?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 javascript="userChecker" creator="spring">
<param name="beanName" value="userChecker" />
<include method="checkUserExists"/>
</create>
//另一种
<create javascript="userChecker" creator="new">
<param name="class" value="biz.userBiz" />
<include method="checkUserExists"/>
</create>
  </allow>
</dwr>
6、在页面中添加脚本的引用：
<script type="text/javascript" src="dwr/interface/userChecker.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>

userChecker.check(uname,haoLEjiaowo);


二。通过XMLHttpRequest对象

<script type="text/javascript">
var XMLHttpRequest;

function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}

function checkUser(oCtl)
{
var name=oCtl.value;


if(!name)
{
document.getElementById("mess").innerHTML="用户名不能为空";
oCtl.focus();
return;
}
//请求字符串
var url="user.do?op=doCheck&userName="+name;

XMLHttpRequest =createXmlHttpRequest();
XMLHttpRequest.onreadystatechange=haolejiaowo;
XMLHttpRequest.open("GET",url,true);
XMLHttpRequest.send(null);


}

function haolejiaowo()
{
if(XMLHttpRequest.readyState==4 && XMLHttpRequest.status==200)
{
var b=XMLHttpRequest.responseText;
if(b=="true")
{
document.getElementById("mess").innerHTML="用户名已存在";

}
else{
document.getElementById("mess").innerHTML="用户名可以使用！";
}
}
}



</script>



[/color][color=green]