浅谈AJAX

jxb1016

浏览: 22694 次
性别:
来自: 深圳

最近访客更多访客>>

bsr1983

stonesfour

phncz310

xdj68

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax DWR Spring XML DAO

首先，我们理解下AJAX的英文含义，AJAX就是（Asynchronous JavaScript And XML），其中文意思就是异步的java脚本语言与XML技术的整合。
我们理解下什么是异步（Asynchronous），我撇开单调的概念来给大家举个例子，异步就是当你点击页面上的某个按钮或出发某事件，向服务器发出请求之后，不必等待服务器的响应而可以继续进行后续的操作。如果是同步的话，你点下按钮，直到服务器响应之前，按钮是陷下去的，整个页面也是冻结的，服务器响应完毕后，按钮才弹起来，你方可进行下面的操作。再往理论想说，就是我们所处的发出请求的线程和处理请求的线程是独立的，不相互干扰。这也决定着我们的请求是有序的，但处理结果是乱序的。
那么我再来理解下AJAX的工作流程吧。

首先是JS事件委托XMLHttpRequest对象向AJAX引擎发送异步请求，调用后台的服务器程序进行处理，然后服务起程序把处理的结果放在Response对象中以不同的格式（可以是ResponseText,ResponseXML等）返回给客户端，由AJAX引擎自动调用JS中定义好的回调函数，回调函数将把返回的数据展示给页面。这里默默无闻的工作者是AJAX引擎，它把请求和处理分离开了，让其各自处于独立的线程，从而是页面上的操作得以继续进行。
再看看如何来实现吧。
首先我们来自己手工编写前端的JS，示例代码如下：

<html>
<head>
  <script>
    var xhr;
		
	function createXHR()
	{
		if(window.ActiveXObject)
		{
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
       	 		return;
    		}else if(window.XMLHttpRequest){
       		 	xhr=new XMLHttpRequest();
       		 	return;
    		}			
	}
	
	function SendAjaxRequest()
	{
		createXHR();
		xhr.onreadystatechange=callBack;
		//false，发同步请求
		//true,发异步请求
		xhr.open("get","xml.jsp",true);
		//模拟表单发送数据，设置头文件的文本类型。
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
			
		xhr.send("name=zhangsan&password=zhangsan");
	}
		
		
	function callBack()
	{
	        if(xhr.readyState == 4 && xhr.status == 200)
		{		
			var result=xhr.responseText;
                        //执行纯文本的js
			eval(xhr.responseText);
			alert(result);
				  document.getElementById("resultDiv").innerHTML=result;
		     if(result)
		      {
			alert("success");
		       }
		      else
		      {
			alert("fail");
		      }
	       }
	}
        function update(result1,result2)
	{		
		document.getElementById("resultDiv").innerHTML=result1;
		document.getElementById("resultDiv2").innerHTML=result2;
	}
   </script>
</head>
<body>

		<input type="button" value="AjaxDemo"onclick="SendAjaxRequest()">

		<div id="resultDiv">
		</div>
		<hr />
		<div id="resultDiv2">
		</div>
		<input type="button" value="Demo" onclick="z()">
	</body>
</html>

我们再来编写处理AJAX请求的JSP，代码如下：

<jsp:directive.page contentType="text/plain"/>
<%
	String username=request.getParameter("name");
	String password=request.getParameter("password");
%>
update("<%=username%>","<%=password%>");

   注意：我们在这个JSP的contentType中设置为纯文本的，那么他返回的ResponseText的信息就是字符串“update("<%=username%>","<%=password%>")”，在AJAX引擎调用回调函数的时候，就可以通过eval(xhr.responseText);来执行里面的js了。
    通过上面的代码可以实现响应后，影响页面多出位置发生变化，你看，这里的两个层里的内容均通过js函数update(result1,result2)改变了。
    上面介绍的是我们手工打造的AJAX，那么在J2EE中广泛流行的ajax框架比较典型的就是DWR框架，原理和我们手工打造的基本一样，但用起来功能更强大。
    首先来说下DWR的使用吧。
      第一，导入DWR.jar进入工程。
      第二，在web.xml中配置DWRServlet，来监听所有DWR请求.
     web.xml配置

<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>

第三，编写好基本的JS，并指定我们的js请求交给DWR框架处理。

<html>
<head>
<scripttype='text/javascript'src='/AjaxParamDemo/dwr/interface/DWRDemo.js'></script>
<script type='text/javascript'src='/AjaxParamDemo/dwr/engine.js'></script>
<scripttype='text/javascript'src='/AjaxParamDemo/dwr/util.js'></script>
<scripttype="text/javascript">
   //javabean测试
    function DWRtest(){
      var para={param1:204,param2:"21"};
       DWRDemo.get(para);
    }
   
   //测试集合
   function DWRtestList(){
       varlist=newArray();
       list[0]="123";
       list[1]="456";
       DWRDemo.setList(list);
   }
</script>
</head>
<body>
        <inputtype="button"value="测试javabean"onclick="DWRtest()">
        <inputtype="button"value="测试集合"onclick="DWRtestList()">
</body>
</html>

第四，编写java类

package org.dwr.test;
import java.util.List;
/**
* DWR框架测试
*/
public class DWRDemo {
/**
* JavaBean测试
* @param param
* @return
*/
public String get(Param param) {
System.out.println(param.getParam1() +"\t" + param.getParam2());
String rs ="通过测试";
return rs;
}
/**
* 集合测试
* @param list
* @return
*/
public String setList(List list) {
System.out.println(list.get(0));
return "";
}
}

第五，配置好DWR.xml ，我们稍后为大家介绍里面的简单配置。

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEdwrPUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN""http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
    <!-- 指定javascript中可以访问的java类-->
    <!--creator= "new"属性指定java类实例的生成方式-->
    <create javascript="DWRDemo"creator="new">
      <!-- 参数是类 -->
      <param name="class"value="org.dwr.test.DWRDemo"/>
      <!-- 方法 -->
     <include method="get"/>
      <!-- 方法 -->
      <include method="setList"/>
    </create>
    <!-- JavaBean参数使用配置 -->
    <convert  match="org.dwr.test.Param"  converter="bean">
     <!-- 参数是value是JavaBean的属性,可以不写，默认为全部 -->
       <param  name="include"  value="param1,param2"/>
    </convert>
</allow>
<!-- 参数集合List配置 -->
<signatures>
   <![CDATA[ 
             import java.util.List;
             org.dwr.test.DWRDemo;
             DWRDemo.setList(List);
   ]]>
</signatures>
</dwr>

   DWR的优点是什么呢，它可以把我们的后台业务类中的方法映射到前端的js上，这简直是大家都想要的结果，呵呵。
    那么如何映射，关键在乎DWR.xml的配置了。
    DWR还可以和Spring整合，我的尊师说过，他们俩整的最好了，呵呵。其配置也挺简单的。以下配置信息引用老师的总结：
1、当JSP页面的Ajax调用业务层方法时，业务需要DAO层对象，而DAO层对象我们是通过spring来注入的，如果我们直接用DWR暴露给js的对象去调用业务的方法时，就会出现错误。因为业务类DAO对象是空的。这时我们就要通过DWR整合的SPRING的形式来加载对象。
2、要用到SRPING的东西，就是必须加载SPRING的配置文件（applicationContext.xml），在这里我们通过服务启动时去加载，所以要配置修改web.xml文件。在原来的基础上添加以下配置：

 <!--- 这个就是用来加载SPRING配置文件的---->
 <context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/classes/applicationContext.xml
		</param-value>
</context-param>
<listener>
	<listener-class>
		  org.springframework.web.context.ContextLoaderListener
	</listener-class>
</listener>

<!--- 这个是DWR本身的配置--->
<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>

3、SPRING 的配置不变，一样给业务类注入DAO对象

    <bean id="bidbiz" class="com.byz.bizimpl.BidImpl">
	    <property name="biddao">
	       <ref local="BidDAO"/>
	    </property>
	    <property name="goodsdao">
			<ref local="GoodsDAO" />
		</property>
		<property name="userdao">
			<ref local="UsersDAO" />
		</property>
	</bean>

4、DWR配置文件配置，这时我们需要将原先的creator="new" DWR去实例对象的，现在要改为creator="spring" 由spring注入进来。 Dwr这有个参数 <param name="beanName" value="spring对象"/> 这个可以将对象接收到。

<?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="BidImpl" creator="spring"
			scope="application">
			<!-- <param name="class" value="com.byz.bizimpl.BidImpl" /> -->
			<!-- 将Spring中的对象给到参数 -->
			<param name="beanName" value="bidbiz" /> 
			<include method="add" />
		</create>
	</allow>
	<!-- 参数集合配置 -->
	<signatures>
		<![CDATA[ 
             import java.util.List;
             com.byz.bizimpl.BidImpl;
             BidImpl.add(List);
        ]]>
	</signatures>
</dwr>

这就是我眼里的AJAX，希望能给大家带来一些帮助。