jquery xml string 转化为jquery dom的问题（XMLDOM Extension Plugin for jQuery）

发表于 2011 年 07 月 27 日 由 admin

我最近有一个功能，将xml 转为jquery dom,但是我使用XMLDOM Plugin，解决了我的问题，但我又遇到有一个问题，我调用html() 方法时，为null,
我明白，因为html() 时调用javascriopt innerhtml方法，因为这个是xml 所以为null,这个好正常，问题代码：
var xml = ‘<xml><root><item>gdf</item></root></xml>’;
  var xd = $.xmlDOM(xml);
xd.html() //为空，

所以我修改了这个插件，解决这个问题
代码如下：

  1. (function ($) {
  2.     function mnpXml(opCode, xmlStr) {
  3.         return this.each(function () {
  4.             if (typeof xmlStr != “string”) return;
  5.             if (!jQuery.isXMLDoc(this)) return;
  6.             var node = $.xmlDOM(xmlStr).firstChild.cloneNode(true);
  7.             switch (opCode) {
  8.                 case “append”:
  9.                     this.appendChild(node);
  10.                     break;
  11.                 case “prepend”:
  12.                     if (this.childNodes.length > 0)
  13.                         this.insertBefore(node, this.firstChild);
  14.                     else
  15.                         this.appendChild(node);
  16.                     break;
  17.                 case “after”:
  18.                     if (this.nextSibling)
  19.                         this.parentNode.insertBefore(node, this.nextSibling);
  20.                     else
  21.                         this.parentNode.appendChild(node);
  22.                     break;
  23.                 case “before”:
  24.                     this.parentNode.insertBefore(node, this);
  25.                     break;
  26.             }
  27.         });
  28.     }
  29.     $.fn.extend({
  30.         appendXml: function (s) {
  31.             return mnpXml.call(this, “append”, s);
  32.         },
  33.         prependXml: function (s) {
  34.             return mnpXml.call(this, “prepend”, s);
  35.         },
  36.         afterXml: function (s) {
  37.             return mnpXml.call(this, “after”, s);
  38.         },
  39.         beforeXml: function (s) {
  40.             return mnpXml.call(this, “before”, s);
  41.         },
  42.         xml: function () {
  43.             var elem = this[0];
  44.             return elem.xml || (new XMLSerializer()).serializeToString(elem);
  45.         },
  46.         innerXml: function () {
  47.             var s = this.xml();
  48.             var i = s.indexOf(“>”), j = s.lastIndexOf(“<”);
  49.             if (j > i)
  50.                 return s.substring(i + 1, j);
  51.             else
  52.                 return “”;
  53.         }
  54.     });
  55.     $.extend(jQuery, {
  56.         xmlDOM: function (xmlStr) {
  57.             if (window.ActiveXObject) {
  58.                 var xd = new ActiveXObject(“Microsoft.XMLDOM”);
  59.                 xd.async = false;
  60.                 xd.loadXML(xmlStr);
  61.                 return xd;
  62.             }
  63.             else if (typeof DOMParser != “undefined”) {
  64.                 var xd = new DOMParser().parseFromString(xmlStr, “text/xml”);
  65.                 return xd;
  66.             }
  67.             else return null;
  68.         },
  69.         toXml: function (obj, nodeName, useAttr) {
  70.             var x = $($.xmlDOM(“<” + nodeName + ” />”));
  71.             var n = x.find(“:first”);
  72.             for (var p in obj) {
  73.                 if (useAttr)
  74.                     n.attr(p, obj[p]);
  75.                 else
  76.                     n.appendXml(“<” + p + ” />”).find(p).text(obj[p]);
  77.             }
  78.             return x[0];

调用：

  1. $(document).ready(function () {
  2.         var xml = ‘<xml><root><item>gdf</item></root></xml>’;
  3.         var xd = $.xmlDOM(xml);
  4. //        var x = $(xd);
  5. //        x.find(“center”).appendXml(“<bottom />”).prependXml(“<top />”);
  6. //        x.find(“top,bottom”).afterXml(“<After />”).beforeXml(“<Before />”);
  7. //        alert(x.xml());
  8. //        var obj = { Name: “Darkthread”, Score: 100 };
  9. //        xd = $.toXml(obj, “Person”);
  10. //        alert($(xd).xml());
  11. //        xd = $.toXml(obj, “Person”, true);
  12.         alert($(xd).xml());

我最近有一个功能，将xml 转为jquery dom,但是我使用XMLDOM Plugin，解决了我的问题，但我又遇到有一个问题，我调用html() 方法时，为null,
我明白，因为html() 时调用javascriopt innerhtml方法，因为这个是xml 所以为null,这个好正常，
问题代码：
var xml = ‘<xml><root><item>gdf</item></root></xml>’;
  var xd = $.xmlDOM(xml);
xd.html() //为空，

所以我修改了这个插件：
代码如下：

复制代码
  1. (function ($) {
  2.     function mnpXml(opCode, xmlStr) {
  3.         return this.each(function () {
  4.             if (typeof xmlStr != “string”) return;
  5.             if (!jQuery.isXMLDoc(this)) return;
  6.             var node = $.xmlDOM(xmlStr).firstChild.cloneNode(true);
  7.             switch (opCode) {
  8.                 case “append”:
  9.                     this.appendChild(node);
  10.                     break;
  11.                 case “prepend”:
  12.                     if (this.childNodes.length > 0)
  13.                         this.insertBefore(node, this.firstChild);
  14.                     else
  15.                         this.appendChild(node);
  16.                     break;
  17.                 case “after”:
  18.                     if (this.nextSibling)
  19.                         this.parentNode.insertBefore(node, this.nextSibling);
  20.                     else
  21.                         this.parentNode.appendChild(node);
  22.                     break;
  23.                 case “before”:
  24.                     this.parentNode.insertBefore(node, this);
  25.                     break;
  26.             }
  27.         });
  28.     }
  29.     $.fn.extend({
  30.         appendXml: function (s) {
  31.             return mnpXml.call(this, “append”, s);
  32.         },
  33.         prependXml: function (s) {
  34.             return mnpXml.call(this, “prepend”, s);
  35.         },
  36.         afterXml: function (s) {
  37.             return mnpXml.call(this, “after”, s);
  38.         },
  39.         beforeXml: function (s) {
  40.             return mnpXml.call(this, “before”, s);
  41.         },
  42.         xml: function () {
  43.             var elem = this[0];
  44.             return elem.xml || (new XMLSerializer()).serializeToString(elem);
  45.         },
  46.         innerXml: function () {
  47.             var s = this.xml();
  48.             var i = s.indexOf(“>”), j = s.lastIndexOf(“<”);
  49.             if (j > i)
  50.                 return s.substring(i + 1, j);
  51.             else
  52.                 return “”;
  53.         }
  54.     });
  55.     $.extend(jQuery, {
  56.         xmlDOM: function (xmlStr) {
  57.             if (window.ActiveXObject) {
  58.                 var xd = new ActiveXObject(“Microsoft.XMLDOM”);
  59.                 xd.async = false;
  60.                 xd.loadXML(xmlStr);
  61.                 return xd;
  62.             }
  63.             else if (typeof DOMParser != “undefined”) {
  64.                 var xd = new DOMParser().parseFromString(xmlStr, “text/xml”);
  65.                 return xd;
  66.             }
  67.             else return null;
  68.         },
  69.         toXml: function (obj, nodeName, useAttr) {
  70.             var x = $($.xmlDOM(“<” + nodeName + ” />”));
  71.             var n = x.find(“:first”);
  72.             for (var p in obj) {
  73.                 if (useAttr)
  74.                     n.attr(p, obj[p]);
  75.                 else
  76.                     n.appendXml(“<” + p + ” />”).find(p).text(obj[p]);
  77.             }
  78.             return x[0];



调用：

复制代码
  1. $(document).ready(function () {
  2.         var xml = ‘<xml><root><item>gdf</item></root></xml>’;
  3.         var xd = $.xmlDOM(xml);
  4. //        var x = $(xd);
  5. //        x.find(“center”).appendXml(“<bottom />”).prependXml(“<top />”);
  6. //        x.find(“top,bottom”).afterXml(“<After />”).beforeXml(“<Before />”);
  7. //        alert(x.xml());
  8. //        var obj = { Name: “Darkthread”, Score: 100 };
  9. //        xd = $.toXml(obj, “Person”);
  10. //        alert($(xd).xml());
  11. //        xd = $.toXml(obj, “Person”, true);
  12.         alert($(xd).xml());


    分享到：
此条目发表在 IT技术 分类目录，贴了 , , 标签。将固定链接加入收藏夹。

发表评论