 |
|||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
|
|||||
Você está aqui: jQuery ::: Dicas & Truques ::: AJAX |
Apostila jQuery para iniciantes - Como fazer requisições assíncronas usando o método ajax() do jQueryQuantidade de visualizações: 19203 vezes |
|
O jQuery fornece formas bem simples de se fazer requisições assíncronas usando AJAX. Uma destas formas é o método ajax(). Este método possui quase uma dezena de parâmetros adicionais e retorna um objeto XMLHttpRequest, que pode ser usado para fins de encadeamento ou cancelamento da requisição HTTP. Enquanto outras dicas cobrem todos os parâmetros deste método, aqui nos concentraremos apenas em escrever um exemplo completo de seu uso. Trata-se de uma aplicação que fará uma solicitação HTTP POST a um código PHP que retornará um arquivo XML com alguns valores. Vamos começar analisando o codigo PHP:
<?
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: text/xml");
$nome = utf8_decode($_POST["nome"]);
$cidade = utf8_decode($_POST["cidade"]);
$estado = utf8_decode($_POST["estado"]);
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
echo "<pessoas>\n";
echo " <pessoa>\n";
echo " <nome>" . $nome . "</nome>\n";
echo " <cidade>" . $cidade . "</cidade>\n";
echo " <estado>" . $estado . "</estado>\n";
echo " </pessoa>\n";
echo "</pessoas>";
?>
Salve este código PHP como pesquisa.php. Tudo que ele faz é receber alguns parâmetros POST e usá-los para montar um arquivo XML. Em um determinado momento, o arquivo XML retornado poderá ser algo como: <?xml version="1.0" encoding="iso-8859-1"?> <pessoas> <pessoa> <nome>OSMAR J. SILVA</nome> <cidade>GOIÂNIA</cidade> <estado>GO</estado> </pessoa> </pessoas> Fique de olho na estrutura deste arquivo XML enquanto progredimos. Veja agora uma página HTML completa que mostra como usar o método ajax() para se conectar a este código PHP e obter os dados gerados em forma de XML:
<html>
<head><title>Estudos jQuery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<!-- Importa a biblioteca jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function carregarDados(){
var dados = {'nome': "Osmar J. Silva",
'cidade': "Goiânia",
'estado': "GO"}
$.ajax({
url: 'pesquisar.php',
type: 'post',
dataType: 'xml',
data: dados,
success: function(data){
$(data).find('pessoa').each(function(){
var nome = $(this).find('nome').text();
var cidade = $(this).find('cidade').text();
var estado = $(this).find('estado').text();
$("#parag").html("Nome: " + nome + "<br>");
$("#parag").append("Cidade: " + cidade + "<br>");
$("#parag").append("Estado: " + estado);
});
},
error: function(XMLHttpRequest, textStatus,
errorThrown){
window.alert('Houve um erro!');
}
});
}
</script>
</head>
<body>
<button onclick="carregarDados()">Carregar dados
</button>
<p id="parag"></p>
</body>
</html>
Veja como usamos os métodos find() e each() para acessar e percorrer os elementos XML. Estes métodos são encontrados na seção de métodos para percorrer o HTML DOM e o XML DOM. Para finalizar lembre-se de que o método ajax() retorna um objeto XMLHttpRequest. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
