(aula 3) AJAX para Iniciantes – Recuperando dados XML com AJAX

Veja como recuperar valores de um documento XML externo via AJAX, isso é muito útil para ler Feeds RSS, APIs e criar páginas HTML dinâmicas (DHTML).

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

Veja como recuperar valores de um documento XML externo via AJAX, isso é muito útil para ler Feeds RSS, APIs e criar páginas HTML dinâmicas (DHTML).

Este é um exemplo bem básico, apenas mostrando o esqueleto de como funciona essa transferência XML para HTML.

A explicação do script ajax.js está disponível no post da primeira aula AJAX para Iniciantes – Instanciando XMLHttpRequest.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax - Aula 3</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function xmlBasicExample() {
	// instanciando o objeto XMLHttpRequest
	var ajax = new Ajax();
	var container = document.getElementById('container');
	
	ajax.open('GET', 'names.xml', true);
	ajax.onreadystatechange = function leituraRequisicao() {
		if (ajax.readyState < 4) {
			container.innerHTML = "Carregando...";
		} else {
			if (ajax.status == 200) {
				var xmldoc = ajax.responseXML;
   				var root = xmldoc.getElementsByTagName('file')&#91;0&#93;;
				
				var name = root.childNodes&#91;1&#93;.childNodes&#91;1&#93;.childNodes&#91;0&#93;.nodeValue;
				
				container.innerHTML = "O meu nome é " + name;
			} else {
				alert("Há um problema na requisição.");
			}
		}
	}
	ajax.send(null);
	return false;
}

window.onload = function() {
	xmlBasicExample();
}
</script>
</head>

<body>
<h1>Ajax - Aula 3</h1>
<div id="container"></div>
</body>
</html>

Veja este exemplo funcionando.