傅老师课堂：Ajax高级应用之DWR原理解析（一）

开篇一笑：一男女朋友正卿卿我我，男想进一步。男：“你是处女吗？”女：“嗯，你是处男吗？”男：“当然了！”女：“这是第一次，我怕疼，还是不要了吧。”男：“我会很小心的，不会疼。”女：“你们每个男人每次都这样说，结果我每次都很疼…”男：“那是因为他们都是新手~”

注：此篇文章适合于有一定DWR基础的开发人员
上课啦，上课啦，后面那位男同学别睡觉啦，哈喇子都流出来了，女同学都往前面坐，让老师看的更清楚点，哦，不对，是让你们看的更清楚点，因为这节课的内容非常重要。老师从娘胎里出来的时候就一直强调万变不离其中，只要掌握了原理，那么一切的一切就尽在你的掌握中，这位漂亮的女同学，你说是与不是呢？！
好了，言归正传，大家在学习DWR的过程中，肯定都会有两个疑问：自定义的js文件到底哪来的？javascript中怎么能够调用Java方法呢？
别着急，老师今天来讲课就是为了给大家解答这两个问题的。这位女同学不要这么崇拜的看着老师。
我们都知道要在前台页面中使用DWR，至少需要引入三个js文件：

<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript' src='../dwr/interface/demo.js'></script>

前面两个都是DWR自带的js文件，保存在dwr.jar中，其中engine.js是引擎文件必须加载，util.js是工具文件可以选择加载。demo.js“文件”实际上并不能称得上是一个真正的物理文件，因为它根本不存在，它只是在配置文件dwr.xml中进行了配置且与某个Java类关联。那么这个js文件在页面加载的时候是怎么来的？而我们又是怎么能够使用它里面的方法呢？
先看看DWR在web.xml中的配置：

<servlet>
     <servlet-name>dwr-invoker</servlet-name>
     <servlet-class>
         org.directwebremoting.servlet.DwrServlet
     </servlet-class>
</servlet>
<servlet-mapping>
     <servlet-name>dwr-invoker</servlet-name>
     <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

只要是路径为/dwr/*的请求，必然都会经过DwrServlet类，那么我们可以推测demo.js是DwrServlet给的，怎么给？只能是通过文件流的方式往前台输出，大家也可以在地址栏里直接访问../dwr/interface/demo.js查看文件内容。
那么DwrServlet是如何输出文件流的呢？接下来我们可以做一个简单的例子测试一下。
新建Servlet类DwrServlet.java

package com.dwr;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DwrServlet extends HttpServlet {

 @Override
 public void doGet(HttpServletRequest request,HttpServletResponse response)
   throws ServletException,IOException {
  doPost(request,response);
 }

 @Override
 public void doPost(HttpServletRequest request,IOException {
  ServletOutputStream out = null;
  try {
   out = response.getOutputStream();
   byte[] b = "function test(){alert('OK')}".getBytes();
   out.write(b);
   out.flush();
   out.close();
  } catch (IOException e) {
   e.printStackTrace();
  }
 }
}

在web.xml中配置DwrServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
 
  <servlet>
      <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>
            com.dwr.DwrServlet
        </servlet-class>
  </servlet>
  <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
   </servlet-mapping>
</web-app>

前台页面index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My DWR</title>
    <Meta http-equiv="pragma" content="no-cache">
    <Meta http-equiv="cache-control" content="no-cache">
    <script type="text/javascript" src="dwr/interface/demo.js"></script>
  </head>
  <body>
    <input type="button" value="测试" onclick="test()"><br>
  </body>
</html>

访问上面的index.jsp页面，点击按钮“测试”，可以看到弹出alert对话框“OK”。你和你的小伙伴是不是都惊呆了？！
第一个问题算是解决完了，这节课就到这里，下节课老师继续给同学们解答第二个问题（javascript中怎么能够调用Java方法呢？），另外，女同学要是还有疑惑，下课后老师给你们单独进行辅导，男同学就自个琢磨吧。下课。

注意：本文主要是通过最简单的方式去解释DWR的原理，所以在代码实现上跟DWR有很大的不同，请大家不要误解。

原文链接：https://www.f2er.com/ajax/166052.html

傅老师课堂：Ajax高级应用之DWR原理解析（一）

猜你在找的Ajax相关文章