将params从JS传递给XSL

时间:2011-12-05 20:50:01

标签: html xml ajax xslt

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>XML TEST</title>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type='text/javascript' src='scripts/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css" />
<script type="text/javascript">
$(document).ready(function(){
    $("#destination").autocomplete(["Aberdeen","Abu Dhabi","Abuja","Addis Ababa","Adelaide","Albuquerque","Amman","Amsterdam","Anchorage","Asheville","Athens","Atlanta","Auckland","Austin","Baltimore","Bangkok","Barcelona","Beijing","Belfast","Berlin","Big Island","Bilbao","Birmingham","Boston","Bridgetown","Bristol","Brussels","Budapest","Buenos Aires","Burlington","Cairo","Calgary","Canberra","Cape Town","Cappadocia","Cardiff","Castries","Charleston","Chiang Mai","Chicago","Chincoteague Island","Christchurch","Cleveland","Copenhagen","Costa del Sol","Cote d'Azur","Dakar","Dallas-Fort Worth","Delhi","Denver","Detroit","Dubai","Dublin","Dubrovnik","Durban","Edinburgh","Fez","Florida Keys","Frankfurt","Garden Route","Gda'sk","Geneva","Glasgow","Grand Cayman","Halifax","Hamburg","Hartford","Havana","Helsinki","Hong Kong","Houston","Indianapolis","Istanbul","Jackson"," Mississippi","Jerusalem","Johannesburg","Kathmandu","Kiev","Kingston","Kuala Lumpur","Las Vegas","Leeds","Lima","Lisbon","Loire Valley","London","Los Angeles","Madrid","Malta","Manchester","Manila","Marrakech","Melbourne","Memphis","Mexico City","Miami","Milan","Milwaukee","Minneapolis-St Paul","Monte-Carlo","Montreal","Moscow","Mumbai","Munich","Nairobi","Nashville","National Parks and Reserves","Nevis","New Haven","New Orleans","New York City","Newport","Nice","Oahu","Oklahoma City","Omaha","Orlando","Oslo","Oxford","Paris","Perth","Philadelphia","Phoenix","Pittsburgh","Port Elizabeth","Portland (Oregon)","Prague","Quebec City","Quito","Raleigh","Raleigh","Reykjavik","Rio de Janeiro","Riyadh","Rocky Mountains","Rome","Salt Lake City","San Diego","San Francisco","San Juan","Santa Fe","Sao Paulo","Sapporo","Seattle","Seoul","Shanghai","South West","Split","St Croix","St Louis","St Petersburg","St Thomas","Stockholm","Sydney","Tallinn","Tampa","Tel Aviv","The Amazon","The Highlands","The Nile Valley","The West","Tokyo","Toronto","Valencia","Vancouver","Vienna","Warsaw","Washington DC","York","Yucatan Peninsula","Zagreb","Zanzibar","Zurich"],
    {
        delay:10,
        max:10,
        autoFill: true
    }); 
}); 

function submitForm(){
    var region = $("#destination").val();
    if (region=="") { 
        $("#messageBox").html("Enter destination, please!").show();
        return false;
    } else {
        $("#messageBox").hide();
    }

    var monthValue = $('#month').val();
    var monthText;
    if ($('#month').val()!=null){ monthText = $('#month :selected').text(); }

    // (XML, XSL, Target, Key1, key2, Key3, Key4, Key5)
    transformXML = new XMLProcessor('xml/events.xml', 'xml/events.xsl', 'generateXML', region, monthValue, monthText);
    transformXML.Build();
    transformXML.Load();
}

function XMLProcessor(XML, XSL, Target, Param1, Param2, Param3, Param4, Param5){

    document.getElementById(Target).innerHTML = "";

    var resultDocument;

    var platformMoz = (document.implementation && document.implementation.createDocument);
    var platformIE = (!platformMoz && document.getElementById && window.ActiveXObject);

    this.Load = function Load(){
        if(platformIE){
            document.getElementById(Target).innerHTML = resultDocument;
        } else {
            document.getElementById(Target).appendChild(resultDocument);
        }
        return true;
    }

    this.Build = function Build(){
        if(platformIE){
            //Load DOM and variables
            var xslt = new ActiveXObject("Msxml2.XSLTemplate");
            var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
            var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
            var xslProc;

            // Load XSL
            xslDoc.async = false;
            xslDoc.resolveExternals = false;
            xslDoc.load(XSL);
            xslt.stylesheet = xslDoc;

            // Load XML
            xmlDoc.async = false;
            xmlDoc.resolveExternals = false;
            xmlDoc.onreadystatechange=verify;
            xmlDoc.load(XML);

            // XSLT processor
            xslProc = xslt.createProcessor();
            xslProc.input = xmlDoc;

//传递参数

缺少代码

            // Transform
            xslProc.transform();

            // Output
            resultDocument = xslProc.output;        
        }

        if(platformMoz){

            var xsltProcessor = new XSLTProcessor();

            // Load XML         
            myXMLHTTPRequest = new XMLHttpRequest();
            myXMLHTTPRequest.onreadystatechange=verify;
            myXMLHTTPRequest.open("GET", XML, false);
            myXMLHTTPRequest.send(null);
            var xmlSource = myXMLHTTPRequest.responseXML;

            // Load XSL
            var myXMLHTTPRequest = new XMLHttpRequest();
            myXMLHTTPRequest.open("GET", XSL, false);
            myXMLHTTPRequest.send(null);
            xslStylesheet = myXMLHTTPRequest.responseXML;

            //Transform
            xsltProcessor.importStylesheet(xslStylesheet);

            //Pass Parameter
            MISSING CODE 

            // Ouput
            resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
        }

        function verify() { 
            if (xmlDoc.readyState == 1){ 
                if(platformIE){
                    document.getElementById(Target).innerHTML = "<div class='events_loading'>Loading events, please wait...</div>";
                } else {
                    document.getElementById(Target).appendChild("<div class='events_loading'>Loading events, please wait...</div>");
                }
            }
        }
    }
}

</script>
</head>
<body>
    <style>
        body { font: 12px verdana; }
        .row { clear: both; padding-bottom: 10px;}
        .col1 { float: left; width: 90px; padding-top: 3px; font-weight: bold; }
        #messageBox { font: 10px verdana; color: #EF0000; }
    </style>
    <form action="javascript:;" onsubmit="submitForm(this.form);" name="eventsForm" id="eventsForm">
        <div class="row">
            <div class="col1">Destination:</div>
            <div class="col2"><input id="destination" name="destination" /> <span id="messageBox" ></span></div>
        </div>
        <div class="row">
            <div class="col1">Month:</div>
            <div class="col2">
                <select name="month" id="month">
                    <option value="">Any</option>
                    <option value="Jan">January</option>
                    <option value="Feb">February</option>
                    <option value="Mar">March</option>
                    <option value="Apr">April</option>
                    <option value="May">May</option>
                    <option value="Jun">June</option>
                    <option value="Jul">July</option>
                    <option value="Aug">August</option>
                    <option value="Sep">September</option>
                    <option value="Oct">October</option>
                    <option value="Nov">November</option>
                    <option value="Dec">December</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col1">&nbsp;</div>
            <div class="col2"><input class="submit" type="submit" value="Search" border="0" /></div>
        </div>
    </form> 
    <div id="generateXML" />
</div>
</body>
</html>

我知道我需要编写的代码允许XMLProcessor将params传递给xsl文件(从而允许用户过滤结果)。

有人能给我一些提示吗?我知道很少的javascript,真的非常需要完成这项工作。我使用谷歌但不知道从哪里开始。

1 个答案:

答案 0 :(得分:0)

要传递参数,我使用模板:

<xsl:template name="test">
    <xsl:param name="name"/>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    ....
    <script>
        <![CDATA[
            var chart1;
            $(document).ready(function() {
            .....
             title: {
                      text: ']]><xsl:value-of select="$name"/><![CDATA['
                 },
                 ...
             }
             ]]>
    </script>

因此您可以在脚本中添加类似的参数。 然后,当你想要调用它时,你会这样做:                                             ...               ...