跳蚤的小窝:)

 
 

常用链接

  • 我的随笔
  • 我的评论
  • 我的参与
  • 最新评论

留言簿(1)

  • 给我留言
  • 查看公开留言
  • 查看私人留言

随笔分类

  • AJAX (rss)
  • Flex(1) (rss)
  • J2EE (rss)
  • J2ME (rss)
  • JavaScript(1) (rss)

随笔档案

  • 2009年2月 (8)

文章分类

  • ajax (rss)
  • J2EE (rss)
  • JS框架 (rss)

Flex

  • code-examples
  • Flex Air中文资源
  • samples
  • 组件

Web前端

  • Ajax全面
  • Web前端

英语学习

  • ICIBA沙龙

搜索

  •  

最新评论

  • 1. re: 使用JQuery+Struts1.3实现JSON的post传递
  • 11
  • --444
  • 2. re: jQuery对象和DOM对象【jQuery开发注意点(一)】
  • 也是刚看了两天,就遇到这个问题了,我是google过来的。谢谢分亨
  • --xinsiyu
  • 3. re: javascript DOM操作基础
  • 不错不错,《javascript高级程序设计》这本书很简单,js用过不少,但对于DOM的若干个操作还是没有完全记住。。。惭愧啊
  • --seasun
  • 4. re: jQuery对象和DOM对象【jQuery开发注意点(一)】
  • 阅过,tks
  • --shuttle
  • 5. re: JQuery 1.3 API中文参考文档
  • jquery
  • --lele

阅读排行榜

  • 1. 使用JQuery+Struts1.3实现JSON的post传递(3487)
  • 2. javascript DOM操作基础(2323)
  • 3. jQuery对象和DOM对象【jQuery开发注意点(一)】(1884)
  • 4. JQuery 1.3 API中文参考文档(892)
  • 5. javascript DOM 遍历(631)

评论排行榜

  • 1. javascript DOM操作基础(2)
  • 2. jQuery对象和DOM对象【jQuery开发注意点(一)】(2)
  • 3. JQuery 1.3 API中文参考文档(1)
  • 4. 使用JQuery+Struts1.3实现JSON的post传递(1)
  • 5. Flex中操作JavaScript(0)

Powered by: 博客园
模板提供:沪江博客
BlogJava | 首页 | 发新随笔 | 发新文章 | 联系 | 聚合 | 管理

2009年2月20日

Flex中操作JavaScript
Flex 最终会生成 swf 文件以 ActiveX 的方式部署网页上( html,jsp,asp,aspx 等),由于 ActiveX 是一个独立体它并不能直接获取页面的元素数据,同样 asp,aspx 等服务端代码也不对它进行操作,这样 Flex 的信息交互就变得很孤立。在 Web 用户程序中不同页的信息交换是非常重要,通常这些信息明确下一个页面应该做什么;如果 Flex 得不到这些信息那么 Flex 在实际应用中就大打折扣!于是到网上找一下资料,发现自己的担心是多余的。 Flex 提供相关对象可以灵活地和当前网页的 JavaScript 相互进行灵活的调用。那就是说可以通过 JavaScript 调用 Flex 内部的方法,同样在 Flex 时也可以直接调用页面上相关的 JavaScript 方法。

       Flex 提供了 ExternalInterface 对象用于和 JavaScript 进行互操作。对象分别提供了 addCallBack 和 Cell 方法:

addCallBack 方法

用于注册一个内部方法用于给 JavaScript 调用。

 

1function callMe(name:String):String { 
2
3    return name+":" + txtUserName.text ; 
4
5}
 
6

 

实际上 JavaScript 是不能直接调用 Flex 的内部方法的,那如何使 JavaScript 能够调用呢?

首先通过 ExternalInterface.addCallback("myFunction", callMe); 的方法进行注册,可以把方法放在 Applicaion. Initialize 的事件中。

方法第一个参数是:外部调用名称就是 JavaScript 调用的方法名称。

方法第二个参数是:代理执行 Flex 的内部函数。

JavaScript 通过以下方式调用 :

 

1function Button1_onclick() { 
2
3  alert(document.all(' 相关 ActiveX 控件名称 ').myFunction('bbq')); 
4
5  }
 
6

 

Call 方法

用于调用当前页面里的 JavaScript 方法 .

 1<script id ="clientEventHandlersJS" language ="javascript"> 
 2
 3function getuserid() 
 4{ 
 5
 6     return 'henry' ; 
 7
 8}
 
 9
10</script > 
11

在 Flex 里可以通过以下方式调用 getuserid() 方法。

var id:String= ExternalInterface.call("getuserid");

Alert.show(id);

    

Flex 在和 JavaScript 整合这方面做得非常好,你并不需要花费太多的工作就能够实现和页面数据元素进行数据交换;同样也可以调用已经有的 ajax 功能。

接下来学习的是不同页面的 Flex 应用实例如何共享信息。

最后还是老话一句,有兴趣的朋友多了解一下 Flex.

Flex 的 SDK 帮助文件写得还挺详细的,基本上能找到使用的方法

posted @ 2009-02-20 16:37 跳蚤 阅读(295) | 评论 (0) | 编辑 收藏
 
使用JQuery+Struts1.3实现JSON的post传递
    
json格式的数据传递已经红遍全球,JQuery的AJAX功能自然也可以对其进行进行传递。但是一般的传递都是使用GET方式进行的传递,如果内容不多,数据量不大那还是不错的。但是如果数据量比较大,使用get传递就不太适合,我们自然而然的想到了POST传递。

    网上很多的说法都是使用流来读取请求流中的POST过来的数据。对于使用SSH越来越多的今天,写个doPost方法来接收数据其实并不合适,而我们更多的使用的是Action来进行数据的接收,那Struts中的action如何收到post过来的数据呢?使用网上的流的说法,告诉你,你是接收不到的,具体如何做,往下看。

    先说下工具:JQuery1.2.6+json2.js+Struts1.3+org.son包+jdk1.5

    然后我们来看下页面的内容:

 

 1<%@ page language="java" contentType="text/html; charset=UTF-8"%>  
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 3<html>  
 4    <head>  
 5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 6        <mce:script type="text/javascript" src="javascript/jquery-1.2.6.min.js" mce_src="javascript/jquery-1.2.6.min.js"></mce:script>  
 7        <mce:script type="text/javascript" src="javascript/json2.js" mce_src="javascript/json2.js"></mce:script>  
 8        <mce:script type="text/javascript" src="javascript/tt.js" mce_src="javascript/tt.js"></mce:script>  
 9        <title></title>  
10    </head>  
11    <body>  
12    <form>  
13    <div>  
14        <input type="text" id="roleId" value="112233" name="roleId" />  
15        <label><input type="checkbox" value="0" checked="checked" name="type" /></label>  
16        <label><input type="checkbox" value="1" checked="checked" name="type" /></label>  
17        <select id="beginYear" name="beginYear"><option value="2008">2008</option></select>  
18        <select id="beginWeek" name="beginWeek"><option value="51">51</option></select>  
19        <select id="endYear" name="endYear"><option value="2009">2009</option></select>  
20        <select id="endWeek" name="endWeek"><option value="2">2</option></select>  
21        <input type="text" id="productList" value="123,124,125,126" name="productList" />  
22        <select id="dealerType" multiple="multiple" name="dealerType">  
23            <option value="">all</option><option value="1">mobo</option><option value="2">sales</option>  
24        </select>  
25        <a href="#" mce_href="#" id="go">text</a>  
26    </div>  
27    </form>  
28    </body>  
29</html>


页面元素不算太少,要提取里面的内容,并将他们传递到action中。下面是tt.js的内容

 1jQuery(function($) {   
 2    $("#go").click(function(){   
 3        var jsonTest = {   
 4            roleId:$("#roleId").val(),   
 5            type:$("label input:checked").map(function(){   
 6              return $(this).val();   
 7            }
).get(),   
 8            beginYear:$("#beginYear").val(),   
 9            beginWeek:$("#beginWeek").val(),   
10            endYear:$("#endYear").val(),   
11            endWeek:$("#endWeek").val(),   
12            productList:$("#productList").val().split(','),   
13            dealerType:$("#dealerType").val().join(',')   
14        }
;   
15        alert(JSON.stringify(jsonTest));   
16        $.ajax({   
17            type: "POST",   
18            url: "json.do?method=list",   
19            data:{newData:JSON.stringify(jsonTest)},   
20            dataType:"json",   
21            success:function(){   
22                alert(1);   
23            }
   
24        }
);   
25    }
);   
26}
);  

执行后,会出现个alert框,里面显示了将对象转换成json后的字符串,如图:

从图上可以看出,我们需要的内容都已经成为了json格式的。下面就会执行JQuery的ajax方法了,Data属性的内容嘛,当然就是转换过的jsonTest了,但是,最重要的东西也出现了:我将转换后的jsonTest又进行了包装,并且是包装在了一个key为newData的json字符串里面了。

各位朋友们,你们在action中取不到流,并不是json字符串没有传递过来,而是,你找错地方了。如果不相信,你可以写上你自己的action,然后在action中写上以下代码:

 

1Enumeration<String> e =  request.getParameterNames();   
2while(e.hasMoreElements()){   
3    System.out.println(e.nextElement());   
4}
 

怎么样,是不是发现传过来的json安安静静的出现在了控制台上?对的,它是以数据的name传过来的,这也就是为何需要再对其进行一次包装的原因了。下面的东西嘛,就好办了。在action中使用request.getParament即可取到心仪已久的json格式字符串了。

怎么?你认为是get方式传过来的?怕浏览器长度限制?那你自己去试试看吧,我试过20几W的长度下,FF和IE都没有问题,难道你的数据还能再长?没事,多长都可以的


posted @ 2009-02-20 15:28 跳蚤 阅读(3487) | 评论 (1) | 编辑 收藏