(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.

Escrevendo uma Classe Singleton no Javascript

Singleton, é um padrão de projeto de software (do inglês Design Pattern). Este padrão garante a existência de apenas uma instância de uma classe, mantendo um ponto global de acesso ao seu objeto.

Veja como criar uma classe Singleton no Javascript!

Muitas pessoas tem dúvidas de como criar uma classe com o padrão Singleton no Javascript, então vou lhe mostrar como pode ser feito:

Singleton, é um padrão de projeto de software (do inglês Design Pattern). Este padrão garante a existência de apenas uma instância de uma classe, mantendo um ponto global de acesso ao seu objeto.

fonte: wikipedia
/*
    A Singleton Pattern Class
	
	Singleton pattern is a design pattern that is used to restrict instantiation of a class to one object (an implementation of the mathematical concept of singleton)
	
	Thnx for ready,
	Lucas Martins at lucasmartins.com.br
	
*/

function Users() {
	var names = [],
	proto = arguments.callee.prototype;
	
	if (!proto._initiated){
		proto.add = function(name) {
			names.push(name);
			return this.names();
		};
		proto.names = function() {
			return names;
		};
		proto._initiated = true;
	}
	return this;
}

Exemplo de uso:

<!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>Exemplo de uma classe Singleton no Javascript</title>
<script type="text/javascript" src="users.js"></script>
<script type="text/javascript">
Enterprise = (function() {
	var container = null;
	
	return {
		el: function(element) {
			if (element) container = element;
			if (container == null) container = document.getElementById('container');
			if (container.length == 0) document.body;
			return container;
		},
		writeLine: function(args, e) {
			var line = null;
			line = document.createElement("div");
			line.innerHTML = args;
			this.el().appendChild(line);
		}
	}
})();

function run() {
	Enterprise.container = 'container';
	// Add user
	var user1 = new Users();
	user1.add("Lucas Martins");
	
	Enterprise.writeLine(user1.names().length == 1 ? "contém 1 usuário: " + user1.names().toString() : '');
	
	// Use another instance
	var user2 = new Users();
	Enterprise.writeLine(user2.names().length == 1 ? "contém 1 usuário adicionado em user1: " + user2.names().toString() : '');
	
	// Add another cat in the other instance
	user2.add("Patty");
	Enterprise.writeLine(user2.names().length == 2 ? "contém 2 usuários: " + user2.names().toString() : '');
	Enterprise.writeLine(user2.names().length == 2 ? "qualquer instância conterá esses 2 usuários: " + user1.names().toString() : '');
}
</script>
</head>

<body>
<button onclick="javascript: run();">run</button>
<div id="container"></div>
</body>
</html>

Saída:

contém 1 usuário: Lucas Martins
contém 1 usuário adicionado em user1: Lucas Martins
contém 2 usuários: Lucas Martins,Patty
qualquer instância conterá esses 2 usuários: Lucas Martins,Patty