BlogJava-I am Thinking !-文章分类-JavaScript & AJAX

判断JS文件加载完成(转)

残叶舞风 — Tue, 27 Oct 2009 00:49:00 GMT

在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢?

我们可以对加载的 JS 对象使用 onload 来判断(js.onload)，此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete)，当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。

对于 readyState 状态需要一个补充说明：

在 interactive 状态下，用户可以参与互动。

Opera 其实也支持 js.onreadystatechange，但他的状态和 IE 的有很大差别。

残叶舞风 2009-10-27 08:49 发表评论

分离JavaScript和HTML(转)

残叶舞风 — Wed, 21 Oct 2009 03:17:00 GMT

今天的目标是实现javascrīpt动作与html的分离，换句话说就是把onclick之类的属性赋值放到html的外面去。这样做的好处不仅仅是使页面清晰，功能分离，更重要的，对于那些禁用Javascrīpt的浏览器来说，不会造成Error的出现（虽然很多时候功能还是不能实现，那是因为分离 js仅仅是确保访问性的第一步）。

那么我们应该怎么做呢，直接在js里面这样写吗：

document.getElementById("ELEMENT_ID").onclick = FUNCTION_NAME();

这是不能实现的，我过去一直不明白为什么它不能正常运转，在做VeryFTP的界面的时候，就苦于此而造成VeryFTP的页面里到处都是难看的onclick。那么现在来解决这个问题，究竟为什么呢？

其实很简单，直接将这句写在js里，它将在js载入时被执行。而我们现在大多都有这样的好习惯——将
为了解决这个问题，理所当然地需要一个事件。我起初一直以为自己熟悉的window.onload事件实在页面刚一载入时触发，但是我错了，这个事件被触发的时间是文档载入之后，以前曾经隐约有一个ondocumentready的印象，其实就是window.onload吧。所以当初WG的驿站因为 GoogleAD打不开而造成整个网站无法载入的问题恰可以用这个事件来解决问题，虽然往里面append脚本可能还有一点问题，但至少是可能的。（WG 别怪我哈，我当初是年幼无知哈，哈哈）

于是这样写：

window.onload = function(){
addEvent();
}
function addEvent(){
document.getElementById("ELEMENT_ID").onclick = FUNCTION_NAME();
}

这样就OK了吗？呵呵，没有结束呢。我发现这样写，刷新页面之后居然提示我添加信息完成！！（我页面的功能）。数据库里也多了好几行空白。不过这次问题好找，我几乎一眼就看出来了，呵呵。改成这样

window.onload = function(){
addEvent();
}
function addEvent(){
document.getElementById("ELEMENT_ID").onclick = "FUNCTION_NAME();";
}

在 DOM中一切属性都是字符串。刷新，很自然地，函数没有在载入后就被自动执行。但是问题又出来了，点击按钮居然没有用了！！上帝啊，用Frefox自带的 DOM查看器查看呢，按钮上果然没有onclick这一属性。那么IE呢，IE中功能已经实现了，用IE的Develop Bar查看DOM，果然onclick属性已经被加上去了。

这样，问题就简单了，Firefox要求我们换一种更加规范的方法为它添加这个属性，而IE也是遵守这种规范的，那我们还犹豫什么：

window.onload = function(){
addEvent();
}
function addEvent(){
document.getElementById("ELEMENT_ID").setAttribute("onclick","FUNCTION_NAME();");
}

这样就没有问题了，刷新Firefox，重新打开DOM查看器，这个属性已经上去了，运转正常。

分离JS和HTML的方法终于理清了。

残叶舞风 2009-10-21 11:17 发表评论

JSON介绍(转)

残叶舞风 — Thu, 15 Oct 2009 11:45:00 GMT

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。

现在， JSON 为 Web 应用开发者提供了另一种数据交换格式。让我们来看看 JSON 到底是什么，同 XML 或 HTML 片段相比，JSON 提供了更好的简单性和灵活性。

JSON的优点

轻量级的数据交换格式
人们读写更加容易
易于机器的解析和生成
能够通过JavaScript中eval()函数解析JSON
JSON支持多语言。包括：ActionScript, C, C#, ColdFusion, E, Java, JavaScript, ML, Objective CAML, Perl, PHP, Python, Rebol, Ruby, and Lua.

JSON 数据格式解析

和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。

JSON建构于两种结构：

“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

1）对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

如：

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

2）数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

如：

[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro@hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
]

3）值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

如：

{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}

4）字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

字符串（string）与C或者Java的字符串非常相似。

5）数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

如：

这与绝大多数编程语言的表示方法一致，例如：{12345，-12345}

JavaScript 处理 JSON 数据

上面介绍了如何用 JSON 表示数据，接下来，我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端，以及客户端如何使用 JavaScript 处理 JSON 格式的数据。

我们先讨论如何在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到客户端如何将 JSON 数据表示给用户：

function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}

假定服务器返回的 JSON 数据是上文的：

{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}

只需将其赋值给一个 JavaScript 变量，就可以立刻使用该变量并更新页面中的信息了，相比 XML 需要从 DOM 中读取各种节点而言，JSON 的使用非常容易。我们需要做的仅仅是发送一个 Ajax 请求，然后将服务器返回的 JSON 数据赋值给一个变量即可。有许多 Ajax 框架早已包含了处理 JSON 数据的能力，例如 Prototype（一个流行的 JavaScript 库：http://prototypejs.org）提供了 evalJSON() 方法，能直接将服务器返回的 JSON 文本变成一个 JavaScript 变量：

new Ajax.Request("http://url", {
method: "get",
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
// TODO: document.write(json.xxx);
}
});

服务器端输出 JSON 格式数据

下面我们讨论如何在服务器端输出 JSON 格式的数据。以 Java 为例，我们将演示将一个 Java 对象编码为 JSON 格式的文本。

将 String 对象编码为 JSON 格式时，只需处理好特殊字符即可。另外，必须用 (") 而非 (') 表示字符串：

static String string2Json(String s) {
    StringBuilder sb = new StringBuilder(s.length()+20);
    sb.append('""');
    for (int i=0; i<s.length(); i++) {
        char c = s.charAt(i);
        switch (c) {
        case '""':
            sb.append("""""");
            break;
        case '""':
            sb.append("""""");
            break;
        case '/':
            sb.append("""/");
            break;
        case '"b':
            sb.append("""b");
            break;
        case '"f':
            sb.append("""f");
            break;
        case '"n':
            sb.append("""n");
            break;
        case '"r':
            sb.append("""r");
            break;
        case '"t':
            sb.append("""t");
            break;
        default:
            sb.append(c);
        }
    }
    sb.append('""');
    return sb.toString();
}

将 Number 表示为 JSON 就容易得多，利用 Java 的多态，我们可以处理 Integer，Long，Float 等多种 Number 格式：

static String number2Json(Number number) {
return number.toString();
}

Boolean 类型也可以直接通过 toString() 方法得到 JSON 的表示：

static String boolean2Json(Boolean bool) {
return bool.toString();
}

要将数组编码为 JSON 格式，可以通过循环将每一个元素编码出来：

static String array2Json(Object[] array) {
    if (array.length==0)
        return "[]";

    StringBuilder sb = new StringBuilder(array.length << 4);
    sb.append('[');

    for (Object o : array) {
        sb.append(toJson(o));
        sb.append(',');
    }
    // 将最后添加的 ',' 变为 ']':
    sb.setCharAt(sb.length()-1, ']');
    return sb.toString();
}

最后，我们需要将 Map 编码为 JSON 格式，因为 JavaScript 的 Object 实际上对应的是 Java 的 Map 。该方法如下：

static String map2Json(Map<String, Object> map) {
    if (map.isEmpty())
        return "{}";

    StringBuilder sb = new StringBuilder(map.size() << 4);
    sb.append('{');
    Set<String> keys = map.keySet();
    for (String key : keys) {
        Object value = map.get(key);
        sb.append('""');
        sb.append(key);
        sb.append('""');
        sb.append(':');
        sb.append(toJson(value));
        sb.append(',');
    }
    // 将最后的 ',' 变为 '}':
    sb.setCharAt(sb.length()-1, '}');

    return sb.toString();
}

为了统一处理任意的 Java 对象，我们编写一个入口方法 toJson(Object)，能够将任意的 Java 对象编码为 JSON 格式：

public static String toJson(Object o) {
    if (o==null)
        return "null";

    if (o instanceof String)
        return string2Json((String)o);

    if (o instanceof Boolean)
        return boolean2Json((Boolean)o);

    if (o instanceof Number)
        return number2Json((Number)o);

    if (o instanceof Map)
        return map2Json((Map<String, Object>)o);

    if (o instanceof Object[])
        return array2Json((Object[])o);

    throw new RuntimeException("Unsupported type: " + o.getClass().getName());
}

我们并未对 Java 对象作严格的检查。不被支持的对象（例如 List）将直接抛出 RuntimeException 。此外，为了保证输出的 JSON 是有效的，Map 对象的 Key 也不能包含特殊字符。细心的读者可能还会发现循环引用的对象会引发无限递归，例如，精心构造一个循环引用的 Map，就可以检测到 StackOverflowException：

@Test(expected=StackOverflowError.class)
public void testRecurrsiveMap2Json() {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("key", map);
    JsonUtil.map2Json(map);
}

好在服务器处理的 JSON 数据最终都应该转化为简单的 JavaScript 对象，因此，递归引用的可能性很小。

最后，通过 Servlet 或 MVC 框架输出 JSON 时，需要设置正确的 MIME 类型（application/json）和字符编码。假定服务器使用 UTF-8 编码，则可以使用以下代码输出编码后的 JSON 文本：

@Test(expected=StackOverflowError.class)
public void testRecurrsiveMap2Json() {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("key", map);
    JsonUtil.map2Json(map);
}

残叶舞风 2009-10-15 19:45 发表评论

Prototype是如何扩展DOM的(转)

残叶舞风 — Thu, 15 Oct 2009 11:30:00 GMT

　　Prototype框架最大的部分就是对DOM的扩展。Prototype框架里的$()函数返回一个网页DOM元素，框架给这个元素添加了很多方便的方法。举个例子：你可以写这样的代码 $('comments').addClassName('active').show() ，用来取得ID是“comments”的元素，给它添加一个CSS的ClassName并且显示它（假设之前是隐藏的）。本来在JavaScript 里，“comments”元素是没有这些方法可用的；这是怎么实现的呢？这篇文章揭示了几个在Prototype框架里用到的技巧。

　　用 Element.addMethods() 添加你自己的方法

　　如果你有自己的DOM方法想要添加到Prototype的那一大堆方法里去凑凑热闹，没问题！Prototype也为此提供了一种机制。假设你有一组函数封装在一个对象里，只要把这个对象交给 Element.addMethods() 就可以了：

　　唯一需要注意的事情就是要确保这些方法的第一个参数是元素自身。在你的方法里，你还可以在最后返回这个元素以实现可链性（或者，就像例子里实践的那样，实现自身返回元素的方法）。

　　Element.extend() 方法

　　大多数扩展DOM方法都是封装在Element.Methods对象里的，并被复制到Element对象（提供方便之用）。这些方法都把要操作的元素作为第一个参数来接受。

Element.hide('comments');
var div_height = Element.getHeight(my_div);
Element.addClassName('contactform', 'pending');

　　这些例子可谓简明易懂了，但是我们还有更好的方式。如果你想要操纵一个元素，你可以把这个元素交给Element.extend()，它会把所有的那些方法都直接复制给这个元素。例如，创建一个新的元素并且控制它：

var my_div = document.createElement('div');
Element.extend(my_div);
my_div.addClassName('pending').hide();
// 把元素插入到文档
document.body.appendChild(my_div);

　　我们的方法调用变得更短更直观了！正如上面提到的，Element.extend() 从Element.Methods把所有的方法复制到我们的元素，元素自动成为所有那些方法函数的第一个参数。extend()方法足够机灵，不会在同一个元素上尝试操作两次。更牛的是，美钞函数 $() 通过这种机制扩展了交给它的每个元素。

　　此外，Element.extend() 机制也适用于在FORM元素上使用Form.Methods的方法，以及在INPUT、TEXTAREA 和 SELECT 元素上使用Form.Element.Methods的方法：

var contact_data = $('contactform').serialize();
var search_terms = $('search_input').getValue();

注意并非只有美钞函数能自动扩展元素！document.getElementsByClassName、Form.getElements、双美钞 $$()函数（CSS选择器）返回元素的时候，还有其他一些场合都要调用Element.extend() ……总之，你根本很少有机会需要显式地调用Element.extend()。

　　本地原生扩展

　　在这一切背后有一个秘密。

　　在支持向本地原生对象（诸如HTML元素）的原型添加方法的浏览器中，无需调用过Element.extend()、美钞函数或别的什么东西，所有元素的DOM扩展就是默认可用的！于是在这些浏览器中，这样的代码是有效的：

var my_div = document.createElement('div');
my_div.addClassName('pending').hide();
document.body.appendChild(my_div);

　　因为浏览器本地原生对象的原型被扩展了，所有的DOM元素就内建具有了原型扩展方法。但是，这在IE里是行不通的，IE不让人改动 HTMLElement.prototype。为了让前面的例子在IE上也能行得通，你需要用 Element.extend() 扩展元素。毋需担心，这个方法足够机灵，不会重复扩展元素。

　　由于有不支持这个的浏览器的缘故，你必须注意只在元素已经被扩展了的情况下使用DOM扩展。举例来说，上面的例子在 Firefox 和 Opera 里行得通，但是在创建元素之后加上Element.extend(my_div)可以使得脚本稳定可靠。你可以用美钞函数作为快捷的写法，如下例：

// 这在 IE 里会出错：
$('someElement').parentNode.hide()
// 跨浏览器的方式：
$($('someElement').parentNode).hide()

　　记住了！永远要在所有（你打算支持的）浏览器里进行测试。

　　英文 http://www.prototypejs.org/api

　　中文 http://www.ajaxgo.org/prototype/

残叶舞风 2009-10-15 19:30 发表评论