语源科技BlogJava-跳蚤的小窝:)

Flex中操作JavaScript

跳蚤 — Fri, 20 Feb 2009 08:37:00 GMT

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
10script >
11

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

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

Alert.show(id);

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

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

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

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

跳蚤 2009-02-20 16:37 发表评论

使用JQuery+Struts1.3实现JSON的post传递

跳蚤 — Fri, 20 Feb 2009 07:28:00 GMT

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"%>
2DOCTYPE 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">2008option>select>
18        <select id="beginWeek" name="beginWeek"><option value="51">51option>select>
19        <select id="endYear" name="endYear"><option value="2009">2009option>select>
20        <select id="endWeek" name="endWeek"><option value="2">2option>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="">alloption><option value="1">mobooption><option value="2">salesoption>
24        select>
25        <a href="#" mce_href="#" id="go">texta>
26    div>
27    form>
28    body>
29html>

页面元素不算太少，要提取里面的内容，并将他们传递到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都没有问题，难道你的数据还能再长？没事，多长都可以的

跳蚤 2009-02-20 15:28 发表评论

javascript DOM操作基础

跳蚤 — Tue, 17 Feb 2009 07:01:00 GMT

摘要: 经常用到javascript对dom，今天在网上找了篇文章，作者整理了《javascript高级程序设计》中关于DOM操作基础部分的内容来源：不详一、DOM基础 1.节点(node)层次 Document－－最顶层的节点，所有的其他节点都是附属于它的。 DocumentType－－DTD引用（使用语法）的对象表现形式，它不能包含子节点。 Do... 阅读全文

跳蚤 2009-02-17 15:01 发表评论

javascript DOM 遍历

跳蚤 — Tue, 17 Feb 2009 06:57:00 GMT

javascript DOM 遍历

以下一系列的辅助函数可以帮助您，他们能取代标准的previousSibling，nextSibling，firstChild，lastChild，parentNode；

1//------------------------DOM 遍历，如果元素没找到则返回null-----------------------//
2    //---查找相关元素的前一个兄弟元素---//
3    function prev(elem){
4        do{
5            elem=elem.previousSibling;
6        }while(elem&&elem.nodeType!=1);
7        return elem;
8    }
9    //---查找相关元素的下一个兄弟元素---//
10    function next(elem){
11        do{
12            elem=elem.nextSibling;
13        }while(elem&&elem.nodeType!=1);
14        return elem;
15    }
16    //---查找第一个子元素的函数---//
17    function first(elem){
18        elem=elem.firstChild;
19        return elem && elem.nodeType!=1 ?next(elem):elem;
20    }
21    //---查找最后一个子元素的函数---//
22    function last(elem){
23        elem=elem.lastChild;
24        return elem && elem.nodeType!=1 ?prev(elem):elem;
25    }
26    //---查找父级元素的函数---//
27    //num是父级元素的级次，parent(elem,2)等价于parent(parent(elem))
28    function parent(elem,num){
29        num=num||1;
30        for(var i=0; i<num; i++){
31            if(elem!=null){
32                elem=elem.parentNode;
33            }
34        }
35        return elem;
36    }

调用案例：first(document.getElementById("everywhere")).style.backgroundColor="#ff0000";

跳蚤 2009-02-17 14:57 发表评论

IE的条件注释【转载】

跳蚤 — Tue, 17 Feb 2009 06:27:00 GMT

条件注释是IE特有的一种功能，能对IE系列产品进行单独的XHTML代码处理，注意，主要是针对XHTML,而非CSS。

条件注释功能非常强大，可以进行true和false判断，例如：

程序代码

条件注释能被IE判断是什么版本的浏览器，并在符合条件的情况下显示其中的内容，从IE5.0到7.0都支持注释功能，而且版本号精确到小数点后4位：

程序代码

IE条件注释还支持感叹号非操作：

程序代码

并且支持前缀，用于判断更高版本或是更低版本：

程序代码

这里的gt全称为greater than表示当前条件版本以上版本，但不包含当前版本。

还有其它几个前缀：

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

跳蚤 2009-02-17 14:27 发表评论

JQuery 1.3 API中文参考文档

跳蚤 — Tue, 17 Feb 2009 06:26:00 GMT

感谢译者:)
http://www.css88.com/demo/jQuery/jQueryAPI-090119/index.html

跳蚤 2009-02-17 14:26 发表评论

jQuery对象和DOM对象【jQuery开发注意点(一)】

跳蚤 — Tue, 17 Feb 2009 06:23:00 GMT

学习jQuery已经3天了，总结一些注意的地方供给和我一样的初学者

jQuery对象和DOM对象；这是我第一个碰到的问题。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象；

$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的，是正确的，但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。

在说一个例子：就是this，我在写jQuery的时候经常这样写：this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象，而.attr("src","test.jpg") 是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如$(this).attr("src","test.jpg");

1.DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

2.jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0];    //DOM对象

alert(v.checked)   //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0);   //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

跳蚤 2009-02-17 14:23 发表评论

我的jQuery学习笔记

跳蚤 — Tue, 17 Feb 2009 06:18:00 GMT

摘要: jQuery学习笔记，共享+备份一下:) 中间主要是用自己的方式予以记录，看不明白的地方还请见谅，也欢迎向我提出:P 1/**//****************************** 2 * jQuery学习笔记 3 *&... 阅读全文

跳蚤 2009-02-17 14:18 发表评论