最近研究ajaxslt的心得

夜貓子

最近需要在javascript中控制xml數(shù)據(jù)，前段時間用dojo，但這玩意是在是太重了，太重的東西有種本能的抗拒
現(xiàn)在又想找點輕型的庫來用，prototype、script.aculo.us和ajaxslt就是我看了半天之后的選擇，這里單說ajaxslt

ajaxslt是google提供的js庫，bsd協(xié)議，可以放心使用，而且google也用在了gmail、google map這些產(chǎn)品上，所以還是很可靠的。唯一不爽的就是資料幾乎沒有，只有幾篇很簡單的文章說一下大概用法，其實這東西也不復雜，但是資料太少不易消除初學的恐懼。
資料少就只好自己讀代碼了，讀代碼的時候看到如下注釋

1. 
   
2. // Parses the given XML string with our custom, JavaScript XML parser. Written
   
3. // by Steffen Meschkat (mesch@google.com).
   
4. 
   
5.   // For the record: in Safari, we would create native DOM nodes, but
   
6.   // in Opera that is not possible, because the DOM only allows HTML
   
7.   // element nodes to be created, so we have to do our own DOM nodes.
   

復制代碼

不得了，google的哥們就是牛啊，原來是完全寫了個js原生的xml實現(xiàn)。
下面就零零碎碎的說一下看到的東西

1. 
   
2. function XNode(type, name, opt_value, opt_owner) {
   
3.   this.attributes = [];
   
4.   this.childNodes = [];
   
5. 
   
6.   XNode.init.call(this, type, name, opt_value, opt_owner);
   
7. }
   
8. 
   
9. // Don't call as method, use apply() or call().
   
10. XNode.init = function(type, name, value, owner) {
    
11.   this.nodeType = type - 0;
    
12.   this.nodeName = '' + name;
    
13.   this.nodeValue = '' + value;
    
14.   this.ownerDocument = owner;
    
15. 
    
16.   this.firstChild = null;
    
17.   this.lastChild = null;
    
18.   this.nextSibling = null;
    
19.   this.previousSibling = null;
    
20.   this.parentNode = null;
    
21. }
    

復制代碼

這個地方用call方法做了一個構(gòu)造函數(shù)，從這里可以看出node類型的屬性就是這些了。和平時用的DOM模型不同，這里沒有tagName，代替為nodeName

1. 
   
2. function XDocument() {
   
3.   // NOTE(mesch): Acocording to the DOM Spec, ownerDocument of a
   
4.   // document node is null.
   
5.   XNode.call(this, DOM_DOCUMENT_NODE, '#document', null, null);
   
6.   this.documentElement = null;
   
7. }
   
8. 
   
9. XDocument.prototype = new XNode(DOM_DOCUMENT_NODE, '#document');
   

復制代碼

Document也作為一個節(jié)點對待，這邏輯也沒錯，根節(jié)點嘛，整個xml全部抽象成節(jié)點集合，干得漂亮！
沒看過其它DOM實現(xiàn)的代碼是不是這么干的，我是腳本技術(shù)原教旨主義分子，想看也看不懂……

常見的dom api都有了，appendChild() replaceChild() getElementsByTagName() ....
但是沒有insertAfter()，只有insertBefore()，干脆DIY一個

1. 
   
2. XNode.prototype.insertAfter = function(newNode, oldNode){
   
3.     if (oldNode == newNode){ return; }
   
4. 
   
5.     if (newNode.parentNode) {
   
6.         newNode.parentNode.removeChild(newNode);
   
7.     }
   
8. 
   
9.     var newChildren = [];
   
10.     for (var i = 0; i < this.childNodes.length; i++){
    
11.         var c = this.childNodes[i];
    
12.         newChildren.push(c);
    
13.         if (c == oldNode) {
    
14.             newChildren.push(newNode);
    
15. 
    
16.             newNode.parentNode = this;
    
17. 
    
18.             newNode.nextSibling = oldNode.nextSibling;
    
19.             if (newNode.nextSibling) {
    
20.                 newNode.nextSibling.previousSibling = newNode;
    
21.             }
    
22.             oldNode.nextSibling = newNode;
    
23.             newNode.previousSibling = oldNode;
    
24. 
    
25.             if (this.lastChild == oldNode) {
    
26.                 this.lastChild = newNode;
    
27.             }
    
28.         }
    
29.     }
    
30.     this.childNodes = newChildren;
    
31. }
    

復制代碼

再來DIY點好用的

1. 
   
2. // 返回所有xpath查詢結(jié)果
   
3. XDocument.prototype.selectNodes = function(/* string */xpathString){
   
4.     var expr = xpathParse(xpathString);
   
5.     var result = expr.evaluate(new ExprContext(this));
   
6.     return result.nodeSetValue();
   
7. }
   
8. 
   
9. // 返回第一個xpath查詢結(jié)果
   
10. XDocument.prototype.selectNode = function(/* string */xpathString){
    
11.     var result = this.selectNodes(xpathString);
    
12.     return result.length ? result[0] : null;
    
13. }
    

復制代碼

selectNodes()包含了xpath的使用方法，湊合著參考吧
你可以這樣寫

1. 
   
2. // 獲取所有require屬性等于1的aaa元素
   
3. var node = xmldoc.selectNodes('//aaa[@require=1]');
   
4. // 獲取第一個require屬性等于1的aaa元素
   
5. var node = xmldoc.selectNode('//aaa[@require=1]');
   

復制代碼

好用的函數(shù)，xmlValue()和xmlText()
用xmlValue()獲得元素的文字內(nèi)容，你就不用node.firstChild.nodeValue這么麻煩了，直接xmlValue(node)完事
xmlText()返回xml文本，參數(shù)可以用node，也可以用document

暫時就這么多，ajaxslt感覺還是不錯的，js原生，不用考慮那么多瀏覽器DOM實現(xiàn)差異了
Hell is another browser!!!

james.liu

不錯，，為啥不用jquery。。

cid73

這玩意兒現(xiàn)在能在 IE 上用了嗎? 我差不多一年前試過, 那時候只支持 Firefox.

不過 xpath... 還真是不好用, 僅僅是和客戶端交互的話還是 json 吧

lyhiving

Jquery

eye_onme

性能如何?

夜貓子

原帖由 lyhiving 于 2007-4-6 12:10 發(fā)表
Jquery

jquery大抵相當于prototype + script.aculo.us
jquery能夠load一段xml，然后返回一個XML Document對象？我大概瀏覽了一遍API，辦不到，更何況ajaxslt還有xlst
jquery能夠操作的dom對象僅限于HTML Document

原帖由 cid73 于 2007-4-6 12:07 發(fā)表
這玩意兒現(xiàn)在能在 IE 上用了嗎? 我差不多一年前試過, 那時候只支持 Firefox.
不過 xpath... 還真是不好用, 僅僅是和客戶端交互的話還是 json 吧

ie上工作正常，暫時沒發(fā)現(xiàn)和firefox有什么區(qū)別
我把xml作為客戶端數(shù)據(jù)庫（姑且這么叫吧）使用，在客戶端上全部做好了才向服務器端一次提交，json貌似和這個主題無關(guān)

性能沒有測試過，感覺gmail都在用，應該可以吧

[ 本帖最后由 夜貓子 于 2007-4-6 17:45 編輯 ]

一棵白菜

原帖由 james.liu 于 2007-4-6 11:43 發(fā)表
不錯，，為啥不用jquery。。

搞的太臃腫了。。

傲梟

聽不懂在說什么啊