Just is here--恰恰在这里 » javascript http://ishere.cn Jena's blog Sat, 14 Apr 2012 07:27:14 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JS jscript做小数乘法运算出现浮点错误的解决办法 http://ishere.cn/2008/07/15/jsjavascriptzuoxiaoshuchengfacuowujiejuebanfa.html http://ishere.cn/2008/07/15/jsjavascriptzuoxiaoshuchengfacuowujiejuebanfa.html#comments Tue, 15 Jul 2008 04:51:23 +0000 jena http://www.aobodo.com/?p=173 在Javascript里计算小数乘法，容易出现浮点错误，例如：



输出结果：

1.4300000000000001
1.32

解决问题的思路就是，先把因数放大为整数，最后再除以相应的倍数，这样就能得到正确的结果了。解决办法如下：
1、 在算式中解决



2、添加到Number的原型方法里


使用方法：假如11*22.9,可以这样写tran(11,22.9),这样，问题就解决了。

]]> http://ishere.cn/2008/07/15/jsjavascriptzuoxiaoshuchengfacuowujiejuebanfa.html/feed 1 正则(JS)re=new RegExp(“^\d*$”);与re=/^d*$/;之间区别? http://ishere.cn/2008/05/13/zhengzejsrenew-regexpdyuredzhijianqubie.html http://ishere.cn/2008/05/13/zhengzejsrenew-regexpdyuredzhijianqubie.html#comments Wed, 14 May 2008 01:01:11 +0000 jena http://www.aobodo.com/?p=157 Continue reading →]]> 以下代码结果为:FALSE,TRUE,TRUE , 结果中为什么第一个为FALSE呢?
<form name=form1>
字符串:<input name=”t1″ value=”123456″>
模式:/<input name=”t2″ value=”^d*$”>/
</form>
<script language=javascript>
function c1()
{
re=new RegExp(“^d*$”);
alert(re.test(“123456″));
}
function c2(form)
{
re=new RegExp(form.t2.value);
alert(re.test(form.t1.value));
}
function c3()
{
re=/^d*$/;
alert(re.test(“123456″));
}
c1();
c2(document.form1);
c3();
</script>
第一个应为 re=new RegExp(“^\d*$”);
在引号中需要转义
第一个表达式有双引号，双引号要加多一次转义的，第二个没有，这就是区别

]]> http://ishere.cn/2008/05/13/zhengzejsrenew-regexpdyuredzhijianqubie.html/feed 0 Javascript跨域读取数据的新突破！ http://ishere.cn/2008/05/04/javascriptkuayuduqushujudexintupo.html http://ishere.cn/2008/05/04/javascriptkuayuduqushujudexintupo.html#comments Sun, 04 May 2008 13:49:21 +0000 jena http://www.aobodo.com/?p=156 首先一点，这里的跨域不是类似 aaa.test.com 和 bbb.test.com的二级域名跨域，这种跨域的问题好像有很多人研究过了，而且也实现了。我这里说的跨域是像www.aaa.com和www.bbb.com这样的跨域。

再说一下我研究的这个跨域所要实现的功能吧，我有自己的域名www.aaa.com，我的域名下有一个图片列表页面，这个页面需要在其他域名，例如www.bbb.com的页面上显示，说到这里，可能有些朋友会说，提供一段代码，在www.bbb.com上iframe一下，不就结了吗，也牵扯不到跨域的问题，但是有一点，如果是ifame的方式在bbb.com上显示的话，这个iframe窗体的高度不是能够随着我的图片页面的高度变化的，也就是说，如果我提供的图片页面很长，那么就会在bbb.com的页面上显示滚动条，这样的话，页面会变得很难看，而这是我所希望的。

好了，说一下我的实现方式，我采用JS直接创建层的方式在bbb.com的show.html页面上直接创建我所需要的数据容器层，

<div id=”Data-Container”></div>

然后再把获取数据的链接get.asp附加到页面上<head>元素里面，利用OBJ.appendChild(obj),

<head>
<script src=”http://www.aaa.com/…/get.asp” id=”Data-Handler”></script>
</head>

在链接页面获取到数据

var content = ‘this is test content’; 以后，

在该页面的底部执行预先定义好的赋值函数

function SetData(){
document.getElementById(‘Data-Container’).innerHTML = content;
}

这样，原本在aaa.com域名下的数据就巧妙的显示到了bbb.com域名下的页面里，关键一点是，层Data-Container的高度会随着获取到数据的大小而自动调整大小，这样，show.html的高度也会自动调整了，就不会出现难看的上下滚动条了。

当然，这只是一个简单的工作原理，其中还有好多需要注意的地方，比如更复杂的回传参数，更新数据等，剩下的下次再写吧。

]]> http://ishere.cn/2008/05/04/javascriptkuayuduqushujudexintupo.html/feed 1 javascript用DOM解释XML[转] http://ishere.cn/2006/12/30/javascript-dom-xml.html http://ishere.cn/2006/12/30/javascript-dom-xml.html#comments Sat, 30 Dec 2006 07:15:48 +0000 jena http://news.aobodo.com/?p=98 Continue reading →]]>

在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：

这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。

HTML文档的节点

DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：

接口
nodeType常量
nodeType值
备注

Element
Node.ELEMENT_NODE
1
元素节点

Text
Node.TEXT_NODE
3
文本节点

Document
Node.DOCUMENT_NODE
9
document

Comment
Node.COMMENT_NODE
8
注释的文本

DocumentFragment
Node.DOCUMENT_FRAGMENT_NODE
11
document片断

Attr
Node.ATTRIBUTE_NODE
2
节点属性

DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。

Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：

方法
描述

createAttribute()
用指定的名字创建新的Attr节点。

createComment()
用指定的字符串创建新的Comment节点。

createElement()
用指定的标记名创建新的Element节点。

createTextNode()
用指定的文本创建新的TextNode节点。

getElementById()
返回文档中具有指定id属性的Element节点。

getElementsByTagName()
返回文档中具有指定标记名的所有Element节点。

对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如
标记的border属性。下面列出Element常用的属性：

属性
描述

tagName
元素的标记名称，比如<p>元素为P。HTML文档返回的tabName均为大写。

Element常用的方法：

方法
描述

getAttribute()
以字符串形式返回指定属性的值。

getAttributeNode()
以Attr节点的形式返回指定属性的值。

getElementsByTabName()
返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。

hasAttribute()
如果该元素具有指定名字的属性，则返回true。

removeAttribute()
从元素中删除指定的属性。

removeAttributeNode()
从元素的属性列表中删除指定的Attr节点。

setAttribute()
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性。

setAttributeNode()
把指定的Attr节点添加到该元素的属性列表中。

Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的 getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和 setAttribute()两个方法，而不是Attr对象。

使用DOM操作HTML文档

Node对象定义了一系列属性和方法，来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和 previousSibling进行逆向循环操作，也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、 removeChild()、replaceChild()方法可以改变一个节点的子节点从而改变文档树。

需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法：

Node对象常用属性：

属性
描述

attributes
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。

childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。

firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。

lastChild
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。

nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。

nodeName
节点的名字，Element节点则代表Element的标记名称。

nodeType
代表节点的类型。

parentNode
以Node的形式返回当前节点的父节点。如果没有父节点，则为null。

previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。

Node对象常用方法：

方法
描述

appendChild()
通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。

cloneNode()
复制当前节点，或者复制当前节点以及它的所有子孙节点。

hasChildNodes()
如果当前节点拥有子节点，则将返回true。

insertBefore()
给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。

removeChild()
从文档树中删除并返回指定的子节点。

replaceChild()
从文档树中删除并返回指定的子节点，用另一个节点替换它。

接下来，让我们使用上述的DOM应用编程接口，来试着操作HTML文档。

A、遍历文档的节点

DOM把一个HTML文档视为树，因此，遍历整个树是应该是家常便饭。跟之前说过的一样，这里我们提供两个遍历树的例子。通过它，我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树。

例子1– sample3_1.htm：

这个例子使用了childNodes[]和递归方式来遍历整个文档，统计文档中出现的Element元素总数，并把Element标记名全部打印出来。需要特别注意的是，在使用DOM时，必须等文档被装载完毕再执行遍历等行为操作文档。sample3_1.htm具体代码如下：


onClick="alert('标记总数：' + countTotalElement(document) + ‘rn全部标记如下：rn' + elementName);elementName=";">开始统计

运行效果如下：

例子2 – sample3_2.htm：

接下来使用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数，其他跟sample3_1.htm一样：


function countTotalElement(node) { //参数node是一个Node对象

var total = 0;

if(node.nodeType == 1) { //检查node是否为Element对象

total++; //如果是，计数器加1

elementName = elementName + node.tagName + "rn"; //保存标记名

}

var childrens = node.childNodes; //获取node的全部子节点

for(var m=node.firstChild; m!=null;m=m.nextSibling) {

total += countTotalElement(m); //在每个子节点上进行递归操作

}

return total;

}

B、搜索文档中特定的元素

在使用DOM的过程中，有时候需要定位到文档中的某个特定节点，或者具有特定类型的节点列表。这种情况下，可以调用Document对象的getElementsByTagName()和getElementById()方法来实现。

document.getElementsByTagName()返回文档中具有指定标记名的全部Element节点数组（也是NodeList类型）。Element出现在数组中的顺序就是他们在文档中出现的顺序。传递给getElementsByTagName()的参数忽略大小写。比如，想定位到第一个<table>标记，可以这样写：document.getElementsByTagName("table")[0]。例外的，可以使用document.body定位到<body>标记，因为它是唯一的。

getElementsByTagName()返回的数组取决于文档。一旦文档改变，返回结果也立即改变。相比，getElementById() 则比较灵活，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性值。这个我们在《AJAX开发简略》的"级联菜单"例子中已经使用过了。

Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜索领域只针对调用者的子节点。

C、修改文档内容

遍历整棵文档树、搜索特定的节点，我们最终目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演示如何修改文档内容。

例子3 — sample4_1.htm：

这个例子包含三个文本节点和一个按钮。点击按钮后，三个文本节点和按钮的顺序将被颠倒。程序使用了Node的appendChild()和removeChild()方法。


第一行

第二行

第三行

onClick="reverseNode(document.body)">

例子4– sample4_2.htm：

例子1通过直接操作body的子节点来修改文档。在HTML文档中，布局和定位常常通过表格<table>来实现。因此，例子4将演示操作表格内容，将表格的四个单元行顺序颠倒。如果没有使用<tbody>标签，则<table>把全部的<tr>当做是属于一个子节点<tbody>，所以我们采用数组缓存的方式，把行数据颠倒一下。这个例子同时也演示了如何使用DOM创建表格单元行。


第一行
第二行
第三行
第四行

例子5 — sample4_3.htm：

正如我们在Node节点介绍部分所指出的那样，appendChild()、replaceChild()、removeChild()、insertBefore()方法会立即改变文档的结构。下面的例子包含两个表格，我们试着把表格二的内容替换表格一的内容。


表格一

表格二

注意，当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被转移到 table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释，试着运行一下，应该就知道文档是怎么改变的了。

D、往文档添加新内容

在学会遍历、搜索、修改文档之后，我们现在试着网文档添加新的内容。其实没有什么新意，只是利用我们上述提到的Node的属性和方法而已，还是操作<table>标记的内容。有新意的是，我们要实现一个留言簿。是的，留言簿，你可以往里面留言，只是不能刷新噢。

例子6 – sample5_1.htm：


网友留言列表：

我们之前说过，<table>的子节点是<tbody>，<tbody>的子节点才是<tr>，<tr>是<td>的父节点，最后<td>内部的TextNode节点。所以，往<table>增加单元格行要逐级形成，就像往树里面添加一个枝桠一样，要有叶子有径。看看，这个留言簿是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一种方法。

E使用DOM操作XML文档

在数据表示方面，XML文档更加结构化。DOM在支持HTML的基础上提供了一系列的API，支持针对XML的访问和操作。利用这些API，我们可以从XML中提取信息，动态的创建这些信息的HTML呈现文档。处理XML文档，通常遵循"加载XML文档à提取信息à加工信息à创建HTML文档"的过程。下面的例子演示了如何加载并处理XML文档。

这个例子包含两个JS函数。loadXML()负责加载XML文档，其中既包含加载XML文档的2级DOM代码，又有实现同样操作的 Microsoft专有API代码。需要提醒注意的是，文档加载过程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加载完成后调用。

例子中的另外一个函数makeTable()，则在XML文档加载完毕之后，使用最后前介绍过的DOM应用编程接口读取XML文档信息，并利用这些信息形成一个新的table表格。

例子7 — sample6_1.htm：


供读取调用的XML文档 – employees.xml：


Programmer

32768

Sales

70000

CEO

100000

处理XML文档

脱离XML文档的AJAX是不完整的。在本部分未完成之前，有读者说AJAX改名叫AJAH（H应该代表HTML吧）比较合适。应该承认，XML文档在数据的结构化表示以及接口对接上有先天的优势，但也不是所有的数据都应该用XML表示。有些时候单纯的文本表示可能会更合适。下面先举个AJAX处理返回XML文档的例子再讨论什么时候使用XML。

7.5.1、处理返回的XML

例子8 — sample7_1.htm：

在这个例子中，我们采用之前确定的AJAX开发框架，稍微修改一下body内容和processRequest的相应方式，将先前的employees.xml的内容读取出来并显示。

body的内容如下：


processRequest()方法修改如下：

// 处理返回信息的函数


function processRequest() {

if (http_request.readyState == 4) { // 判断对象状态

if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

var returnObj = http_request.responseXML;

var xmlobj = http_request.responseXML;

var employees = xmlobj.getElementsByTagName("employee");

var feedbackStr = "";

for(var i=0;i

var employee = employees[i];

feedbackStr += "员工：" + employee.getAttribute("name");

feedbackStr +=

" 职位：" + employee.getElementsByTagName("job")[0].firstChild.data;

feedbackStr +=

" 工资：" + employee.getElementsByTagName("salary")[0].firstChild.data;

feedbackStr += "rn";

}

alert(feedbackStr);

} else { //页面不正常

alert("您所请求的页面有异常。");

}

}

}

运行一下，看来效果还不错：

7.5.2、选择合适的XML生成方式

现在的web应用程序往往采用了MVC三层剥离的设计方式。XML作为一种数据保存、呈现、交互的文档，其数据往往是动态生成的，通常由 JavaBean转换过来。由JavaBean转换成XML文档的方式有好几种，选择合适的转换方式往往能达到事半功倍的效果。下面介绍两种常用的方式，以便需要的时候根据情况取舍。

A、类自行序列化成XML

类自行序列化成XML即每个类都实现自己的toXML()方法，选择合适的API、适当的XML结构、尽量便捷的生成逻辑快速生成相应的XML文档。显然，这种方式必须要求每个类编写专门的XML生成代码，每个类只能调用自己的toXML()方法。应用诸如JDOM等一些现成的API，可以减少不少开发投入。例子9是一个利用JDOM的API形成的toXML()方法。

例子9 — toXml() 的 JDOM 实现 — Employ类的toXml()方法：


public Element toXml() {

Element employee = new Element("employee");

Employee.setAttribute("name",name);

Element jobE = new Element("job").addContent(job);

employee.setContent(jobE);

Element salaryE = new Element("salary").addContent(salary);

employee.setContent(salaryE);

return employee;

}

JDOM提供了现成的API，使得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个Document，然后使用 XMLOutputter把文档写入servlet就可以了。toXml()允许递归调用其子类的toXML()方法，以便生成包含子图的XML文档。

使用类自行序列化成XML的方式，要每个类都实现自己的toXML()方法，而且存在数据模型与视图耦合的问题，即要么为每个可能的视图编写独立的toXML()方法，要么心甘情愿接收冗余的数据，一旦数据结构或者文档发生改变，toXML()就要做必要的修改。

B、页面模板生成XML方式

一般的，可以采用通用的页面模板技术来生成XML文档，这个XML文档可以符合任何需要的数据模型，供AJAX灵活的调用。另外，模板可以采用任何标记语言编写，提高工作效率。下面是一个采用Struts标签库编写的XML文档，输出之前提到的employees.xml：

Sample8_2.jsp：


<%@ page contentType="application/xml; charset=gb2312" import="Employee"%>

<%@ page import="java.util.Collection,java.util.ArrayList"%>

<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>

<%

Employee em1 = new Employee();

em1.setName("J.Doe");

em1.setJob("Programmer");

em1.setSalary("32768");

Employee em2 = new Employee();

em2.setName("A.Baker");

em2.setJob("Sales");

em2.setSalary("70000");

Employee em3 = new Employee();

em3.setName("Big Cheese");

em3.setJob("CEO");

em3.setSalary("100000");

Collection employees = new ArrayList();

employees.add(em1);

employees.add(em2);

employees.add(em3);

pageContext.setAttribute("employees",employees);

%>

采用页面模板生成XML方式，需要为每个需要的的数据模型建立一个对立的JSP文件，用来生成符合规范的XML文档，而不能仅仅在类的toXML()方法中组织对象图来实现。不过，倒是可以更加方便的确保标记匹配、元素和属性的顺序正确以及XML实体正确转义。

参考资料中Philip McCarthy的文章还描述了一种Javascript对象标注的生成方式，本文在此不赘述。有兴趣的读者可以自行查看了解。

7.5.3、如何在使用XML还是普通文本间权衡

使用XML文档确实有其方便之处。不过XML文档的某些问题倒是要考虑一下，比如说延迟，即服务器不能立即解析XML文档成为DOM模型。这个问题在一定程度上会影响AJAX要求的快速反应能力。另外，某些情况下我们并不需要使用XML来表示数据，比如说数据足够简单成只有一个字符串而已。就好像我们之前提到的数据校验和级联菜单的例子一样。所以，个人认为在下面这些情况下可以考虑使用XML来作为数据表示的介质：

l 数据比较复杂，需要用XML的结构化方式来表示

l 不用考虑带宽和处理效率支出

l 与系统其他API或者其他系统交互，作为一种数据中转中介

l 需要特定各式的输出视图而文本无法表示的

总之，要认真评估两种表示方式的表示成本和效率，选择合适的合理的表示方式。

]]> http://ishere.cn/2006/12/30/javascript-dom-xml.html/feed 0 用javascript操作xml[转] http://ishere.cn/2006/12/30/javascript-xml.html http://ishere.cn/2006/12/30/javascript-xml.html#comments Sat, 30 Dec 2006 07:11:30 +0000 jena http://news.aobodo.com/?p=97 Continue reading →]]> 我认为这篇文章很有用!
============================================
1.xml文件如下：

<?xml version=”1.0″ encoding=”UTF-8″?>
<zip>
<city>
mycity</city>
<state>mystate</state>
</zip>

2.读此xml的javascript例子：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Insert title here</title>
<script language=”javascript” type=”text/javascript”>

var url = “NewFile.xml”;
String.prototype.Trim = function() { return this.replace(/(^s*)|(s*$)/g, “”); }

var xmlDoc;

var moz = (typeof document.implementation != ‘undefined’)
&& (typeof document.implementation.createDocument != ‘undefined’);
var ie = (typeof window.ActiveXObject != ‘undefined’);

function importXML(file) {

if (moz) {
xmlDoc = document.implementation.createDocument(“”, “doc”, null);

} else if (ie) {
xmlDoc = new ActiveXObject(“MSXML2.DOMDocument.3.0″);
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
}

xmlDoc.load(file);
}
importXML(url);

function updateCityState(){
if (moz) {
var zip = xmlDoc.getElementsByTagName(“zip”)[0];
var city;
var _city = zip.getElementsByTagName(“city”)[0].firstChild.nodeValue;
if (_city) city = _city.Trim();

var state;
var _state=zip.getElementsByTagName(“state”)[0].firstChild.nodeValue;
if(_state) state = _state.Trim();

document.getElementById(‘city’).value = city;
document.getElementById(‘state’).value = state;

} else if (ie) {
var city;
var _city = xmlDoc.selectSingleNode(“/zip/city”);
if (_city) city = _city.text;
var state;
var _state=xmlDoc.selectSingleNode(“/zip/state”);
if(_state) state = _state.text;
document.getElementById(‘city’).value = city;
document.getElementById(‘state’).value = state;
}
}
</script>
</head>
<body>
<form action=”post”>

<p>
ZIP code:
<input type=”text” size=”5″ name=”zip” id=”zip” onblur=”updateCityState();” />

</p>
City:
<input type=”text” name=”city” id=”city” />

State:
<input type=”text” size=”2″ name=”state” id=”state” />

</form>
</body>
</html>

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

在网络浏览器软件中，可以Internet Explorer (IE)现在是一种标准的软件。可以看到，运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE。微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中。

在本篇文章中，我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档，由此允许网络冲浪者操纵它们。

网上冲浪
我们以一个标准的顺序文档而开始，如表A所示。这一文档包含简单的顺序数据以提供网络冲浪者浏览之用。不仅仅为了显示这些数据，我们还提供了一个简单的用户界面，网上冲浪都可以使用这一界面来浏览XML文档。

表A: order.xml
<?xml version=”1.0″ ?>
<Order>
<Account>9900234</Account>
<Item id=”1″>
　 <SKU>1234</SKU>
　 <PricePer>5.95</PricePer>
　 <Quantity>100</Quantity>
　 <Subtotal>595.00</Subtotal>
　 <Description>Super Widget Clamp</Description>
</Item>
<Item id=”2″>
　 <SKU>6234</SKU>
　 <PricePer>22.00</PricePer>
　 <Quantity>10</Quantity>
　 <Subtotal>220.00</Subtotal>
　 <Description>Mighty Foobar Flange</Description>
</Item>
<Item id=”3″>
　 <SKU>9982</SKU>
　 <PricePer>2.50</PricePer>
　 <Quantity>1000</Quantity>
　 <Subtotal>2500.00</Subtotal>
　 <Description>Deluxe Doohickie</Description>
</Item>
<Item id=”4″>
　 <SKU>3256</SKU>
　 <PricePer>389.00</PricePer>
　 <Quantity>1</Quantity>
　 <Subtotal>389.00</Subtotal>
　 <Description>Muckalucket Bucket</Description>
</Item>
<NumberItems>1111</NumberItems>
<Total>3704.00</Total>
<OrderDate>07/07/2002</OrderDate>
<OrderNumber>8876</OrderNumber>
</Order>

我们使用一个网络表单以访问这一XML文档，这一表单将显示SKU，价格，数量，各部分的小计，以及顺序中的每一选项的描述。我们的表单还包含向前和向后浏览选项的按钮。

网页的构成
网页的重要部分是在于表单，我们将使用一个表以易读的方式在屏幕上显示。下面是显示HTML表的代码片段：

<form>
<table border=”0″>
　 <tr><td>SKU</td><td><input type=”text” name=”SKU”></td></tr>
　 <tr><td>Price</td><td><input type=”text” name=”Price”></td></tr>
　 <tr><td>Quantity</td><td><input type=”text” name=”Quantity”></td></tr>
　 <tr><td>Total</td><td><input type=”text” name=”Total”></td></tr>
　 <tr><td>Description</td><td><input type=”text”
name=”Description”></td></tr>
</table>
<input type=”button” value=” << ” onClick=”getDataPrev();”> <input
type=”button” value=” >> ” onClick=”getDataNext();”>
</form>

请注意到，我们在表的下面包含了两个按钮，即通过getDataNext() 和getDataPrev()函数来浏览前一个和后一个的记录，这也是我们所要讨论的问题。

脚本
其实，我们网页的实质部分不是在于表单，而是在于控制表单的脚本。在我们的脚本中包括四个部分。首先，我们通过载入XML文档而初始化网页。第二部分是导航到下一个记录。第三步是导航到前一个记录。第四部分是从XML文档中提取单一的值。表B显示了我们的网页的全部内容。

表B: jsxml.html
<html>
<head>
　 <script language=”JavaScript”>
<!–
　 vari = -1;
　 varorderDoc = new ActiveXObject(“MSXML2.DOMDocument.3.0″);
　 orderDoc.load(“order.xml”);
　 var items = orderDoc.selectNodes(“/Order/Item”);
　　　
　 function getNode(doc, xpath) {
　　 varretval = “”;
　　 var value = doc.selectSingleNode(xpath);
　　 if (value) retval = value.text;
　　 return retval;
　 }
　
　 function getDataNext() {
　　 i++;
　　 if (i > items.length – 1) i = 0;

　　 document.forms[0].SKU.value = getNode(orderDoc, “/Order/Item[" +
i + "]/SKU”);
　　 document.forms[0].Price.value = getNode(orderDoc, “/Order/Item["
+ i + "]/PricePer”);
　　 document.forms[0].Quantity.value = getNode(orderDoc,
“/Order/Item[" + i + "]/Quantity”);
　　 document.forms[0].Total.value = getNode(orderDoc, “/Order/Item["
+ i + "]/Subtotal”);
　　 document.forms[0].Description.value = getNode(orderDoc,
“/Order/Item[" + i + "]/Description”);
　 }
　
　 function getDataPrev() {
　　 i–;
　　 if (i < 0) i = items.length – 1;
　　
　　 document.forms[0].SKU.value = getNode(orderDoc, “/Order/Item[" +
i + "]/SKU”);
　　 document.forms[0].Price.value = getNode(orderDoc, “/Order/Item["
+ i + "]/PricePer”);
　　 document.forms[0].Quantity.value = getNode(orderDoc,
“/Order/Item[" + i + "]/Quantity”);
　　 document.forms[0].Total.value = getNode(orderDoc, “/Order/Item["
+ i + "]/Subtotal”);
　　 document.forms[0].Description.value = getNode(orderDoc,
“/Order/Item[" + i + "]/Description”);
　 }
　
// –>
　 </script>
</head>
<body onload=”getDataNext()”>
<h2>XML order Database</h2>
<form>
<table border=”0″>
　 <tr><td>SKU</td><td><input type=”text” name=”SKU”></td></tr>
　 <tr><td>Price</td><td><input type=”text” name=”Price”></td></tr>
　 <tr><td>Quantity</td><td><input type=”text”
name=”Quantity”></td></tr>
　 <tr><td>Total</td><td><input type=”text” name=”Total”></td></tr>
　 <tr><td>Description</td><td><input type=”text”
name=”Description”></td></tr>
</table>
<input type=”button” value=” << ” onClick=”getDataPrev();”> <input
type=”button” value=” >> ” onClick=”getDataNext();”>
</form>
</body>
</html>

运行
这一网页将传入并运行脚本的初始化。你一定确保order.xml文档与jsxml.html在相同的相同的路径上。

初始化部分将一个新的ActiveX对象例示为MSXML2.DOMDocument.3.0对象类型，然后脚本传入order.xml文档到内存中，并选择所有的/Order/Item节点。我们使用/Order/Item节点以识别文档已经包含的选项。

文档中的<body>标准有一个onLoad属性，这一属性能够使得网页调用getDataNext()而初始化。这一功能可用于从XML文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。

向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onClick事件而调用getDataNext() 或者getDataPrev()，这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。
==========================================================================

<script language=”JavaScript”>
<!–
var doc = new ActiveXObject(“Msxml2.DOMDocument”); //ie5.5+,CreateObject(“Microsoft.XMLDOM”)

//加载文档
//doc.load(“b.xml”);

//创建文件头
var p = doc.createProcessingInstruction(“xml”,”version=’1.0′ encoding=’gb2312′”);

//添加文件头
doc.appendChild(p);

//用于直接加载时获得根接点
//var root = doc.documentElement;

//两种方式创建根接点
// var root = doc.createElement(“students”);
var root = doc.createNode(1,”students”,”");

//创建子接点
var n = doc.createNode(1,”ttyp”,”");

//指定子接点文本
//n.text = ” this is a test”;

//创建孙接点
var o = doc.createElement(“sex”);
o.text = “男”; //指定其文本

//创建属性
var r = doc.createAttribute(“id”);
r.value=”test”;

//添加属性
n.setAttributeNode(r);

//创建第二个属性
var r1 = doc.createAttribute(“class”);
r1.value=”tt”;

//添加属性
n.setAttributeNode(r1);

//删除第二个属性
n.removeAttribute(“class”);

//添加孙接点
n.appendChild(o);

//添加文本接点
n.appendChild(doc.createTextNode(“this is a text node.”));

//添加注释
n.appendChild(doc.createComment(“this is a commentn”));

//添加子接点
root.appendChild(n);

//复制接点
var m = n.cloneNode(true);

root.appendChild(m);

//删除接点
root.removeChild(root.childNodes(0));

//创建数据段
var c = doc.createCDATASection(“this is a cdata”);
c.text = “hi,cdata”;
//添加数据段
root.appendChild(c);

//添加根接点
doc.appendChild(root);

//查找接点
var a = doc.getElementsByTagName(“ttyp”);
//var a = doc.selectNodes(“//ttyp”);

//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}

//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode(“//ttyp/sex”);
b.text = “女”;

//alert(doc.xml);

//XML保存（需要在服务端，客户端用FSO）
//doc.save();

//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}

//–>
</script>

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

一般从服务端的返回可以得到一个XML对象。
例如服务器返回的：XMLHttpRequest.ResponseXML
这里的XMLHttpRequest就是ajax的核心对象。
在IE下可以这样创建：xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”).
javascript操作XML先创建一个XML DOM对象：var dom = new ActiveXObject(“Microsoft.XMLDOM”);
然后dom.loadXML（ResponseXML）就ok了。
接下来就可以操作xml，获取内容了。
一些常用的函数如下（一些在网上收集的，一些时平时老大教的）：
Microsoft.XMLDOM 对象常用的属性：
1、attributes 属性，返回当前节点的属性列表
2、childNodes 属性，返回当前节点的所有子节点列表
3、documentElement 属性，返回xml文件的根节点，通过Microsoft.XMLDOM对象名来调用
4、firstChild 属性、lastChild 属性，返回当前节点的第一个子（最后一个）元素（如果没有子节点是不是返回
第一个属性？）
5、nextSibling （previousSibling ）属性，下一个兄弟节点。
6、nodeName 属性，返回节点的标签名字
7、nodeValue 属性，传回指定节点相关的文字（不是属性，就是*号的这个内容 **）
8、ownerDocument 属性，根节点
9、parentNode 属性，传回目前节点的父节点。只能应用在有父节点的节点中。
搞一个例子：
function Add()
{
var dom = new ActiveXObject(“Microsoft.XMLDOM”);
dom.loadXML(ret);
if (dom.documentElement != null)
{
var nodes = dom.documentElement.selectNodes(“//SelectItem”); //得到根节点下所有SelectItem节点
if (nodes != null)
{
for(var i=0;i
一些常用的函数：
1、AppendChild 方法，加上一个节点当作指定节点最后的子节点。
2、cloneNode（deep）方法，deep 是一个布尔值。如果为true，此节点会复制以指定节点发展出去的所有节
点。如果是false，只有指定的节点和它的属性被复制。
3、createAttribute(name)方法，建立一个指定名称的属性。
4、createElement 方法，建立一个指定名称的元素。
5、xmlDocument.createNode(type, name, nameSpaceURI);type 用来确认要被建立的节点型态，name 是一个字符
串来确认新节点的名称，命名空间的前缀则是选择性的。nameSpaceURI 是一个定义命名空间URI 的字
符串。如果前缀被包含在名称参数中，此节点会在nameSpaceURI 的内文中以指定的前缀建立。如果不
包含前缀，指定的命名空间会被视为预设的命名空间。
6、getElementsByTagName 方法，传回指定名称的元素集合。
7、haschildnodes 方法，要解释吗？
8、insertBefore 方法，在指定的节点前插入一个子节点。xmlDocumentNode.insertBefore
(newChild,refChild);refChild 是参照节点的地址。新子节点被插到参照节点之前。如果refChild 参数没有包含
在内，新的子节点会被插到子节点列表的末端。
9、load 方法和loadXML 方法，前这从url，后者从字符串片断。
10、nodeFromID 方法，传回节点ID 符合指定值的节点。
11、removeChild 方法和replaceChild(newChild,oldChild)，顾名思义
12、selectNodes和selectSingleNode 方法，传回所有符合提供样式的节点。参数为一包含XSL 样式的字符串。
以下收集了一些MSDN的例子
(1)
var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0″);
var rootElement=xmlDoc.createElement(“memo”);
xmlDoc.appendChild(rootElement);(2) var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0″);
var rootElement=xmlDoc.createElement(“memo”);
rootElement.setAttribute(“author”, “Pat Coleman”); //属性author的值为Pat Coleman
xmlDoc.appendChild(rootElement);
(3) var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0″);
var rootElement=xmlDoc.createElement(“memo”);
var memoAttribute=xmlDoc.createAttribute(“author”);
var memoAttributeText=xmlDoc.createTextNode(“Pat Coleman”);
memoAttribute.appendChild(memoAttributeText);
rootElement.setAttributeNode(memoAttribute);
xmlDoc.appendChild(rootElement);
//这个例子和(2)同样效果，但是用不同的方法，这里把attribute也当做一个节点，attribute node的
子节点只可以是textnode，所以这里要先创建一个textnode在赋给他。
（4）
var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0″);
var rootElement=xmlDoc.createElement(“memo”); //创建一个元素
var memoAttribute=xmlDoc.createAttribute(“author”); //创建一个属性
var memoAttributeText=xmlDoc.createTextNode(“Pat Coleman”); //创建一个文本节点
var toElement=xmlDoc.createElement(“to”); //再创建一个元素
var toElementText=xmlDoc.createTextNode(“Carole Poland”); //再创建一个文本节点
memoAttribute.appendChild(memoAttributeText);
xmlDoc.appendChild(rootElement);
rootElement.setAttributeNode(memoAttribute);
rootElement.appendChild(toElement);
toElement.appendChild(toElementText);

属性：
attributes
Contains the list of attributes for this node. Read-only.
baseName
*Returns the base name for the name qualified with the namespace. Read-only.
childNodes
Contains a node list containing the children nodes. Read-only.
dataType
*Specifies the data type for this node. Read/write.
definition
*Returns the definition of the node in the document type definition (DTD) or schema. Read-only.
firstChild
Contains the first child of the node. Read-only.
lastChild
Returns the last child node. Read-only.
name
Contains the attribute name. Read-only.
namespaceURI
*Returns the Uniform Resource Identifier (URI) for the namespace. Read-only.
nextSibling
Contains the next sibling of this node in the parent’s child list. Read-only.
nodeName
Contains the qualified name of the element, attribute, or entity reference, or a fixed string for other node types. Read-only.
nodeType
Specifies the XML Document Object Model (DOM) node type, which determines valid values and whether the node can have child nodes. Read-only.
nodeTypedValue
*Contains the node value expressed in its defined data type. Read/write.
nodeTypeString
*Returns the node type in string form. Read-only.
nodeValue
Contains the text associated with the node. Read/write.
ownerDocument
Returns the root of the document that contains the node. Read-only.
parentNode
Contains the parent node. Read-only.
parsed
*Indicates the parsed status of the node and child nodes. Read-only.
prefix
*Returns the namespace prefix. Read-only.
previousSibling
Contains the previous sibling of this node in the parent’s child list. Read-only.
specified
Indicates whether the node (usually an attribute) is explicitly specified or derived from a default value in the document type definition (DTD) or schema. Read-only.
text
Represents the text content of the node or the concatenated text representing the node and its descendants. Read/write.
value
Contains the attribute value. Read/write.
xml
Contains the XML representation of the node and all its descendants. Read-only.
方法：
appendChild
Appends new child node as the last child of this node.
cloneNode
Clones a new node.
hasChildNodes
Provides a fast way to determine whether a node has children.
insertBefore
Inserts a child node to the left of the specified node or at the end of the list.
removeChild
Removes the specified child node from the list of children and returns it.
replaceChild
Replaces the specified old child node with the supplied new child node.
selectNodes
Applies the specified pattern-matching operation to this node’s context and returns the list of matching nodes as IXMLDOMNodeList.
selectSingleNode
Applies the specified pattern-matching operation to this node’s context and returns the first matching node.
transformNode
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation.
transformNodeToObject
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation in the supplied object.

]]> http://ishere.cn/2006/12/30/javascript-xml.html/feed 0 如何让网页Iframe自适应高度和宽度 http://ishere.cn/2006/12/23/%e5%a6%82%e4%bd%95%e8%ae%a9%e7%bd%91%e9%a1%b5iframe%e8%87%aa%e9%80%82%e5%ba%94%e9%ab%98%e5%ba%a6%e5%92%8c%e5%ae%bd%e5%ba%a6.html http://ishere.cn/2006/12/23/%e5%a6%82%e4%bd%95%e8%ae%a9%e7%bd%91%e9%a1%b5iframe%e8%87%aa%e9%80%82%e5%ba%94%e9%ab%98%e5%ba%a6%e5%92%8c%e5%ae%bd%e5%ba%a6.html#comments Sat, 23 Dec 2006 03:18:50 +0000 jena http://news.aobodo.com/?p=94 以前用过的,不过这次想用,整了半天才整出来,费劲啊,还是写下来吧.
首先,你需要在页面里写上iframe,然后定义ID,像这样：

Quote
＜IFRAME id=”框架ID名” name=”left” frameBorder=0 scrolling=no src=”XXX.asp” width=”100%”＞＜/IFRAME＞

然后在XXX.asp页面的任何一个位置,最好是尾部,写上如下代码:

Quote
parent.document.all(“框架ID名”).style.height=document.body.scrollHeight;
parent.document.all(“框架ID名”).style.width=document.body.scrollWidth;

好了,简单吧,就这么几句.你试试,我在IE6,IE7下测试正常.

]]> http://ishere.cn/2006/12/23/%e5%a6%82%e4%bd%95%e8%ae%a9%e7%bd%91%e9%a1%b5iframe%e8%87%aa%e9%80%82%e5%ba%94%e9%ab%98%e5%ba%a6%e5%92%8c%e5%ae%bd%e5%ba%a6.html/feed 0