Exemplo de ComboBox utilizando Ajax e XML SAP MII

Hoje estarei demonstrando como criar um comboBox a partir de um XML do SAP MII utilizando Ajax, para quem ainda não conhece o que é Ajax recomendo a seguinte leitura antes de continuar:

http://www.w3schools.com/Ajax/Default.Asp

Iniciaremos com a criação do objeto para carregar o XML para dentro da nossa aplicação, eu particularmente recomendo deixar essa função dentro de um arquivo externo, isto para não ficar criando em todas as páginas, por exemplo:  

Default.js

function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();
    }catch(ee){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(E){
                alert(Mensagem[1]);
            }
        }
    }
    return null;
}

O próximo passo é criar um arquivo externo e adicionar o seguinte código, no meu caso o nome do arquivo é:

LoadComboOnPage.js


/*************************************************************************
 @ Autor: Danilo Santos
 @ Objetivo: Carregar combo a partir de um arquivo XML MII
**************************************************************************/
// Exemplo de chamada
// readData(<< path arquivo xml >>,
//           << nome do objeto em tela >>,
//           << se quiser carregar o combo com um valor já determinado >>,
//           << exibir linha -- select -- {true or false}>>);                // Exemplo: readData("XMII/Illuminator?QueryTemplate=ABCD%2FTeste%2FTesteComboQuery&Content-Type=text%2Fxml",document.frmnome.selectTeste, "20", true);               
// *****************************************************************************************************************************

var XMLObj;    
var SourceUrlXML; 
var ComboxOBJ;    
var DefaultValue;
var Queue = new Array();
var QueueIndex = 0;
var FirstLine  = true;
   
function initObj(){
    XMLObj = createXMLHttpRequest();
    if(XMLObj == null){
        alert(Mensagem[1]);
    }else{
        XMLObj.onreadystatechange = function ()
                           {
                            switch(XMLObj.readyState)
{
                                case 1:
                                    loading();
                                break;
                                case 4:
                                    onReadData();
                                break;
                                }
                            };
    }
}
   
function readData(urlXML,objComboBox,valueDefault,firstLine){
    SourceUrlXML = urlServer+urlXML;
    Queue[Queue.length] = new Array(SourceUrlXML, objComboBox, valueDefault, firstLine);
    if (XMLObj.readyState == 0){
        goAhead(0);
    }
}
   
function goAhead(Idx){
    ComboxOBJ = eval('document.'+eval(Queue[Idx][1]).form.name+'.'+eval(Queue[Idx][1]).name);
    DefaultValue = Queue[Idx][2];
    FirstLine = Queue[Idx][3];   
    try{
        XMLObj.open("GET",Queue[Idx][0],true);    
        XMLObj.send(null);
    }finally{
        return false;
    }
}
   
function loading(){
    ComboxOBJ.options.length = 0;
    ComboxOBJ.options[0] = new Option("","");
}
   
function onReadData(){
    ComboxOBJ.options.length = 0;
    if(FirstLine == true){   
        ComboxOBJ.options[0] = new Option("-- Select --","");
    }
   
    var XMLDoc = XMLObj.responseXML;
    var Row = XMLDoc.getElementsByTagName('Row');
       
    for(i=0; i
        var Data = new Array();
        for(j=0; j
            Data[Data.length] = Row[i].childNodes[j].firstChild.nodeValue;
        }
        ComboxOBJ.options[ComboxOBJ.options.length] = new Option(Data[1],Data[0]);
    }

    if(DefaultValue == undefined){
        DefaultValue = "";
    }   
   
    ComboxOBJ.value  = DefaultValue;
       
    if (Queue.length > QueueIndex+1){
        goAhead(++QueueIndex);
    }else{
        Queue.length = 0;
        QueueIndex   = 0;
        appLoadDiv(false);
    }
}
initObj();

E para usar o combo dentro da sua página resta chamar a seguinte linha de código:

< script language="javascript" src="../Js/Default.js" type="text/javascript">
< script language="javascript" src="../Js/LoadComboOnPage.js" type="text/javascript">
function startPage(){
      readData("XMII/Illuminator?QueryTemplate=ABCD%2FTeste%2FComboTesteQuery&Content-Type=text%2Fxml",document.frmnome.selectTeste, "20", true);                       
}


< body onload="startPage();">

Antes de utilizar o script é necessário criar o Query Template que retorne a seguinte estrutura:

< ?xml version="1.0" encoding="UTF-8"?>
< Rowsets DateCreated="2011-01-27T13:43:21" EndDate="2011-01-27T20:41:20" StartDate="2011-01-27T20:41:20" Version="12.0.4 Build(120)">
    < Rowset>
        < Columns>
            < Column Description="" MaxRange="1" MinRange="0" Name="codigo" SQLDataType="1" SourceColumn="codigo"/>
            < Column Description="" MaxRange="1" MinRange="0" Name="nome" SQLDataType="1" SourceColumn="nome"/>
        < /Columns>
        < Row>
            < codigo>10
            < nome>Monza
        < /Row>
        < Row>
            < codigo>20
            < nome>Verona
        < /Row>
    < /Rowset>
< /Rowsets>



Obs.: É importante o XML do SAP MII retornar apenas 2 nós dentro de Row, ou seja:

SELECT código, nome FROM carros;  

Não é necessário ter o nome código ou nome, tendo 2 nós o script irá funcionar.



Eu utilizo o script em meus projetos e recomendo pois desta maneira diminuimos a quantidade de applets do tipo IBrowser em uma página web, este script funciona em Firefox e Internet Explorer, porém se funcionar em mais algum favor comentar.

Até a próxima.