使用javascript将xml转换为树形结构

Question

Hi I want to convert the xml into tree structure . But when I give the path from local machine it works fine but when we give the url path its not working.

How can i do that .

i am using following code.

var strList="";
var level=0;
var curriculumXml ="";

$(document).ready(function()
{
    $.ajax({
    type: "GET",
    url: "xml/development_curriculum.xml(i have to place the weburl here.like http://www.cde.com/development_curriculum.xml",
    dataType: "xml",
    success: function(data) 
        {
            manipulateXml(data);
            $("#curTree").html();
            loadParentCur();
        }
    });

});


/*This method is to get search curriculum XML list*/
function  manipulateXml(data)
{
  curriculumXml = data;
  $(data).find("node").each(function(){

    var id = parseInt($(this).attr("id"));
    });

}

/*This method is used to get curriculum tree*/
function loadParentCur()
{
    if (window.ActiveXObject)
    {
        var xmlobject=new ActiveXObject("Microsoft.XMLDOM");
        xmlobject.async="false";
        var xmlString = curriculumXml.xml;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else
    {
        var xmlString = (new XMLSerializer()).serializeToString(curriculumXml);
    }

     var json = $.xml2json(xmlString);
     var objNode = json.node;

     renderTree(objNode);

}
 function to_ul(branches) 
{    
    if(branches !=undefined)
    {
        if(level>0)
        {
            strList = strList + "<ul style=\"display: none;\">";
        }
        if(branches.length == undefined)
        {
            var branch = branches.node;       

            if (branch) 
            {    
                strList = strList + "<li class=\"expandable\" ><div class=\"hitarea expandable-hitarea\" onclick=\"#\"></div><span><a href=\"#\" onclick=\"#\">";

                strList = strList + branches.name+"</a></span>";

                level=level+1;
                to_ul(branch);
            }
            else
            {
                strList = strList + "<li id=\""+branches.id+"\" onclick=\"#\" style=\"white-space: nowrap;list-style: none;margin-left:-25px;\"><a href=\"#\" class=\"but_res\" style=\"width:152px; margin-left:30px;\">";

                strList = strList + unescape(branches.name)+"</a>";
            }

            strList = strList +"</li>";
            level=0;
        }
        else
        {
            for (var i=0; i<branches.length; i++) 
            {
                var branch = branches[i];       

                if (branch.node) 
                {    
                    strList = strList + "<li class=\"expandable\" ><div class=\"hitarea expandable-hitarea\" onclick=\"#\"></div><span><a href=\"#\" onclick=\"#\">";

                    strList = strList + branch.name+"</a></span>";

                    level=level+1;
                    to_ul(branch.node);
                }
                else
                {
                    strList = strList + "<li id=\""+branch.id+"\" onclick=\"#\" style=\"white-space: nowrap;list-style: none;margin-left:-25px;\"><a href=\"#\" class=\"but_res\" style=\"width:152px; margin-left:30px;\">";

                    strList = strList + unescape(branch.name)+"</a>";
                }

                strList = strList +"</li>";
                level=0;

            }    
        }       
        strList =strList + "</ul>";
    }

} 

/*This method is used to render tree*/

function renderTree(objTree) 
{  
    var objTreeNew = objTree;
    to_ul(objTreeNew);

    $("#curTree").html("<ul class=\"treeview\" id=\"tree\">"+strList+"</ul>");

    $("#tree").treeview({
        collapsed: true,
        animated: "medium",
        control:"#sidetreecontrol",
        prerendered: true,
        persist: ""
    });
} 

how can we do that? .

Answer 1

In case you open your web page locally, accessing an absolute resource will fail due to the http://de.wikipedia.org/wiki/Same-Origin-Policy . You have to open your page from the same domain and port.