BlogJava-黄小二的讀書筆記-文章分类-Ajax

Javascript学习指南（第2版）笔记(六) DOM、Ajax及其数据

黄小二 — Sun, 30 May 2010 03:17:00 GMT

1、DOM
2、节点属性和方法
3、Ajax安全和工作区
4、Ajax数据：XML或 JSON（JavaScript对象符号）

1、DOM

     在 W3C关于 DOM的规范中，将 document元素描述为一个节点(node)集合，他们之间是以有层次的树形结构连接的。你不仅可以从树上读取节点，还可以删除或创建新的节点。

#document
html
head
    title
body
    h1
    div
      p
        #text
      p
        #text

2、节点属性和方法

对于文档树上的每个节点都拥有 DOM(Core)的 Node对象中定义的基本属性和基本方法集。Node对象的属性主要包括：

nodeName，对象名称，如 head元素的名称就是 HEAD；
nodeValue，如果不是一个元素，则返回对象值；
nodeType，用数字表示的节点类型；
parentNode，当前节点的父节点；
childNodes，由其子节点组成的 NodeList，前提是存在子节点；
firstChild，由子节点组成的 NodeList中的第一个节点；
lastChild，由子节点组成的 NodeList中的最后一个节点；
previousSibling，如果当前节点是位于 NodeList中的子节点，那么它表示的就是该列表中的前一个节点；
nextSibling，如果当前节点是位于 NodeList中的子节点，那么它表示的就是该列表的下一个节点；
attributes，一个 NamedNodeMap，它是以键/值对形式表示的，是该元素的属性列表；
ownerDocument，拥有的 document对象，当你拥有多个 document对象时它比较有用；
namespaceURI，命名空间的 URI，如果有的话，他是针对节点的；
Prefix，命名空间的前缀，如果有的话，它是针对节点的；
localName，如果指定了 namespaceURI的话，它表示的是节点的本地名。

3、Ajax安全和工作区

在 Ajax遵循 JavaScript中相同源、相同域的规则：在 Web页面中只能调用相同服务器（相同域）的 Web服务；也就是说：服务器端页面与服务器发送请求的页面处于相同的服务器、相同的域中。

但是对于 Ajax程序而言，向本地服务器端请求一个 Web服务，然后接收本地服务器的返回信息即可。它并不关心本地 Web服务实际上是否通过访问远程 Web服务实现的。

4、Ajax数据：XML或 JSON（JavaScript对象符号）

XML格式的 Ajax应答

     好处是比简单的字符串或 HTML片段更多元。另外，你还可以向对待 Web页面元素那样，直接通过 DOM方法来操作 Ajax调用返回的 XML格式应答。

     确保在服务器端应用程序在返回数据时设置了正确的数据 MINE类型 text/xml，然后通过 XMLHttpRequest对象的 responseXML容器来获取应答信息。

JSON

     JSON是一种“轻量级的数据交换格式”。和一组由逗号分开的字符串，以及处理复杂（成本高昂）的 XML相比，JSON是一种很容易将服务器端数据结构转成 JavaScript对象的数据格式。

     JSON实际上就是使用 JavaScript语法定义的对象，一个对象的语法包括一对大括号以及其中的成员：
     object{ } or object { string : value ...}

     对于数组而言，他是由一组元素加上一对方括号组成的：
     array[] or array[ value, value, value, ..., value ]

注：在 JavaScript可以用单引号或双引号来引用字符串，而 JSON只支持双引号。

示例，在 PHP脚本中使用简单的 JSON
$result = '[ { "value" : "stlou", "title" : "St. Louis" }, ' .
          ' { "value" : "kc" , "title" : "Kansas City" } ]';

JSON对象

     在 http://www.json.org/js.html上可以找到一个 JSON JavaScript程序库，它提供了一些基于该程序库的 JSON对象。包含了直接访问 JSON对象的静态方法：
JSON.parse，基于指定的 JSON格式字符串创建一个 JavaScript对象；
JSON.stringify，将一个 JavaScript对象序列化成一个 JSON格式的字符串。

JSON 示例1：

//对 JSON字符串进行“计算”
var response = JSON.parse(xmlHttpObj.responseText);

var citySelection = document.getElementById("citySelection");
var name = value = null;

//处理从 JSON对象返回的数据
for (var i=0; i<response.length; i++) {
    name = response[i].title;
    value = response[i].value;
    citySelection.options[i] = new Option(name, value);
}

JSON示例2：

//从服务器获得的 JSON对象实例：
{ "title" : "Appletini",
  "ingredients" : [ { "ingredient" : "1 ounce vodka"},
                    { "ingredient" : "1/2 ounce Sour Apple Pucker or apple schnapps "} ],
  "instruction" : "Mix vodka and schnapps in a glass filled with ice." }

//============================================================
//处理 JSON数据

//创建对象
var recipeObj = JSON.parse(xmlhttp.responseText);

var recipe = document.createElement('div');
recipe.id = 'recipe';
recipe.className = 'recipe';

//添加标题
var title = recipeObj['title'];
var titleNode = document.creteElement('h3');
titleNode.appendChild(document.createTextNode(title));
recipe.appendChild(titleNode);

//添加配方成分
var ingredients = recipeObj.ingredients;
for (var i=0; i<ingredients.length; i++){
    var item = ingredients[i].ingredient;

}

.
body[0].appendChild(recipe);

黄小二 2010-05-30 11:17 发表评论

Javascript学习指南（第2版）笔记(五) 浏览器对象、cookie

黄小二 — Sat, 29 May 2010 13:46:00 GMT

1、window对象
2、同源安全策略
3、cookie

     浏览器对象模型（BOM）是一组从浏览器上下文继承而来的对象，这也是绝大多数 JavaScript应用程序中函数运行的上下文。有时它也被称之为 DOM Level 0，或者就叫 DOM。

     BOM是一组有限的公共 Web对象，也是一个层次化的对象集，每个层次上的对象都可以通过它们的父对象来访问，比如 window[navigator, location, frames, screen, history, document[forms, cookie, link/anchors, images, embeds/plug-ins, all]]。

     访问对象时，你可以：
     var theImage = document.form[0].elements["someelement"].value;

1、window对象

     浏览器的 window对象封装了整个浏览器环境，包括 window的"chrome"（组成浏览器窗体的通用组件）、实际的 Web页面，以及页面中的事件。

     通过 window可以手动设置浏览器状态条上的状态，执行打开一个新窗口、重新调整已显示窗口的大小、关闭窗口等操作。不过随着动态 Web效果和 Ajax的流行，这种弹出式窗口越来不被喜欢。

window对象的方法和属性可以分成4类：

a. 创建新窗口，维护现有窗口行为

     弹出式对话框：alert、confirm和 prompt
     创建自定义窗口：window.open()
     维护窗口：通过窗口的引用能够完成该窗口的维护，要维护父窗口则使用关键字 opener，要维护包含当前运行脚本的窗口，则应该使用关键字 self。

b. 在窗口中创建带分区的文档（帧和iframes）

     frame对象定义了以下元素：parent、length和 name。对于跨帧通信而言，name和 parent属性特别重要。其父元素 frameset（帧集，包括帧的窗口）可以通过每个帧的名字访问所有子帧（也可以通过帧数组，以对象数量作为索引值）；每个帧都可以通过通用的关键字 parent来访问该帧集。兄弟帧元素之间可以通过 parent和对方的 name属性来访问。

     和标准的帧不一样，iframe是内嵌在页面中的。你可以为其指定高度和宽度，如果将它们都设置为0，那么它就将被隐藏起来。iframe会把它嵌入到的页面视为自己的父元素，这也是它和更高层页面进行通信的方法。通常，你可以使用 document的 getElementById方法来访问它，也可以使用 target属性载入其内容。

c. 定时器的创建和控制

     有两类定时器：一类是一次性的，另一类是周期性使用的。两种定时器都能取消，一次性定时器方法只会被调用一次。

要想创建一个不重复触发的定时器，可以使用 setTimeout方法：
var tmOut = setTimeout("func", 5000, "param1", param2,,,,, paramn);

如果想清除这个定时器，可以使用 clearTimeout方法：
clearTimeout(tmOut);

如果你想周期性地使用这个定时器，那么应调用 setInterval方法：
var tmOut = setInterval("functionName", 5000);

     同样，如果想暂停或取消这个周期性定时器，可以使用 clearInterval方法。如果你想实现一个周期性定时器，但又想在参数中指定一个函数文字量，那么你可以在每次定时器过期时再用 setTimeout函数重新设置这个定时器。

注：
     在 IE浏览器中，setInterval和 setTimeout方法是不支持在最后添加函数调用所需参数的。

d. 用来控制浏览器其他元素

history对象
     history对象负责维护浏览器中页面载入操作的历史记录。同样，其方法和属性能够完成通过浏览器的后退和前进按钮所能实现的导航操作。

screen对象
     screen对象所包含的信息是屏幕显示有相关的，包括其宽度、高度，以及颜色或像素浓淡。虽然他们不是很常用，但他们对于那些需要修改浏览器窗口大小、创建需要特定调色板的带色彩对象等功能而言是不错的选择。

navigator对象
     navigator对象中提供的是和浏览器或其他访问该页面的用户代理相关的信息。通过它可以检查操作系统、浏览器或浏览器族、安全策略、语言以及 cookie是否启用。

document对象
1.链接和锚
     document对象的 links集合是由页面中所有超链接组成的，它的访问方法和数组一样。

2.图像
     和链接一样，图像也有其对应的对象，也可以直接设置他们的属性，如表示图像 URL的 src属性。

3.innerHTML
     使用 innerHTML属性可以修改页面中任何一个 HTML元素，它之所以仍然流行，是因为通过它修改页面元素时无需构建整个页面的内容，你只需创建一个 HTML格式的字符串，然后通过 innerHTML就可以添加到 Web页面中。不过，使用 innerHTML意味着无论向 Web页面添加了什么，他们都无法融合到页面的 document树上，因此如果你混合使用 innerHTML和新的 DOM方法将会带来很大的破坏。

2、同源安全策略

同源安全策略确保了不同域名、协议或端口的页面之间不能够通过脚本进行通信。同源安全策略将应用于不同页面之间的通信，包括父窗口中的表单和内嵌窗口之间的通信，如帧及 iframe。

3、cookie

cookie的意义就是一个带有过期时间、域名、路径的小型的键/值对，之所以需要提供这些消息，是为了确保正确的服务器能够读取到正确的 cookie。这些信息将作为 Web请求的一部分发送，因此在服务器端和浏览器都能访问这些数据。

设置、读取、删除 cookie

// if cookie enabled
window.onload = function() {
    if (navigator.cookieEnabled) {
        var sum = readCookie("sum");
        if (sum) {
            var iSum = parseInt(sum) + 1;
            alert("cookie count is " + iSum);

            if (iSum > 5) {
                eraseCookie("sum");
            } else {
                setCookie("sum", iSum);
            }
        } else {
            alert("no cookie, setting now");
            setCookie("sum", 0);
        }
    }
}

// 将 cookie有效期设置为 2016年
function setCookie(key, value) {
    var cookieDate = new Date(2016, 11, 10, 19, 30, 30);
    document.cookie = key + "=" + encodeURI(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}

// 在每个 cookie之前用分号隔开
function readCookie(key) {
    var cookie = document.cookie;
    var first = cookie.indexOf(key + "=");

    // 存在 cookie
    if (first >= 0) {
        var str = cookie.substring(first, cookie.length);
        var last = str.indexOf(";");

        // 如果是最后一个 cookie
        if (last < 0) last = str.length;

        // 获取 cookie的值
        str = str.substring(0, last).split("=");
        return decodeURI(str[1]);
    } else {
        return null;
    }
}

// 将 cookie的有效期设置成过去，以达到删除 cookie的目的
function eraseCookie (key) {
    var cookieDate = new Date(2000, 11, 10, 19, 30, 30);
    document.cookie = key + "= ; expirse=" + cookieDate.toGMTString() + "; path/";
}

黄小二 2010-05-29 21:46 发表评论

Javascript学习指南（第2版）笔记(四) 表单、表单事件及校验

黄小二 — Sat, 29 May 2010 07:50:00 GMT

1、跨浏览器兼容的事件处理
 2、选择列表框
 3、单选按钮和复选框
 4、测验

1、跨浏览器兼容的事件处理

//可复用的事件处理函数
function catchEvent(eventObj, event, eventHandler) {
  if (eventObj.addEventListener) {
    eventObj.addEventListener(event, eventHandler, false);
  } else if (eventObj.attachEvent) {
    event = "on" + event;
    eventObj.attachEvent(event, eventHandler);
  }
}

//可复用的事件取消函数
function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
    event.stopPropagation();
  } else {
    event.retrunValue = false;
    event.cancelBubble = true;
  }
}

2、选择列表框

var opts = document.getElementById("someForm").selectOpts.options;
for (var i=0; i<opts.length; i++) {
  if (opts[i].selected) {
    alert(opts[i].text + " " + opts[i].value);
  }
}

a.动态添加一个新的选项：由于数组的索引值是从 0开始编号的，因此只要以数组的 length属性作为索引值，就可以在数组的最后面添加一个新的数组元素。
opts[opts.length] = new Option["Option Four", "Opt4"];

b.删除一个选项，只需将数组中该选项设置为 null，这样操作将会重新安排数组，而不会导致编号不连续的现象。
opts[2] = null;

如果想删除所有选项，那么只需将数组的 length设置为 0。
opts.length = 0;

自动选择

//catchEvent(document.getElementById("selectOpts"), "change", checkSelect);
var theEvent = evnt ? evnt : window.event;

var opts = document.getElementById("someForm").selectOpts.options;
for (var i=0; i<opts.length; i++) {
  if (opts[i].selected) {
    switch (opts[i].value) {
      case "Opt1" : opts[i+1].selected = true;
        break;
      case "Opt3" : opts[i+1].selected = true;
        break;
      case "Opt5" : opts[i+1].selected = true;
        break;
    }
  }
}

3、单选按钮和复选框

//单选按钮访问：
var buttons = document.getElementById("radioGroup");
for (var i=0; i<buttons.length; i++)
{
  if (buttons[i].checked) {
    alert(buttons[i].value);
  }
}

//复选框选择：
var colorOpts = document.getElementById("someForm").getElementByTagName("input");

//遍历复选框中的每个 checkbox，检查是否被选中
var isChecked = false;
for (var i=0; i<colorOpts.length; i++) {
  if ((colorOpts[i].type == "checkbox") && (colorOpts[i].checked)) {
    ifChecked = true;
    break;
  }
}

//没有一个 checkbox被选中
if (!isChecked) {
  alert("no choose!");

}

4、测验

Q：如果表单数据不完整或无效，如何停止表单提交操作？
A：
如果你使用 DOM Level 0的事件，那么只要在事件句柄中返回 false值，并且在事件句柄脚本中取消表单提交操作即可。
如果你使用 DOM Level 2模型，那么就将 event对象的 cancelBubble属性设置为 true（针对 IE），并调用其 preventDefault方法（针对其他浏览器）。

黄小二 2010-05-29 15:50 发表评论

Javascript学习指南（第2版）笔记(三) 排错、调试、事件捕获

黄小二 — Sat, 29 May 2010 01:25:00 GMT

1、排错、调试
2、事件
3、Event对象
4、事件冒泡
5、事件句柄和 this
6、DOM Level 2事件模型
7、测验

1、排错、调试

Firebug是最常用的 Firefox开发工具，同时常用的 Web工具还有 Web Developer toolkit，该工具功能包括页面 HTML和 CSS代码的校验、可访问性检查、查看 CSS和 cookies、检查图像、查看 JavaScript修改后的页面源代码（包括动态源代码）。

2、事件

事件包括：用户界面事件（鼠标、键盘触发的）、逻辑事件（一个处理的结果）、和变化事件（修改文档的操作）。

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时...	IE	F	O	W3C
onabort	图像的加载被中断。	4	1	9	Yes
onblur	元素失去焦点。	3	1	9	Yes
onchange	域的内容被改变。	3	1	9	Yes
onclick	当用户点击某个对象时调用的事件句柄。	3	1	9	Yes
ondblclick	当用户双击某个对象时调用的事件句柄。	4	1	9	Yes
onerror	在加载文档或图像时发生错误。	4	1	9	Yes
onfocus	元素获得焦点。	3	1	9	Yes
onkeydown	某个键盘按键被按下。	3	1	No	Yes
onkeypress	某个键盘按键被按下并松开。	3	1	9	Yes
onkeyup	某个键盘按键被松开。	3	1	9	Yes
onload	一张页面或一幅图像完成加载。	3	1	9	Yes
onmousedown	鼠标按钮被按下。	4	1	9	Yes
onmousemove	鼠标被移动。	3	1	9	Yes
onmouseout	鼠标从某元素移开。	4	1	9	Yes
onmouseover	鼠标移到某元素之上。	3	1	9	Yes
onmouseup	鼠标按键被松开。	4	1	9	Yes
onreset	重置按钮被点击。	4	1	9	Yes
onresize	窗口或框架被重新调整大小。	4	1	9	Yes
onselect	文本被选中。	3	1	9	Yes
onsubmit	确认按钮被点击。	3	1	9	Yes
onunload	用户退出页面。	3	1	9	Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

内联模式/内联注册模式：
以属性的形式为 HTML元素添加属性的方法。

传统模式/传统注册模式：
通过对象属性将一个函数指派为事件句柄。如果想禁用事件处理，那么可以将事件句柄的值赋为 null。
window.onload = calcNumber;

注：
     在 DOM Level 0事件模型中，任何对象只允许指定一个事件句柄。如果你想针对某一特定对象的某个事件指定多个函数，则需要在事件句柄代码中列出他们：

内嵌模式：

传统模式：
function helloMsg() {
    var helloString = "hello there";
    alert(helloString);
    helloTwice();
}

当要求浏览器停止执行事件行为，可以从事件句柄函数中返回 false值。

3、Event对象

Event对象是和所有事件相关的。它有一些用来提供事件相关信息的属性，如 Web页面中鼠标点击的位置。

IE将 Event视为 window对象的属性。当处理事件时，将通过程序访问 window对象，其所包含的数据也会相应的进行填充。

function mouseDown() {
var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY;
alert(locString);
}

document.onmousedown = mouseDown;

在基于 Netscape的浏览器（如 Firefox、Mozilla、Opera和 Safari）中，获取 Event对象的方法是不同的：他将作为函数的一部分传入。

function mouseDown(theEvent) {
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
alert(locString);
}

document.onmousedown = mouseDown;

处理这些浏览器差异的方法之一是检查传入函数的 Event对象是否已经实例化。如果是，那么将这个 Event对象赋给一个局部变量；否则，将假定 window.event为该事件，并将其赋给这个局部变量。

function mouseDown(nsEvent) {
    var theEvent = nsEvent ? nsEvent : window.event;    //判断 nsEvent对象是否已定义。定义则赋值，否则选择 window.event属性
    var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
    alert(locString);
}

document.onmousedown = mouseDown;

鼠标 / 键盘属性

属性	描述	IE	F	O	W3C
altKey	返回当事件被触发时，"ALT" 是否被按下。	6	1	9	Yes
button	返回当事件被触发时，哪个鼠标按钮被点击。	6	1	9	Yes
clientX	返回当事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
clientY	返回当事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	6	1	9	Yes
metaKey	返回当事件被触发时，"meta" 键是否被按下。	No	1	9	Yes
relatedTarget	返回与事件的目标节点相关的节点。	No	1	9	Yes
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	6	1	9	Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

注：
在 IE中，fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
而在 Mozilla/Firefox中，relatedTarget 返回与事件的目标节点相关的节点。
要解决浏览器差异，可以使用：
var oldElement = theEvent.fromElement ? theEvent.fromElement : theEvent.relatedTarget;

4、事件冒泡

     如果你为多个嵌套的元素设置相同的事件句柄，会发生什么呢？他们将以什么样的顺序触发？如果你想使得一次只影响一个元素，那么如何保存触发事件句柄的事件呢？

     要管理元素堆栈中的事件，其中一个方法就是众所周知的事件冒泡。在事件冒泡中，最内部的元素将首先触发该事件，然后堆栈内的下一个元素触发该事件，以此类推，直到最外面的元素。如果事件句柄被指定给所有元素，那么这些事件将依次被触发。

     如果 div2在 div1内部，而 div1又在 document内部，三者都做了事件处理。当事件触发的时候，优先最里面的 div2元素，然后是 div1元素，最后是 document元素。

     如果你有一个元素堆栈，并且只希望一个元素触发该事件句柄，那么你可以取消事件冒泡机制。如果在 IE中要取消一个事件冒泡，可以使用 IE中事件的 cancelBubble属性；对于 Mozilla而言，则应该使用事件的 stopPropagation方法。你可以先检查 stopPropagation方法是否存在，然后根据其结果确定使用哪种方法：

function stopEvent(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation;
else evnt.cancelBubble = true;
}
//注：IE 7中调试出错，提示信息 "stopPropagation为空或不是对象"。

5、事件句柄和 this

this关键字表示的是当前调用的函数或者方法的所有者。对于一个全局变量而言，它表示的就是 window对象。对于一个对象的方法而言，它表示的就是该对象实例。而在一个事件句柄中，它表示的就是接收到该事件的元素。

document.getElementById("first").onmousedown = function() {
alert(this); //在 Firefox中将输出 "[object HTMLDivElement]"
alert("first element event");
}

6、DOM Level 2事件模型

     对于堆栈内元素的事件处理，还有一种被称为事件捕捉(event capturing)或 cascade-down的事件处理机制。对于前面这个包含3个元素的示例而言，事件将从最外面的元素开始触发：window -> div1 -> div2。

     老事件模型和新的 DOM Level 2事件模型之间，主要区别：
a.新事件模型并不依赖于特定的事件来处理属性；
b.你可以对任何一个对象的任何一种事件注册多个事件句柄函数。

     新的事件句柄提供的3个方法：
addEventListener，添加一个事件监听器；
removeEventListener，删除一个事件监听器；
dispatchEvent，分发一个新的事件。

示例：
object.addEventListener('event', eventFunction, boolean);

     如 click或 load之类的事件是其第一参数；第二个参数是指定的事件句柄函数；第三个参数用来指定事件是以 cascade-down或者冒泡模式处理的。当第三个参数为 false时这个事件监听器将以冒泡模式处理，否则将把这个事件监听器改成事件捕捉模型。

     如果你想停止事件执行时，可以在函数中调用 stopPropagation方法：
function cascadeDown(evnt) {
    ...
    evnt.stopPropagation();
}

     如果要彻底删除一个事件监听器，可以使用 removeEventListener方法：
document.removeEventListener("click", cascadeDown, true);

     在 IE中，与 addEventListener和 removeEventListener方法相似的是 attachEvent和 detachEvent，对应语法是：
object.attachEvent("eventhandler", function);
第一个参数是事件句柄，第二个是其函数。detachEvent语法类似。

跨浏览器解决方案：

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性	描述	IE	F	O	W3C
bubbles	返回布尔值，指示事件是否是起泡事件类型。	No	1	9	Yes
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	No	1	9	Yes
currentTarget	返回其事件监听器触发该事件的元素。	No	1	9	Yes
eventPhase	返回事件传播的当前阶段。				Yes
target	返回触发此事件的元素（事件的目标节点）。	No	1	9	Yes
timeStamp	返回事件生成的日期和时间。	No	1	9	Yes
type	返回当前 Event 对象表示的事件的名称。	6	1	9	Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

7、测验

Q1：使用 DOM Level 0方法为 document的 click事件指定一个事件句柄函数。
A1：document.onclick = clickMe;

Q2：使用 DOM Level 2事件处理机制为 document添加 click事件句柄。
A2：document.addEventListener("click", clickMe, false);

Q3：如果使事件处理机制能安全运行所有浏览器？
A3：
    if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
    else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
    else if (evtObject.onclick) evtObject.onclick=clickMe;

Q4：对于为 document对象指定的 onclick事件句柄，如何知道是在屏幕的什么位置执行了单击操作？
A4：
     如果使用 DOM Level 0事件处理系统，那么将无法使用 window对象的 event对象，也不能将其作为参数传给函数。
     对于 DOM Level 2事件处理模型而言，event对象将会传给事件句柄函数，你可以通过 event对象访问其 screenX和 screenY属性。

Q5：使用 DOM Level 2事件系统，如何阻止从其他元素中冒泡上来的事件。
A5：
     IE所支持的方法和绝大多数浏览器所支持的方法有所不同，因此你需要分别支持 IE和其他浏览器。你可以检查 event对象是否支持 stopPropagation方法。如果支持，则调用它；否则就将 cancelBubble属性的值设置为 true。

Q7：捕获 document对象的 keydown事件
A7：

window.onload = function() {
    if (document.addEventListener) document.addEventListener("keydown", getKey, false);
    else if (document.attachEvent) document.attachEvent("onkeydown", getKey);
    else if (document.onkeydown) document.onkeydown=getKey;
}

function getKey(evnt) {
    var theEvent = evnt ? evnt : window.event;
    alert(theEvent.which);  //Firefox 返回值，IE 7提示 undefined
}

黄小二 2010-05-29 09:25 发表评论

Javascript学习指南（第2版）笔记(二) 对象、函数

黄小二 — Wed, 26 May 2010 08:29:00 GMT

1、字符串基本类型和字符串对象的相互转换
 2、String对象
3、正则表达式
4、数组
5、函数
6、匿名函数
7、函数字面量

1、字符串基本类型和字符串对象的相互转换

如果创建的是字符串基本类型，却又以对象的行为访问，那么 JavaScript会将该基本类型自动转换成对象，但是转换成的 String对象只是一个临时变量，并且在属性操作后销毁该对象，所以这种操作不够有效，多了一次转换的过程而已。

var strName = "Shelley"; //字符串基本类型
alert(strName.length); //隐式创建 String对象，数值与 strName相同，并执行 length方法

2、String对象

本节内容引自：JavaScript String 对象参考手册
http://www.w3school.com.cn/js/jsref_obj_string.asp

var sObject = new String("Sample string");

     字符串是 JavaScript 的一种基本的数据类型。String 对象的 length 属性声明了该字符串中的字符数。String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

     需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

     在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。

3、正则表达式

正则表达式是由字符串所组成的表达式，用于匹配、替换或者查找特定的字符串。通过 RegExp对象可以显式地创建正则表达式：
var searchPatten = new RegExp('s+');

也可以使用文字量方式创建正则表达式：
var searchPatten = /s+/;

test方法

test方法将判断以参数传入的字符串是否与正则表达式相匹配。

var re = /Javascript rules/i;
/* var re = new RegExp('s+', 'g'); //对象实例，第二个参数表示匹配选项 */
var str = "Javascript rules";
if (re.test(str)) document.writeln("I guess it does rule");

其中修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

exec方法

var re = new RegExp("JS*", "ig");
var str = "cfdsJS *(&YJSjs 888JS";
var resultArray = re.exec(str);
while (resultArray) {
    document.writeln(resultArray[0]);
    document.writeln("next match starts at " + re.lastIndex + "");

    resultArray = re.exec(str);
}

/*
由于设置选项 g，RegExp中的 lastIndex属性会设置为上一次匹配的位置，所以每次 exec调用都会查找下一个匹配。该示例中总共找到4次匹配，当没有匹配时，将会返回的数值是空值 null，当数组为空值时循环自动结束。

输出：
JS next match starts at 6
JS next match starts at 13
js next match starts at 15
JS next match starts at 21

*/

exec方法将返回一个数组，但是数组并不是所有匹配项，而是当前匹配项和所有带圆括号的子字符串。如果在表达式中使用圆括号引用正则表达式的某部分，那么匹配的时候，这些括号所匹配的字符串也会体现在返回的数组中。

var re = /(ds)+(j+s)/ig;
var str = "cfdsJS *(&dsjjjsYJSjs 888dsdsJS";
var resultArray = re.exec(str);
while (resultArray) {
    document.writeln(resultArray[0]);
    document.writeln("next match starts at " + re.lastIndex + "");
    for (var i=1; i<resultArray.length; i++)
    {
        document.writeln("substring of " + resultArray[i] + "");
    }
    document.writeln("")

    resultArray = re.exec(str);
}

/*

输出：
dsJS next match starts at 6
substring of ds
substring of JS

dsjjjs next match starts at 16
substring of ds
substring of jjjs

dsdsJS next match starts at 31
substring of ds
substring of JS

*/

支持正则表达式的 String 对象的方法
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

参考：JavaScript RegExp 对象参考手册
http://www.w3school.com.cn/js/jsref_obj_regexp.asp

4、数组

     数组不一定是一维的，在 JavaScript中管理多维数组的方法是为每个数组元素创建一个新的数组。

var threedPoints = new Array();
threedPoints[0] = new Array(1.2, 3.33, 2.0);
threedPoints[1] = new Array(5.3, 5.5, 5.5);
threedPoints[2] = new Array(6.4, 2.2, 1.9);
var newZPoint = threedPoints[2][2];     //数组以索引方式访问

     数组的 concat 和 slice都不会改变原有数组，而只是创建一个新的数组以作为方法的返回值。

     在大多数情况下，数组元素的顺序并不重要，不过也有些需要维护数组元素顺序的场景，例如队列。数组维护队列的方法：
push 将元素添加到数组后面
unshift 将元素添加到数组最前面
pop 移除数组的最后一个元素
shift 移除第一个元素

数组的访问

//通过循环来遍历数组
for (var i=0; i<threedPoints[0].length; i++){
alert(threedPoints[0][i]);
}

//使用 forin 循环
for (var itemIndex in threedPoints[0]){
document.writeln(threedPoints[0][itemIndex] + "");
}

根据逗号分隔的字符串方式创建数组

var animalString = "cats,dogs,birds,horse";
var animalArray = animalString.split(",");
alert(animalArray[2]); //alert box display birds

JavaScript Array 对象参考手册
http://www.w3school.com.cn/js/jsref_obj_array.asp

5、函数

     JavaScript中函数和对象相似，你可以定义一个函数，创建一个新的函数，甚至输出一个函数。正是因为有了这个功能，你可以将一个函数给一个变量或数组元素，甚至可以将其作为参数传给另一个函数调用。

     在 JavaScript中有3种创建函数的方法：声明式的/静态的、动态的/匿名的、字面量式的。在使用它们之前，理解各种方法的效果是十分重要的。

     如果在一个函数中需要执行多个任务，可以考虑将这个函数拆分成几个更小的单元，这样做可提高复用性。在实际中，尽量让函数短小、使其特定于某个人物、尽量保持通用是应该遵守的规则。

6、匿名函数

匿名/动态函数对于定义一个在运行时才能确定需求的函数而言是个很好的方法。匿名函数每次访问都会解析一次。使用匿名函数构造器：
var variable = new Function("param1", "param2",...,"paramn","function body");

/*
用户将通过 alert对话框来设置定义函数所需的函数体及两个参数，
然后调用该函数，
将其生成的结果输出到页面上。

注：FF调试通过，IE7异常
*/

//提示输入函数体和参数
var func = prompt("Enter function body:");
var x = prompt("Enter value of x:");
var y = prompt("Enter value of y:");

//调用这个匿名参数
var op = new Function("x", "y", func);
var theAnswer = op(x, y); //function anonymous(x, y) {}

//输出函数执行结果
alert("Function is: ", func);
alert("x is: " + x +
"; y is: " + y);
alert("The answer is: " + theAnswer);

/*
输入/输出：
Function is: return x * y;
x is : 33; y is : 11;
The answer is: 363;
*/

7、函数字面量

     函数字面量也称函数表达式，因为这样创建的函数将成为表达式的一部分，而不是一个特有类型的语句，他们像匿名函数一样没有定义函数名称，但函数字面量只会被解析一次，它是静态的。

     当你想实现如吧一个函数作为另一个函数的参数之类的扩展时，函数字面量的特色就会显示出来。

//将第三个参数作为函数来声明
function funcObject(x,y,z){
    alert(z(x,y));
}

//第三个参数是一个函数
funcObject(3, 4, function(x, y){ return x*y})

黄小二 2010-05-26 16:29 发表评论

Javascript学习指南（第2版）笔记(一) Script、数据类型和变量、操作符和语句

黄小二 — Mon, 24 May 2010 09:13:00 GMT

1、Script的 defer属性
 2、为body添加脚本
 3、CDATA小节
 4、null和undefined变量
5、缩减JavaScript代码

1、Script的 defer属性

如果将defer属性设置为"defer"，那么表示该脚本不会生成任何文档内容，于是浏览器可以提前处理页面的剩余部分，在页面处理结束并做好显示准备时才处理脚本部分。defer属性可以提高页面载入的速度，特别是那些引用了大量的JavaScript代码或者庞大的JavaScript程序库的页面。

2、为body添加脚本

     前面我们曾经说过，因为对script元素进行集中管理有利于网页的可维护性，所以script元素通常将添加在网页上的head元素中。然而，在body元素中添加脚本的原因往往是出于性能的考虑。

     因为浏览器从同一个域名并发载入的资源是有限制的，所以，当把脚本添加到head元素中时，首先载入的将是脚本，其次才是文档的剩余部分。此外，浏览器可能会延迟页面剩余部分的显示，因为脚本中可能会调用document.write方法修改document对象。如果JavaScript文件很庞大，那么网页中的图片以及其他重要的信息将会被延迟显示，这所带来的问题远比可维护性更加重要。

     即使在script元素中使用defer属性也不一定能完全解决该问题，特别是并发资源访问和页面显示的限制。

     在High Performance Web Sites（中译版《高性能网站建设指南》一书中，作者推荐将script元素放在文档的最末尾处，这样网页的其他部分就可以优先载入。大多数复杂网站的开发人员更倾向于这种方法。这种方法带来的负面影响是脚本不容易查找，网页的可维护性也较差。

     那么什么才是最佳方法呢？我发现大多数网站并不引用庞大的JavaScript程序库，在保证较好性能的前提下，将脚本放在head元素中，也确保网页可维护性的优势。不过，如果的确需要使用庞大的JavaScript程序库，那么可以考虑将脚本放在页面的最末尾处。

     不论采用何种方法，请确保脚本位置的一致性，要么全部放在head元素中，要么全部在body元素的最末尾处。

3、CDATA小节

     之所以使用CDATA小节，是因为XHTML处理器在解释标记型语言时会识别出所有的开始标签和结束标签。

     在页面文件中通过script元素的src属性引用的JavaScript，是XHTML标准所兼容的，并且不要求使用CDATA小节。如果是嵌入的JavaScript代码，那么就需要使用CDATA小节，特别是包含在body元素中的代码。对于大多数浏览器而言，还需要用JavaScript注释符（//）来隐藏CDATA小节，如示例1.3所示，否则将会出现JavaScript错误。

     当然，保持页面整洁的最佳方式是将JavaScript代码从页面中彻底移去，改成使用链接JavaScript文件的方式。

     在本书的大多数示例中，JavaScript代码是直接嵌入在页面里的，这样可以提高代码的可读性且易于检查。然而，Mozilla推荐将所有嵌入的JavaScript代码都从页面中移去，放在独立的JavaScript文件中。使用独立的JavaScript文件，可以避免校验以及文本解释错误等问题，而不用担心页面是以HTML还是XHTML的方式进行处理。

提示
     使用JavaScript文件往往也能提高网页载入的效率，因为浏览器会在第一次载入文件的时候进行缓存，引用相同文件时则会从缓存中获取。

4、null和undefined变量

null变量是已定义的、值为null的变量。以下是一个null变量的示例：
var nullString = null;

如果变量已经声明但是还没有初始化，那么就是undefined变量：
var undefString;

如果声明了变量并且赋予了初始值，那么该变量就不是null或undefined：
var sValue = "";

     当你使用JavaScript程序库时，或者在一些复杂的代码中，某些变量有可能还没有初始化；如果尝试在表达式中使用这样的变量，那么就有可能得到出乎意料的结果，通常会导致JavaScript错误。如果不确定变量的状态，那么可以在条件表达式中测试该变量，例如：
if (sValue) ...     // 如果变量是null或undefined，那么结果为true，否则是false

     在第3章中将详细介绍条件语句，现在你只需要知道该表达式会判断变量sValue是否已经声明并初始化，如果已声明并初始化则该表达式的值为true，否则，该表达式的值为false。

if (unknownVariable)     // false，变量没有声明或赋值
if (undefinedString)     // false，变量没有赋值
if (nullString)          // false，变量已经声明并且赋值，但是所赋的值是null
if (sValue)               // true，变量已经声明并且赋值（包括空字符串）使用null关键字，可以判断数值是否为null：

if (sValue == null)
在JavaScript中，即使变量已经声明，但只要还没有初始化就是undefined变量。如果变量已经声明并初始化，那么变量就不是null或undefined。然而，在该示例中它是一个全局变量，正如之前的章节所述，没有以var关键字声明的变量可能会引起各种各样的问题。

5、缩减JavaScript代码

     空格能够提高代码的可读性，但同时也会增加文件的大小。通常情况下，这没什么影响，因为大多数JavaScript文件都非常小。然而，对于某些大型Ajax应用，或者复杂的JavaScript程序库来说，太大的JavaScript文件会影响载入JavaScript的速度。

     如果要尽可能压缩JavaScript文件，那么可以选用一些免费的工具，例如Dean Edward的Packer（http://dean.edwards.name/packer/），它能够在线压缩JavaScript代码。或者使用Wikipedia中"minify"条目（http://en.wikipedia.org/wiki/Minify）中所列举的工具，这些工具可以在桌面或者服务器上使用。

     另一类工具是用来保护JavaScript代码版权的。这些工具不仅仅会压缩JavaScript代码，甚至还会对代码进行加密，从而使代码难以阅读。

黄小二 2010-05-24 17:13 发表评论

各浏览器中javascript兼容性问题

黄小二 — Mon, 10 May 2010 16:10:00 GMT

1、使用setAttribute()改变网页中标签的onclick属性
 2、IE中通过 setAttribute添加的属性

1、使用setAttribute()改变网页中标签的onclick属性 *p1

setAttribute设置style和onclick这些属性在IE中是行不通的。

注：
*p1：使用setAttribute()改变网页中标签的onclick属性 http://blog.csdn.net/Cnami/archive/2008/05/27/2486516.aspx

2、IE中通过 setAttribute添加的属性 *p2

IE下setAttribute设置元素的对象、集合和事件属性都只当成普通属性，起不到原有的作用，但可以直接进行赋值操作。

注：
*p2：[求助]通过 setAttribute 添加的属性在 IE 下不被实现？ http://bbs.blueidea.com/viewthread.php?tid=2290521

黄小二 2010-05-11 00:10 发表评论

JavaScript 脚本收集、乱码

黄小二 — Fri, 23 Apr 2010 10:13:00 GMT

源码爱好者层和布局

效果:
弹出可拖动提示层(模式窗口)

[原]解决JS中文乱码
http://www.cnblogs.com/xjyggd/archive/2009/04/14/1436000.html

[原]解决JS中文乱码
方法一： <script src="../JS/common.js" type="text/javascript" charset="gb2312">script> 加上charset="gb2312"就可以了。
方法二：把JS文件的编码改成UTF-8　(VS2005的默认编码）
方法三：把asp.net页面的输出编码改成gb2312（页面/web.config都可设置）

Cookies的内容编码格式
Cookies的值中可以保存除了“;”以外的标点符号。但是不能保存汉字。保存汉字会出现乱码。
所以对于Cookies中的内容要进行统一的编码和解码。为了在浏览器端和服务器端都能够进行解码和编码，所以要统一使用UTF编码格式。
主要是因为javascript中只能使用UTF编码格式。

黄小二 2010-04-23 18:13 发表评论

创建Tooltips方案

黄小二 — Wed, 21 Apr 2010 04:49:00 GMT

出自：
11个出色的创建Tooltips的方案
http://www.qianduan.net/11-excellent-program-to-create-tooltips.html

AjaxCode -- Tooltips：消息提醒框控件
http://www.open-open.com/ajax/Tooltips.htm

1. Easy CSS Tooltip
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/

Here is the 4 line magic (3lines css, 1line html):

/* css tooltip */
a:hover
{
    _background: Transparent;
}
/*BG color is a must for IE6*/
a.tooltip span
{
    display: none;
    padding: 6px 10px;
    text-indent: 0px;
    line-height: 18px;
}
a.tooltip:hover span
{
    display: inline;
    position: absolute;
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #6c6c6c;
    text-decoration: none;
}
/* end of css

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.span>a>.

2. jtip
http://codylindley.com/blogstuff/js/jtip/

黄小二 2010-04-21 12:49 发表评论

动态添加/删除HTML元素

黄小二 — Mon, 04 May 2009 14:18:00 GMT

本文出自动态删除Html元素(请教高手)

DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN"   >
<HTML>
<HEAD>
<title>WebForm2title>
<meta   name="GENERATOR"   Content="Microsoft   Visual   Studio   .NET   7.1">
<meta   name="CODE_LANGUAGE"   Content="C#">
<meta   name="vs_defaultClientScript"   content="JavaScript">
<meta   name="vs_targetSchema"   content="http://schemas.microsoft.com/intellisense/ie5">
<script   language="javascript">
    var count= 0 ;
    var maxfile = 5;        //最大允许数目

    //增加元素
    function addUpload() {
        if(count >= maxfile)    return;        //限制最多maxfile个文件框
        count++;

        //每次自增id不同的HTML对象，并附加到容器最后
        var newDiv =  "" + count +">"
            + " " + count + " type=file size=50 name=upload>"
            + " " + count + "');>删除"
            + "

";
          document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);
    }

    //删除指定元素
    function delUpload(diva) {
        count--;
        document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));
    }

  script>
HEAD>
<body   MS_POSITIONING="GridLayout">
<form   id="Form1"   method="post"   runat="server"   enctype="multipart/form-data">
  <div>
    <table>
      <tr>
        <td   id="tdRrmove"   width="2000">


        <div id="uploadContent">

        div>

        td>
      tr>
    table>
  div>
  <a href="javascript:addUpload()">添加附件a>
  <br/>
  <br/>
form>
body>
HTML>

黄小二 2009-05-04 22:18 发表评论

Ajax 对页面元素的操作

黄小二 — Sat, 25 Apr 2009 15:18:00 GMT

JavaScript的Table表格对象
DOM操作表格对象——table方法
javascript 取table中内容

Title

取值方法
var value==window.table1.rows.item(0).cells.item(0).innerText;

该行第1列的值
onMouseDown="str=this.cells.item(0).innerText"

这可以取鼠标所在列的值
2行1列

CSS+JS实现鼠标经过改变表单背景色
JS解决IE 6不支持:hover伪类的简单方法

css2中规定，:hover伪类可以应用在全部元素上，而ie6只支持的伪类，因此对于ie6需要使用js，而ie7/ff/op/sa直接定义:hover即可。

黄小二 2009-04-25 23:18 发表评论

Ajax 开发中遇到的乱码问题

黄小二 — Sat, 25 Apr 2009 14:49:00 GMT

Ajax开发过程中提交获取数据的乱码问题

摘录

# re: Ajax开发过程中提交获取数据的乱码问题 2006-09-06 15:32 | 乌鸦在黑夜里飞

实际上所有的问题都来自编码的不统一：
1、HTTP/POST方式在缺省情况下，采用的是“x-www-form-urlencoded”进行编码，它和JavaScript里面的encodeURI所起的作用是一样的；
2、经过这样编码的内容，到达后台时，其中的字符都是UTF-8编码格式的；
3、如果你的Servlet/JSP指定输出使用的Content-Type是UTF-8，恭喜你，你不需要对这些Parameters进行特别的编码、解码操作，它一定是正常的；
4、否则你需要对这些parameter进行解、编码操作，例如你的页面是GBK编码，那么你需要这么写：
String sPara = new String(request.getParamter("test").getBytes("iso-8859-1"),"GBK");
采用gb2312编码的也可以采用GBK编码；
5、如果你是在eclipse中进行工作，请注意你的Servlet和JSP文件的属性，其中的编码必须和content-type中设置的一样，否则javac会对你的文件进行错误的编码，这时候的字节码文件本身的字符串就是错误的，输出也不顶用；
6、最后做一个总结：
6.1、servlet/JSP文件本身的编码必须和content-type输出的一致，否则需要加入额外的编码、解码步骤；
6.2、HTTP/POST方式和encodeURI方式传入的编码都是UTF-8的；
6.3、普通的window.open(...)，也就是HTTP/GET方式，其传入的编码是和运行script的页面编码一致的；
6.4、后台解码必须通过iso-8859-1进行解码，再使用你的目标编码进行编码；
6.5、所有的问题基本上可以得到解决。

回复更多评论

解决AJAX的乱码，可以用 escape()函数的呀。
escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

在asp中解决乱码问题只需要在服务器端加上<%Response.ContentType = "text/html;charset=GB2312"%>

黄小二 2009-04-25 22:49 发表评论

关于手写 Ajax

黄小二 — Sun, 22 Mar 2009 01:50:00 GMT

  function showSchedule(sid,f){
   var url = "../schedule.do?operate=toFindById";
   var postStr = "uid=" + encodeURI(sid);

    //IE浏览器关于频繁传送数据初始化的问题
   httpRequest.open("POST", url, true);
   httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState == 4)
     if(httpRequest.status == 200){
      var xml = createXml(httpRequest.responseText);
      var item = xml.getElementsByTagName("Schedule")[0];

      var scheduleId = item.getElementsByTagName("scheduleId")[0].firstChild.nodeValue;
      var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
      var schContent = item.getElementsByTagName("schContent")[0].firstChild.nodeValue;
      var address = item.getElementsByTagName("address")[0].firstChild.nodeValue;
      var ifPrivate = item.getElementsByTagName("ifPrivate")[0].firstChild.nodeValue;
      var createTime = item.getElementsByTagName("createTime")[0].firstChild.nodeValue;
      var beginTime = item.getElementsByTagName("beginTime")[0].firstChild.nodeValue;
      var endTime = item.getElementsByTagName("endTime")[0].firstChild.nodeValue;
      var meetingId = item.getElementsByTagName("meetingId")[0].firstChild.nodeValue;

      f.scheduleId.value = scheduleId;
      f.title.value = title;
      f.address.value = address;
      f.meetingId.value = meetingId;
      f.schContent.value = schContent;
      if(ifPrivate == 0)
       f.ifPrivate.checked = true;
      else
       f.ifPrivate.checked = false;

      f.beginTime.value = beginTime;
      f.endTime.value = endTime;
      f.option.value = "doModify";
     }
   }
   httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   httpRequest.send(postStr);
  }

====================================

dom4j-1.6.1.jar

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

    Document doc = DocumentHelper.createDocument();
    Element node = doc.addElement("Depart");

    Element departId = node.addElement("departId");
    departId.setText(item.getDepartId().toString());
    Element branchId = node.addElement("branchId");
    branchId.setText(item.getBranchId().toString());
    Element departName = node.addElement("departName");
    departName.setText(item.getDepartName());
    Element principalUserId = node.addElement("principalUserId");
    principalUserId.setText(item.getPrincipalUserId().toString());
    Element connectTelNo = node.addElement("connectTelNo");
    connectTelNo.setText(item.getConnectTelNo());
    Element connectMobileTelNo = node.addElement("connectMobileTelNo");
    connectMobileTelNo.setText(item.getConnectMobileTelNo());
    Element faxes = node.addElement("faxes");
    faxes.setText(item.getFaxes());

    PrintWriter out = response.getWriter();
    out.println(doc.asXML());
    out.flush();
    out.close();

================================

request.setContentType("text/xml");

httpRequest.resoponseXML;

===========================
利用函数格式化 POST 请求参数

function addParam(paramObj, paramName, paramValue){
  if(paramObj.length > 0)
   paramObj += "&";
  return paramObj + encodeURIComponent(paramName)
   + "=" + encodeURIComponent(paramValue);
}

=============================================
javascript 里面的遍历

for (pop in windowxxxx){
    .....
}

黄小二 2009-03-22 09:50 发表评论