`
luciesfly
  • 浏览: 70651 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Ext Direct

EXTCometStrutsDWRAjax 
阅读更多
Ext.direct可能是ExtJS 3.0版本比较热门的特性，现在不少人都在关注。Ext.direct，JavaScript中称之为Comet 和 Reverse Ajax，对Java程序来说，和JMS机制一样，就是将服务器端信息推送到客户端，JMS推送到Java应用，而Ext.direct推送到是客户端浏览器。如何向在浏览器端实现订阅，通常是通过Applet，ActiveX和Flash实现，当然ExtJS是通过一个flash组件完成的，这个也是目前实现Comet的通行做法。Ext.direct特性对Web开发帮助非常大，之前要实现信息实施更新，基本都是定时刷新，而Ext.direct和 Comet技术，可以实现消息订阅和推送，那么这种实时消息提醒就非常方便，如聊天室，监控系统，耗时较长的操作等，这些实现起来就非常简单啦。

感觉EXT3.x增加的最好的功能之一就是这个Ext.Direct了，它实现了类似于DWR的功能，把方法暴露在服务端以便直接在前端像类一样使用后台的方法，可以使用户不再关注ajax的request和response的处理了。。而且很好地直接使用了json格式，不需要我们自己来转换，不过现在为止除了和EXT框架整合比较方便意外，我觉得其他功能还有待改善，并不能替代DWR在JAVA-AJAX之间使用的地位，嘛...毕竟是新东西，值得学习一下！



1.去下载源代码，EXT官方并没有对java的支持。。。很囧，php都支持了啊。。。好吧找到google code的一个开源项目来支持java，下载地址:http://code.google.com/p/directjngine/downloads /list 导入里面的lib包里的jar以及最关键的deliverables/directjngine.1.2.jar



2.可以写个java类了:

TestDirect.java:
Java代码

   1. package com.xuyi.web.direct; 
   2.  
   3. import com.softwarementors.extjs.djn.config.annotations.DirectMethod; 
   4. import com.xuyi.vo.User; 
   5.  
   6. /**
   7.  * @author xuyi
   8.  *
   9.  */ 
  10. public class TestDirect { 
  11.     //注意注解 
  12.     @DirectMethod 
  13.     public String testData(String data){ 
  14.         return data; 
  15.     } 
  16.      
  17.     @DirectMethod 
  18.     public User testUser(){ 
  19.         User  user = new User(); 
  20.         user.setUsername("xuyi"); 
  21.         user.setPassword("123"); 
  22.         user.setAge(28); 
  23.         return user; 
  24.     } 
  25.      
  26. } 

package com.xuyi.web.direct;

import com.softwarementors.extjs.djn.config.annotations.DirectMethod;
import com.xuyi.vo.User;

/**
* @author xuyi
*
*/
public class TestDirect {
//注意注解
@DirectMethod
public String testData(String data){
return data;
}

@DirectMethod
public User testUser(){
User  user = new User();
user.setUsername("xuyi");
user.setPassword("123");
user.setAge(28);
return user;
}

}

3.用到的User对象:

User.java:
Java代码

   1. package com.xuyi.vo; 
   2.  
   3. /**
   4.  * @author xuyi
   5.  *
   6.  */ 
   7. public class User { 
   8.      
   9.     private String username; 
  10.      
  11.     private String password; 
  12.      
  13.     private int age; 
  14.  
  15.     public int getAge() { 
  16.         return age; 
  17.     } 
  18.  
  19.     public void setAge(int age) { 
  20.         this.age = age; 
  21.     } 
  22.  
  23.     public String getPassword() { 
  24.         return password; 
  25.     } 
  26.  
  27.     public void setPassword(String password) { 
  28.         this.password = password; 
  29.     } 
  30.  
  31.     public String getUsername() { 
  32.         return username; 
  33.     } 
  34.  
  35.     public void setUsername(String username) { 
  36.         this.username = username; 
  37.     } 
  38.      
  39.      
  40. } 

package com.xuyi.vo;

/**
* @author xuyi
*
*/
public class User {

private String username;

private String password;

private int age;

public int getAge() {
return age;
}

public void setAge(int age) {
this.age = age;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}


}

4.OK,后台准备就绪，开始进行配置吧，先在web.xml里面进行相关的配置，这个不用多说，DWR也一样要配servlet,具体看注释吧:

web.xml中加入如下代码:
Xml代码

   1. <servlet> 
   2.         <servlet-name>action</servlet-name> 
   3.         <servlet-class> 
   4.             org.apache.struts.action.ActionServlet 
   5.         </servlet-class> 
   6.         <init-param> 
   7.             <param-name>config</param-name> 
   8.             <param-value> 
   9.                 /WEB-INF/conf/struts/struts-config.xml 
  10.             </param-value> 
  11.         </init-param> 
  12.         <init-param> 
  13.             <param-name>debug</param-name> 
  14.             <param-value>3</param-value> 
  15.         </init-param> 
  16.         <init-param> 
  17.             <param-name>detail</param-name> 
  18.             <param-value>3</param-value> 
  19.         </init-param> 
  20.         <load-on-startup>0</load-on-startup> 
  21.     </servlet> 
  22.  
  23.     <servlet> 
  24.         <servlet-name>DjnServlet</servlet-name> 
  25.         <servlet-class> 
  26.             com.softwarementors.extjs.djn.servlet.DirectJNgineServlet 
  27.         </servlet-class> 
  28.  
  29.         <init-param> 
  30.             <param-name>debug</param-name> 
  31.             <param-value>true</param-value> 
  32.         </init-param> 
  33.  
  34.         <init-param> 
  35.             <param-name>minify</param-name> 
  36.             <param-value>true</param-value> 
  37.         </init-param> 
  38.  
  39.         <init-param> 
  40.             <param-name>providersUrl</param-name> 
  41.             <param-value>djn/directprovider</param-value> 
  42.         </init-param> 
  43.  
  44.         <init-param> 
  45.             <param-name>batchRequestsMultithreadingEnabled</param-name> 
  46.             <param-value>false</param-value> 
  47.         </init-param> 
  48.  
  49.         <!-- api域： 对应下面的各个param-name的前缀，可以设置多个不同的域--> 
  50.         <init-param> 
  51.             <param-name>apis</param-name> 
  52.             <param-value>test</param-value> 
  53.         </init-param> 
  54.  
  55.         <!-- test.对应上面的域 test/用来安放其自动生成的js文件 --> 
  56.         <init-param> 
  57.             <param-name>test.apiFile</param-name> 
  58.             <param-value>test/test.js</param-value> 
  59.         </init-param> 
  60.  
  61.         <!-- test.对应上面的域 命名空间会在页面加载时候用上 --> 
  62.         <init-param> 
  63.             <param-name>test.apiNamespace</param-name> 
  64.             <param-value>Ext.xuyi</param-value> 
  65.         </init-param> 
  66.  
  67.         <!-- test.对应上面的域 类的具体包路径 --> 
  68.         <init-param> 
  69.             <param-name>test.classes</param-name> 
  70.             <param-value>com.xuyi.web.direct.TestDirect</param-value> 
  71.         </init-param> 
  72.  
  73.         <load-on-startup>1</load-on-startup> 
  74.     </servlet> 
  75.     <!-- 默认servlet路径 --> 
  76.     <servlet-mapping> 
  77.         <servlet-name>DjnServlet</servlet-name> 
  78.         <url-pattern>/djn/directprovider/*</url-pattern> 
  79.     </servlet-mapping> 

<servlet>
<servlet-name>action</servlet-name>
<servlet-class>
org.apache.struts.action.ActionServlet
</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>
/WEB-INF/conf/struts/struts-config.xml
</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>3</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>3</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>

<servlet>
<servlet-name>DjnServlet</servlet-name>
<servlet-class>
com.softwarementors.extjs.djn.servlet.DirectJNgineServlet
</servlet-class>

<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>

<init-param>
<param-name>minify</param-name>
<param-value>true</param-value>
</init-param>

<init-param>
<param-name>providersUrl</param-name>
<param-value>djn/directprovider</param-value>
</init-param>

<init-param>
<param-name>batchRequestsMultithreadingEnabled</param-name>
<param-value>false</param-value>
</init-param>

<!-- api域： 对应下面的各个param-name的前缀，可以设置多个不同的域-->
<init-param>
<param-name>apis</param-name>
<param-value>test</param-value>
</init-param>

<!-- test.对应上面的域 test/用来安放其自动生成的js文件 -->
<init-param>
<param-name>test.apiFile</param-name>
<param-value>test/test.js</param-value>
</init-param>

<!-- test.对应上面的域 命名空间会在页面加载时候用上 -->
<init-param>
<param-name>test.apiNamespace</param-name>
<param-value>Ext.xuyi</param-value>
</init-param>

<!-- test.对应上面的域 类的具体包路径 -->
<init-param>
<param-name>test.classes</param-name>
<param-value>com.xuyi.web.direct.TestDirect</param-value>
</init-param>

<load-on-startup>1</load-on-startup>
</servlet>
<!-- 默认servlet路径 -->
<servlet-mapping>
<servlet-name>DjnServlet</servlet-name>
<url-pattern>/djn/directprovider/*</url-pattern>
</servlet-mapping>

5.页面使用：

test_direct_1.jsp：
Html代码

   1. <%@ page language="java" pageEncoding="UTF-8"%> 
   2. <html> 
   3.     <head> 
   4.         <title>Ext3 Direct功能示例</title> 
   5.         <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script> 
   6.         <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script> 
   7.         <script type="text/javascript" src="${ctxPath}/test/test.js"></script> 
   8.     </head> 
   9.     <body> 
  10.         <script type="text/javascript"> 
  11.             //Register provider 
  12.             //use namespace Ext.xuyi 
  13.             Ext.xuyi.REMOTING_API.enableBuffer = 0; 
  14.             Ext.Direct.addProvider(Ext.xuyi.REMOTING_API); 
  15.             //hello function 
  16.             hello=function(){ 
  17.                 TestDirect.testData("hello,Ext Direct!",function(data){ 
  18.                     console.log(data); 
  19.                     alert(data); 
  20.                 }); 
  21.             } 
  22.             //user function 
  23.             user=function(){ 
  24.                 TestDirect.testUser(function(data){ 
  25.                     console.log(data); 
  26.                     alert("username:" + data.username+" password:"+data.password+" age:"+data.age); 
  27.                 }); 
  28.             } 
  29.              
  30.         </script>      
  31.         <input type="button" value="hello" onclick="hello();"> 
  32.          
  33.         <input type="button" value="user" onclick="user();"> 
  34.  
  35.     </body> 
  36. </html> 

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ext3 Direct功能示例</title>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="${ctxPath}/test/test.js"></script>
</head>
<body>
<script type="text/javascript">
//Register provider
//use namespace Ext.xuyi
  Ext.xuyi.REMOTING_API.enableBuffer = 0;
  Ext.Direct.addProvider(Ext.xuyi.REMOTING_API);
  //hello function
  hello=function(){
  TestDirect.testData("hello,Ext Direct!",function(data){
  console.log(data);
alert(data);
});
  }
  //user function
  user=function(){
  TestDirect.testUser(function(data){
  console.log(data);
alert("username:" + data.username+" password:"+data.password+" age:"+data.age);
});
  }

</script>
<input type="button" value="hello" onclick="hello();">

<input type="button" value="user" onclick="user();">

</body>
</html>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    七步实现directjngine、Ext Direct调用Java服务器端方法 directjngine官方demo精简版

    DirectJNgine与Ext Direct是两种技术，它们主要用于在Web应用程序中实现客户端（通常是JavaScript）与服务器端（通常是Java）的高效通信。本教程将通过七个步骤，介绍如何使用DirectJNgine和Ext Direct来调用Java...

    Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip

    Ext.Direct.Mvc是一个专门为ASP.NET MVC框架设计的库，它实现了Ext Direct协议，使得前端的Ext JS框架能够与后端的ASP.NET MVC控制器进行高效、直接的通信。Ext Direct是一种JavaScript和服务器之间通信的技术，它...

    Ext Direct Spring 参考手册

    ### Ext Direct Spring 参考手册知识点解析 #### 引言 《Ext Direct Spring 参考手册》是一份针对ExtDirectSpring框架使用的详细指南。该框架主要用于整合ExtJS前端框架与Spring后端服务，通过简化前后端通信的...

    extdirectspring:使用Java和Spring实现Ext Direct协议

    该库支持Ext Direct的所有功能： 带有注释的配置简单的远程通话命名参数方法批量表格发布带有文件上传的表单发布轮询查看正在使用的库： : 玛文可从Central Maven存储库中获得ExtDirectSpring。 &lt;dependency&gt; ...

    ext-direct-pack.zip

    Ext Direct 是一种Web应用程序开发中的通信技术，它允许前端JavaScript代码与后端服务器进行高效、结构化的通信。这个"ext-direct-pack.zip"压缩包显然包含了针对不同后端平台的实现，包括DotNet（.NET框架）、PHP、...

    在.NET中使用Ext.Direct示例源代码

    Ext.Direct是一种技术，它允许前端JavaScript库，如Ext JS，与后端服务器进行高效的数据通信。这个技术通过JSON（JavaScript Object Notation）格式传递数据，提供了API调用的简便方式，减少了传统AJAX请求的复杂性...

    官网 Ext direct包中.NET版的问题

    在探讨“官网 Ext direct 包中 .NET 版的问题”时，我们会涉及到几个关键知识点。首先是 Ext Direct 技术，接着是它在 .NET 环境中的应用问题，以及如何解决这些由于数据类型不匹配造成的问题。 Ext Direct 是由 ...

    在.NET中使用Ext.Direct的Router

    Ext.Direct是一种由Sencha公司开发的技术，用于在客户端（通常是JavaScript）和服务器端（如.NET应用程序）之间进行高效、直接的数据交互。它提供了一种结构化的API调用方式，简化了前端与后端的通信，使得开发人员...

    Ext.Direct

    Ext.Direct 是一种技术，它允许前端的 JavaScript 与后端的服务器端脚本进行高效、直接的通信。这种通信方式是基于 JSON（JavaScript Object Notation）格式，它简化了Ajax应用中的数据交互过程，减少了开发时间和...

    struts与ext集成

    EXT Direct是EXT和服务器之间通信的一种高效方式，它允许直接调用服务器端的方法，使得前后端的交互更为简洁。在Struts2中，需要使用ExtDirectResult来返回EXT Direct响应。 6. **数据库集成** Struts2可以通过...

    Laravel开发-ext-direct

    在本文中，我们将深入探讨如何使用Laravel框架进行Ext.Direct的开发。Laravel是一个流行的PHP框架，以其优雅的语法和强大的功能而受到开发者喜爱。Ext.Direct是ExtJS和Sencha框架中的一个特性，它允许前端JavaScript...

    Ext JS in Action, 2nd Edition

    Remote method invocation with Ext Direct Chapter 12. Drag-and-drop Part 3: Building an application Chapter 13. Class system foundations Chapter 14. Building an application Book Details Title: Ext JS...

    ext json struts 完整无错源码

    深入研究这些源码，你可以了解到如何配置 Struts 的 XML 配置文件，如何编写 Action 类，以及如何在 EXT 中定义组件和数据源，以及如何利用 EXT Direct 实现前后端通信。 总结来说，"ext json struts 完整无错源码...

    ext图片上传

    2. **异步上传**: 结合`Ext.Ajax`或`Ext Direct`实现非同步文件上传，提供更好的用户体验。 3. **预览功能**: 在用户选择文件后，可以利用File API在前端展示图片预览。 4. **自定义上传策略**: 你可以编写自定义的...

    ExtJS4 Direct Demo using JAVA

    - **Direct技术**：理解JSON-RPC和Ext Direct的工作原理，包括请求格式、响应处理以及如何在服务器端实现Direct服务。 - **Java Servlet和Filter**：Java Web开发的基础，用于处理HTTP请求和响应。 - **JSON**：...

    Ext培训教程(公司内部培训资料)

    2. **Proxy**：Store通过Proxy与服务器通信，Proxy可以配置为不同的类型，如HTTP（对应RESTful API）或Direct（EXT Direct）。 3. **Model**：定义数据结构和验证规则，与Store配合使用，简化数据操作。 4. **Form**...

    fcrepo-http-commons-4.0.0-beta-03.zip

    4. **EXT Direct Spring**：是一个 Java 和 Spring 的实现，将 EXT Direct 规范整合到 Spring MVC 中，便于使用 Spring 框架开发富客户端应用。 5. **开源软件**：这些项目遵循开源许可证，鼓励代码共享和协作，促进...

    EXT2.0API

    在EXT2.0 API中，远程数据访问通常通过Ajax或Direct技术实现。AJAX（Asynchronous JavaScript and XML）允许异步与服务器通信，更新部分页面而无需刷新整个页面。EXT的Ajax API提供了一套完整的请求和响应处理机制，...

Magicbox
Global site tag (gtag.js) - Google Analytics