Ajax Usando Xml

Abril 12, 2007

Salve o código abaixo como ( ajax.js )

====================================================================================

/**
 * @author Rodrigo [ TENKO ]
 */

var d       = document;

            if(tabela == null){                
                var dados = $$(xmlDoc,"usuario");
                
                tabela = d.createElement("table");
                tabela.border = 0;
                tabela.width  = "100%";
                tabela.id = "Lista";
                    
                var tbody  = d.createElement("tbody");
                
                for(i = 0; i < dados.length; i++){
                    var tr  = d.createElement("tr");
                        if( i % 2 == 0 ){                            
                            tr.style.backgroundColor = "#F8F7F1";
                            tr.style.fontFamily = "verdana";
                            tr.style.fontSize = "12px";                                                         
                        }else{
                            tr.style.backgroundColor = "#ffffff";
                            tr.style.fontFamily = "verdana";
                            tr.style.fontSize = "12px";    
                        }
                        
                    var td  = d.createElement("td");
                        td.width  = "5%";
                        td.height = 25;
                        td.align  = "center";
                        
                    var td1 = d.createElement("td");
                    var td2 = d.createElement("td");
                        td2.width = "15%";
                        td2.align = "center";
                    
                    var c = dados[i].getElementsByTagName("codigo")[0];
                    var n = dados[i].getElementsByTagName("nome")[0];
                    var g = dados[i].getElementsByTagName("grupo")[0];
                    
                    var codigo = d.createTextNode(c.firstChild.nodeValue);
                    var nome   = d.createTextNode(n.firstChild.nodeValue);
                    var grupo  = d.createTextNode(g.firstChild.nodeValue);
                    
                    td.appendChild(codigo);
                    td1.appendChild(nome);
                    td2.appendChild(grupo);
                    
                    tr.appendChild(td);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    
                    tbody.appendChild(tr);
                    tabela.appendChild(tbody);
                }
                bloco.appendChild(tabela);
            }
        }
    }
}

function getValor(obj){    
    aviso(obj.value);
}

function aviso(MSN){
    alert(MSN);
}

==================================================================================== Agora crie uma página html que exibira o resultado ( carregadados.htm ) ====================================================================================

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tenko</title>

<script src="ajax.js"></script>

</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" align="left" valign="middle">
       <input type="button" name="Button" value="Carregar lista de dados" onclick="java script:getConteudo('dados.php');" accesskey="c"/>
    </td>
  </tr>
  <tr>
    <td height="15" align="left" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td height="30" align="left" valign="middle">
    <span id="resultado"></span>
    </td>
  </tr>
</table>
</body>
</html>

==================================================================================== Agora faça uma consulta em um base e gere o XML com a seguinte estrutura como resultado : ====================================================================================

$sSql = “select id, nome, grupo from tabela”;
.
.
.

while( $iLinha = Acho que todo mundo sabe como fica né ){


Esse é um passo importante

header("content-Type:text/xml");



<?xml version="1.0" encoding="iso-8859-1"?>
<dados>
<usuario>
<codigo></codigo>
<nome>%NOME%</nome>
<grupo>%GRUPO%</grupo>
</usuario>
</dados>

}

Salve como dados.php

Espero que possa ajudar

Abril 13, 2007

Salve o código abaixo como ( ajax.js )
====================================================================================
/**
* @author Rodrigo [ TENKO ]
*/
var d = document;
var request = null;
var tabela = null;
function $(valor){
return d.getElementById(valor);
}
function $$(xml, valor){
return xml.getElementsByTagName(valor);
}
function requisicaoAjax(){
try{
request = new XMLHttpRequest();
}catch(trymicrosoft){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(field){
request = null;
}
}
}

if(request == null) aviso("Erro de requisição AJAX");
}
function getConteudo(url){
requisicaoAjax();

request.open("GET", url, true);
request.onreadystatechange = atualizaConteudo;
request.send(null);
}

function atualizaConteudo(){
if(request.readyState == 4){
if(request.status == 200){
var xmlDoc = request.responseXML;
var bloco = $("resultado");

if(tabela == null){
var dados = $$(xmlDoc,"usuario");

tabela = d.createElement("table");
tabela.border = 0;
tabela.width = "100%";
tabela.id = "Lista";

var tbody = d.createElement("tbody");

for(i = 0; i < dados.length; i++){
var tr = d.createElement("tr");
if( i % 2 == 0 ){
tr.style.backgroundColor = "#F8F7F1";
tr.style.fontFamily = "verdana";
tr.style.fontSize = "12px";
}else{
tr.style.backgroundColor = "#ffffff";
tr.style.fontFamily = "verdana";
tr.style.fontSize = "12px";
}

var td = d.createElement("td");
td.width = "5%";
td.height = 25;
td.align = "center";

var td1 = d.createElement("td");
var td2 = d.createElement("td");
td2.width = "15%";
td2.align = "center";

var c = dados.getElementsByTagName("codigo")[0];
var n = dados.getElementsByTagName("nome")[0];
var g = dados.getElementsByTagName("grupo")[0];

var codigo = d.createTextNode(c.firstChild.nodeValue);
var nome = d.createTextNode(n.firstChild.nodeValue);
var grupo = d.createTextNode(g.firstChild.nodeValue);

td.appendChild(codigo);
td1.appendChild(nome);
td2.appendChild(grupo);

tr.appendChild(td);
tr.appendChild(td1);
tr.appendChild(td2);

tbody.appendChild(tr);
tabela.appendChild(tbody);
}
bloco.appendChild(tabela);
}
}
}
}
function getValor(obj){
aviso(obj.value);
}
function aviso(MSN){
alert(MSN);
}
====================================================================================
Agora crie uma página html que exibira o resultado ( carregadados.htm )
====================================================================================
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tenko</title>

&lt;script src="ajax.js"></script>

</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" align="left" valign="middle">
       <input type="button" name="Button" value="Carregar lista de dados" onclick="java script:getConteudo('dados.php');" accesskey="c"/>
    </td>
  </tr>
  <tr>
    <td height="15" align="left" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td height="30" align="left" valign="middle">
    <span id="resultado"></span>
    </td>
  </tr>
</table>
</body>
</html>
==================================================================================== Agora faça uma consulta em um base e gere o XML com a seguinte estrutura como resultado : ====================================================================================
$sSql = “select id, nome, grupo from tabela”;
.
.
.

while( $iLinha = Acho que todo mundo sabe como fica né ){


Esse é um passo importante

header("content-Type:text/xml");



<?xml version="1.0" encoding="iso-8859-1"?>
<dados>
<usuario>
<codigo></codigo>
<nome>%NOME%</nome>
<grupo>%GRUPO%</grupo>
</usuario>
</dados>

}
Salve como dados.php
Espero que possa ajudar

Entrar

Ajax Usando Xml

Pergunta

Guest --Tenko --

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Guest --Tenko --

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades