BlogJava-生活源于奋斗不息-随笔分类-Javascript

IE中Js执行的一个Bugs - document.getElementsByName()

姜利阳 — Tue, 19 Feb 2008 08:31:00 GMT

当执行如下代码时：点击输入框时 IE弹出0， Firefox弹出1，Opera弹出1
显然IE在执行document.body.appendChild()语句后并没有刷新name为("abc_name")的元素列表

<html>
<head>
<script>
    window.onload = function()
    {
        var input = document.createElement("input");

        input.name="abc_name";

        input.onclick = function()
        {
            alert(document.getElementsByName("abc_name").length);
        }

        document.body.appendChild(input);
    }
script>
head>

<body>
fasd
body>
html>

姜利阳 2008-02-19 16:31 发表评论

Ajax 前进后退及书签功能的第三方框架RSH

姜利阳 — Wed, 21 Nov 2007 23:54:00 GMT

RSH (Really Simple History)

能够解决Ajax中不能前进，后退及没有书签的困扰

利用隐藏的Iframe，并结合锚点来模拟前进后退操作

下载地址：http://code.google.com/p/reallysimplehistory/

姜利阳 2007-11-22 07:54 发表评论

常用Js加密，编码算法整理

姜利阳 — Fri, 09 Nov 2007 22:57:00 GMT

摘要: 一：UTF8编码函数 function URLEncode(Str){ if(Str==null||Str=="") return ""; var newStr=""; function toCase(sStr){ ... 阅读全文

姜利阳 2007-11-10 06:57 发表评论

IE下的HTML，JS，CSS 开发调试工具(IE Developer Toolbar)

姜利阳 — Thu, 08 Nov 2007 13:43:00 GMT

IE Developer Toolbar

截图：

微软开发的，下载地址：http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038

不过相对与Firefox下的FireBug，功能很少

姜利阳 2007-11-08 21:43 发表评论

极强的页面调试工具 - FireBug

姜利阳 — Fri, 02 Feb 2007 15:01:00 GMT

FireFox中的工具

Firefox最新版下载地址: http://www.mozilla.org.cn/

Firebug最新版下载地址: https://addons.mozilla.org/firefox/1843/

姜利阳 2007-02-02 23:01 发表评论

Javascript中的事件监听与call方法

姜利阳 — Thu, 01 Feb 2007 04:55:00 GMT

当我们对某一个元素绑定监听方法时,想传一个callback函数,即监听后的处理函数
我们可以用传一个函数的句柄(引用),然后调用这个句柄(引用)的call方法.即可达到目的

1 < body >
2 < script >
3      var callback = function (name , invoteTime)
4      {
5         alert(name + " |调用时间是: " + invoteTime);
6     }
7
8      var TestObject = function ()
9      {
10          // 定义这个对象相应的element
11          var e = null ;
12
13          this .addClickListener = function (name , callback)
14          {
15             e.onclick = function ()
16              {
17                  // 如果有参数,还可以传参数 , call的第一个参数预留:arguments , 这里面我们可以用null , 从第二个开始
18                 callback.call( null , name , new Date());
19             }
20         }
21
22          var init = function ()
23          {
24              // 这里仅做个测试, 本应该按规范来写, 如: e.id = 'test'; e.style.width = '100px'
25             e = document.createElement( " " + name + " ' style='width:100px; height:100px; background:gray; border:1px solid red'> " );
26             document.body.appendChild(e);
27         }
28
29         init();
30     }
31
32      var testObject1 = new TestObject();
33     testObject1.addClickListener( " site120 " , callback);
34
35      var testObject2 = new TestObject();
36     testObject2.addClickListener( " afd " , callback);
37 script >
38 body >
39

姜利阳 2007-02-01 12:55 发表评论

去除超链接中的虚框

姜利阳 — Tue, 30 Jan 2007 14:29:00 GMT

只要一句话：
之前我们可以在每一个中加入，　onFosuc = this.blur(); ,
但如果我们想去除所有的超链接的虚框　，　则可以之么做.

也可以利用htc文件加入a.style.behavior属性.如：

在js文件中写入下面语句

姜利阳 2007-01-30 22:29 发表评论

关于Javascript中访问控制的机制

姜利阳 — Tue, 30 Jan 2007 14:21:00 GMT

Javascript也是一种OO语言，它也有访问控制机制
public 成员
private 成员

如下

1 < script type = " text/javascript " >
2      var People = function (name)
3      {
4          var name = name;
5
6          this .speek = function ()
7          {
8              // 这public里面，可以调用private的initSpeek方法
9             initSpeek();
10             alert( " 这是： " + name);
11         }
12
13          var initSpeek = function ()
14          {
15             alert( " initSPeek " );
16         }
17
18          var init = function ()
19          {
20              if (name == null )
21              {
22                 name = " name is null " ;
23             }
24              else
25              {
26                  // 注意，不能在private的init内调用public的speek方法
27                  try
28                  {
29                      this .speek();
30                 }
31                  catch (e)
32                  {
33                     alert(e.message);
34                 }
35
36             }
37         }
38
39         init();
40     }
41
42      var zhang = new People();
43     zhang.speek();
44      var li = new People( " 李四 " );
45     li.speek();
46 script >

从上面可以看出，
定义public方法，只需要将成员前加this.，　
定义private方法，　只需要将成员定义为var
注意：与Java不同的是，在Javascript 当中　公有成员可以访问私有成员，　但私有成员不能访问公有成员.

姜利阳 2007-01-30 22:21 发表评论

在Javascript或者Java当中判断润年【最最简单的】方法

姜利阳 — Mon, 15 Jan 2007 14:05:00 GMT

Javascript测试函数isSmoothYear()

1<script language="javascript">
2    var isSmoothYear = function(year)
3    {
4        return (new Date(year , 2 , 0).getDate() == 29);
5    }
6    alert("2004年是润年吗? \t" + isSmoothYear(2004));
7    alert("2005年是润年吗? \t" + isSmoothYear(2005));
8    alert("2006年是润年吗? \t" + isSmoothYear(2006));
9    alert("2007年是润年吗? \t" + isSmoothYear(2007));
10    alert("2008年是润年吗? \t" + isSmoothYear(2008));
11script>

Java代码同理

1import java.util.*;
2
3class TestDate
4{
5    public static void main(String[] args)
6    {
7        Date date = new Date(2004 , 2 , 0);
8        System.out.println(date.getDate());
9    }
10}
11

姜利阳 2007-01-15 22:05 发表评论

JSON技术(XML的挑战者)二-----(实战)

姜利阳 — Wed, 10 Jan 2007 16:27:00 GMT

下面我们就用JSON来解释服务端返回的数据
1) /data/test_json.js内容

1 {"peoples":[
2     {"name":"site120",    "email":"site120@163.com",    "sex":"男"},
3     {"name":"site120_2",    "email":"site120@163.com_2",    "sex":"男_2"}
4 ]
5 }

2) /test_json.html内容

1 <script src="/scripts/startup.js">script>
2 <script>
3     $import("cn.site120.ajax.*");
4     var url = "/data/test_json.js";
5     var callback = function(response)
6     {
7         var p = eval("(" + response.responseText + ")");
8         alert("length is : " + p.peoples.length);
9         alert(p.peoples[0].name);
10         alert(p.peoples[1].name);
11     }
12     httpLoad(url , callback , null , null);
13 script>

3) 打印结果
   length is : 2
   site120
   site120_2

-----------------------------------------------------------------------

可参考前一篇文章: Json技术一----- (原理)
JSON具体的数据规则,格式请参考官方网站http://www.json.org/

姜利阳 2007-01-11 00:27 发表评论

Json技术(XML的挑战者)一----- (原理)

姜利阳 — Wed, 10 Jan 2007 15:44:00 GMT

用JSON技术加快AJAX程序开发一篇不错的文章
-------------------------------------------------------------------------------------------------------------

2006-04-19 16:16:28

用JSON技术加快AJAX程序开发

朱先忠编译

一、引言

当微软把ActiveX XMLHTTP对象纳入到JavaScript的Internet Explorer实现中时，它实际上已经为Web应用程序的又一次革命（异步JavaScript+XML，简称AJAX）埋下了“火种”。今天，Firefox，Safari，Opera及其它浏览器都支持XMLHttpRequest对象，正是这些支持最终才导致了诸如colr.org，backpackit.com和maps.google.com等著名网站的产生。尽管这些网站（不止这些）所提供的应用程序运行于一种浏览器中，但是它们在行为和外观上却极类似于传统的桌面应用程序。

在AJAX技术中，在用户观看并与页面交互的同时（这正相应于AJAX中的“异步”部分），由页面中的JavaScript负责把数据请求发送到一个Web服务器。这些请求只是一些普通的HTTP请求，与浏览器用于页面（连同其中的任何图像，层叠式样表等内容）检索的HTTP完全相同。同时，XMLHttpRequest对象可以用于检索任何类型的数据，而不仅仅是XML类型。例如，JavaScript可以使用XMLHttpRequest来检索一个来自于Web服务器的普通文本文本并且把它的内容显示于一个表单中。

通过查找位于数据之前的“content-type”头部，XMLHttpRequest对象分析从Web服务器返回的数据的MIME类型。例如，如果这些数据的MIME类型是“text/plain”，那么你可以通过分析XMLHttpRequest对象的responseText属性来存取它；然而，如果其MIME类型为“text/xml”，那么XMLHttpRequest对象必须采取额外的措施：它要在返回的文档对象上运行一个XML分析器并在内存中构建一棵文档对象模型（DOM）树来描述该文档，并且还要使其可用于responseXML属性。然后，你才可以使用JavaScript的标准DOM方法在树中导航并检索元素、属性及位于该DOM树中的其它文本。

虽然XML是进行数据交换的标准方式，但是通常它不是最好的方式。尽管XML可以把结构和元数据添加到数据上，但是它使用了一种相当繁琐的方式。XML还有一种相对复杂的语法，因而需要一种分析器对之进行专门分析。在JavaScript中，XML必须被分析成一棵以备后用的DOM树。并且，一旦你构建了这棵DOM树，你还必须在其中导航以便创建相应的JavaScript对象或者以其它方式在你的客户端Web应用程序中使用XML数据。
幸好，你还有另外更好的可选方案。

二、JSON简介 javascript object notation

JavaScript对象标志，简称JSON，是一种描述数据的轻量级语法。JSON的优越性基于这样的事实：它本身就是JavaScript语言的一个子集。你会在后面看到这种特征的重要性。首先，让我们比较一下JSON和XML的原始语法。
XML和JSON都使用结构化方法来标记数据。例如，一个地址簿应用程序可能提供一个Web服务—它将以XML形式生成如下的地址卡片：

Sean Kelly
SK Consulting

kelly@seankelly.biz

kelly@seankelly.tv

+1 214 555 1212
+1 214 555 1213
+1 214 555 1214

1234 Main St
Springfield， TX 78080-1216

5678 Main St
Springfield， TX 78080-1316

http://seankelly.biz/

http://seankelly.tv/

而使用JSON来表达，上面的形式将变成如下模样：

{
"fullname": "Sean Kelly"，
"org": "SK Consulting"，
"emailaddrs": [
{"type": "work"， "value": kelly@seankelly.biz"}，
{"type": "home"， "pref": 1， "value": "kelly@seankelly.tv"}
]，
"teleph [
{"type": "work"， "pref": 1， "value": "+1 214 555 1212"}，
{"type": "fax"， "value": "+1 214 555 1213"}，
{"type": "mobile"， "value": "+1 214 555 1214"}
]，
"addresses": [
{"type": "work"， "format": "us"，
"value": "1234 Main StnSpringfield， TX 78080-1216"}，
{"type": "home"， "format": "us"，
"value": "5678 Main StnSpringfield， TX 78080-1316"}
]，
"urls": [
{"type": "work"， "value": "http://seankelly.biz/"}，
{"type": "home"， "value": "http://seankelly.tv/"}
]
}

正如你所见，JSON也提供了一种具有嵌套数据元素的结构，就象XML一样。与XML一样，JSON也是基于文本的，且它们都使用Unicode编码，且其与XML一样具有可读性。主观上来看，JSON更为清晰且冗余更少些。JSON网站提供了对JSON语法的严格描述，只是描述较简短。从总体来看，XML比较适合于标记文档，而JSON却更适于进行数据交换处理。一个JSON文档的每一个实例都负责描述一个对象—具体的描述是通过使用嵌套的对象，数组，字符串，数字，布尔值或null值来实现的。

上面地址卡例子的JSON版本更为小些，仅占用大约682字节的空间，而XML版本需要744字节空间。当然，这不是什么惊人的节省。其实，JSON的真正优点在于数据分析方面。

三、JSON与XML数据分析对比

借助于XMLHttpRequest对象，你可以从自己的基于AJAX的应用程序内部检索XML和JSON文件。典型情况下，你可以使用类似如下的交互：

var req = new XMLHttpRequest();
req.open("GET"，"http://localhost/addr?cardID=32"， /*async*/true);
req. = myHandler;
req.send(/*no params*/null);

随着对Web服务器的不断响应，被你传递的处理器函数（在本例中是myHandler）被反复调用，这种特征提供给你一种时机—及早地取消事务，更新一个进度条，等等。通常，你只是在Web请求完成时才采取行动（应用返回的数据）。

为了处理上面地址卡程序的XML版本，myHandler的编码可以类似如下：

function myHandler() {
if (req.readyState == 4 /*完成*/) {
//用第一个街道地址更新表单中的地址域
var addrField = document.getElementById('addr');
var root = req.responseXML;
var addrsElem = root.getElementsByTagName('addresses')[0];
var firstAddr = addrsElem.getElementsByTagName('address')[0];
var addrText = fistAddr.firstChild;
var addrValue = addrText.nodeValue;
addrField.value = addrValue;
}
}

注意，你不必自己分析XML文档，分析任务可以由XMLHttpRequest对象为你自动完成。之后，这个XMLHttpRequest对象使得由分析生成的DOM树可应用于responseXML属性中。然后，你可以借助这个responseXML属性并调用getElementsByTagName方法来查找文档中的addresses部分，但仅能使用找到的第一个（其实只有一个）。然后，你再次在找到的address上调用getElementsByTagName方法来查找下一层中的第一个address元素，然后再次使用找到的第一个address……然后，你得到该元素的第一个DOM子结点（它是一个文本结点）并得到该结点的值（它正是你想找的街道地址）。最后，你就可以在表单域中显示它。

显然，这是一项工作量很大的工作！现在，让我们试用一下JSON：

function myHandler() {
if (req.readyState == 4 /*complete*/) {
var addrField = document.getElementById('addr');
var card = eval('(' + req.resp + ')');
addrField.value = card.addresses[0].value;
}
}

你需要做的第一件事情是手工地分析JSON响应。然而，因为JSON是JavaScript的一个子集，所以你可以通过调用eval方法使用JavaScript自己的编译器来完成这些。分析JSON是非常简单的！而且，在产生于JSON中的一个对象中导航与在任何JavaScript对象中导航完全一样。这比在DOM树中导航要容易得多。例如：

•card.addresses[0].value对应第一条街道地址：“1234 Main Stb &”；
•card.addresses[0].type对应地址的类型：“work”；
•card.addresses[1]对应一个家庭地址对象；
•card.fullname对应卡片名：“Sean Kelly”。

如果仔细观察，那么你可能注意到，示例程序的XML版本至少要处理包含在文档中的一个对象—根文档元素card。这在JSON版本中是不存在的。为什么？如果你曾开发过存取一个Web服务的JavaScript，那么你就会知道你要从Web服务中取回什么。然而，你可以在JSON中包括下面一种更为简练的形式：

{"card": {"fullname": ...}}

通过使用这一技术，你的JSON文件总是以一个对象开头并且用单个命名的属性来标记该对象的“类型”。

四、JSON的快速可靠性

JSON能够生成更小的文档，且其在JavaScript脚本中更易于使用。XMLHttpRequest能够为你自动分析XML文档，然而你必须手工分析JSON。这样以来，你可能质疑：分析JSON是否比分析XML更慢？对比JSON，我针对上面的地址卡测试了嵌入到XMLHttpRequest中的XML分析器—通过把这些数据置入上千次的循环中。最终结果表明，分析JSON比分析XML快大约10倍！如果想实现AJAX程序的行为类似于桌面应用程序，那么速度就是一切。很明显，JSON是胜者。

当然，你不可能一直控制为你的AJAX应用程序产生数据的服务器端。你可以使用一种第三方服务器来处理你的数据，而且让该服务器仅提供XML输出。然而，如果该服务器中恰巧能够提供JSON支持，那么你能否确定并敢于使用这一支持？

注意，在上面的示例中，你是直接把响应文本传递到一个对eval的调用中。如果你信任并控制了服务器，这是没有问题的；然而，另外一些情况下，一个恶意的服务器有可能给你的浏览器执行带来危险操作。为此，你最好使用一个用JavaScript编写的JSON分析器。幸好，已经存在可用的分析器了。

谈到分析器，Python迷们可能还没有注意到，JSON不仅是JavaScript的一个子集，而且它还是Python的一个子集。你可以直接在Python中使用JSON，或利用一种安全的JSON分析器。现在，针对于JSON的分析器也大量地存在于其它语言中；你可以参考JSON.org网站来选择使用相应的分析器。

五、服务器端技术对JSON的支持

到目前为止，我们一直集中于讨论如何把JSON应用于客户端浏览器上的基于AJAX技术的Web应用程序。当然，Web服务器端必须存在一定的技术支持才能实现首先生成JSON，然后由客户端使用JSON。幸好，基于现有数据结构创建JSON是一件相当直接的事情。另外，一些Web应用程序框架（例如TurboGears）已经自动包括支持JSON输出。

另外，商业Web服务供应商也都特别关注JSON。Yahoo最近在其Web服务中大量地加入对JSON的支持。Yahoo的多种搜索服务，旅行规划者，del.icio.us和高速公路交通服务都支持JSON输出。无疑，其它一些主要的Web服务供应商也都会逐渐地提供对JSON的支持。

六、结论

JSON的基本思想是，把自己实现为JavaScript（和Pyth 2.0开发中XML数据操作的主要替代者。任何开发者，无论是开发标准桌面应用程序还是开发Web应用程序，只要使用XML数据处理，都会欣赏JSON的简易特征。最后，我衷心祝愿JSON能加快你的基于AJAX技术的Web 2.0应用程序的开发。

http://tech.51cto.com/art/200604/25607.htm

姜利阳 2007-01-10 23:44 发表评论

关于JSPackage的一些看法

姜利阳 — Wed, 10 Jan 2007 14:42:00 GMT

一概述

JSPackage 旨在提供一个开放的、无侵入的脚本库管理解决方案，让类库编写者可以以简洁的程序语言描述好自己编写的类库的相关依赖，让最终用户从繁琐的依赖管理中解脱出来，使得使用起来更加简洁方便。此外，还提供了一种对象有效域的封装机制，方便于重用、组织第三方脚本，避免它们带来的命名污染问题。同时做到简洁，不加入特殊语法，被管理的脚本无框架依赖.

以类似Java 包的管理机制管理Javascript脚本 , 也能达到动态加载Javascript类或者函数.
使用方式也比较方便:

1)

二不足之处
我们可以发现,
1) 浏览器首先加载 "/scripts/startup.js"这个JSPackage启动程序
2) 之后遇到$import("cn.com.site120.*")这个方法的时候,它首先检查"cn.com.site120.*"这个包是否已经加载过,
如果已经加载过,则跳过,直接调用 ,
如果没有加载, 则程序暂停,转而去下载这个包下的类, 直到下载完加载后,才继续执行.如果待下载的这些类又有$import("cn.com.other.*")这样的语句,它也检查这个包是否已经加载过,如果没有,则程序也暂停,转而去下载"cn.com.other.*"这个包下的文件,依此类推..形成一种嵌套的结构,环环相扣, 在第一次打开页面时, 如果网速快的话,则表现不出来, 但当网速慢的话,有明显的慢的感觉. 而且这里面的类越多,速度就越慢.

姜利阳 2007-01-10 22:42 发表评论

[正则表达式]-----贪婪模式与非贪婪模式

姜利阳 — Wed, 29 Nov 2006 03:23:00 GMT

1
2 /**
3 **   author: site120
4 **   function : get script part from html document
5 **/
6
7 var loadJs = function(str , delayTime)
8 {
9     var delayTime = delayTime || 100;
10     var regExp_scriptTag = new RegExp("<\\s*script([^>]*)>([\\s\\S]*?)" , "gi");
11     var regExp_scriptAttrib_src = new RegExp("\\s*src?\\s*=\\s*(\"([^\"]+)\"|\'([^\']+)\'|\\s*([^\\s]+)\\s*)" , "gi");
12
13     var arr_scriptTag = null;
14     var arr_scriptAttib = null;
15
16     var scriptData = "";
17     var jsList = new Array();
18
19     while ((arr_scriptTag=regExp_scriptTag.exec(str)) != null)
20     {
21         while ((arr_scriptAttib=regExp_scriptAttrib_src.exec(arr_scriptTag[1])) != null)
22         {
23             if (arr_scriptAttib[3])
24             {
25                 jsList.push(arr_scriptAttib[3]);
26             }
27             else if (arr_scriptAttib[2])
28             {
29                 jsList.push(arr_scriptAttib[2]);
30             }
31             else
32             {
33                 jsList.push(arr_scriptAttib[1]);
34             }
35         }
36         scriptData += (arr_scriptTag[2]);
37     }
38
39
40     for (var i=0; i41     {
42         var script = document.createElement("script");
43         script.src = jsList[i];
44         document.body.appendChild(script);
45     }
46
47     if (scriptData.length > 0)
48     {
49         var fn = "_siteFunction_" + new Date().getTime() + "_" + parseInt(Math.random()*10000) + "_120";
50         scriptData = " var " + fn + " = function(){ " + scriptData + " };  "+fn+"();"
51
52         window.eval(scriptData);
53     }
54 }
55

这是用Js的处理正则表达式来获取符合条件的特定内容，原理与Java一样，

功能是读取一段网页源代码，并将它里面所有的script标签，截取,加载, 并运行。

这里面的 [\s\S]*? 利用非贪婪模式来匹配最近script标签之间的所有代码。包括换行

姜利阳 2006-11-29 11:23 发表评论