Material Didático

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

Aula 06 - AJAX: Interação com o Servidor

Exemplo 1

O exemplo a seguir é composto por uma lista de nomes de livros e uma tabela que exibe os detalhes do livro selecionado. Logo, quando a página é carregada, dispara-se uma requisição AJAX que recupera uma lista de livros em XML do servidor (utilizando o modelo de dados apresentado na seção a seguir “Utilizando XML”).

A partir dessa lista de livros retornada pelo servidor, a lista de nomes é carregada com o nome de cada livro. Quando o usuário clica em algum dos livros da lista contendo os nomes dos livros, uma tabela exibindo os detalhes do livro selecionado é exibida (ou atualizada).

Veja a seguir o código da página da Figura 1, que por comodidade foi criado com a tecnologia JSP que você já conhece . Você já pode criar um arquivo na pasta WebContent do seu projeto Aula06 com esse conteúdo. Ele terá suas partes principais comentadas mais adiante:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

var xmlDoc = null;
		var livro = null;

function onLoad(){
		   
		var ajaxReq = new XMLHttpRequest();
		var url = "/Aula06/livros.xml";

ajaxReq.onreadystatechange = function() {
			if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
				xmlDoc = ajaxReq.responseXML;
				carregarLista();
			}
		};

ajaxReq.open("GET", url, true);
		ajaxReq.send();
		   
		}

function carregarLivro(indice){
		   
			var livros = xmlDoc.getElementsByTagName("livro");
			var livro = livros.item(indice);

var nome="";
			var isbn="";
			if(livro.hasAttributes()){
				nome = livro.attributes.getNamedItem("nome").nodeValue;
				document.getElementById("nome").innerHTML = nome;
				isbn = livro.attributes.getNamedItem("isbn").nodeValue;
				document.getElementById("isbn").innerHTML = isbn;
			}

var nosFilhos = livro.childNodes;
			for ( var i = 0; i < nosFilhos.length; i++) {
				var noFilho = nosFilhos.item(i);

switch (noFilho.nodeName) {
					case "editora":
					case "edicao":
					case "preco":            
					case "sinopse":                        
						var valor = noFilho.firstChild.nodeValue;
						document.getElementById(noFilho.nodeName).innerHTML = valor
					break;
					case "autores":
						var valor = "";
						for ( var j = 0; j < noFilho.childNodes.length; j++) {
			 				if(noFilho.childNodes.item(j).nodeName=="autor"){
			   					if( valor != "" ) {
			     					valor+=" | ";
			   					}
			   					valor += noFilho.childNodes.item(j).firstChild.nodeValue;
			 				}
						}
						document.getElementById(noFilho.nodeName).innerHTML = valor;

default:
				break;
				}

}

var atributos = document.getElementById("divLivroSelecionado").attributes;
			atributos.getNamedItem("style").nodeValue="";
		}

</script>
		<br>
		
		<select id="livros" size="2" onclick="carregarLivro(this.value)">
		</select>
		
		<br>

<div id="divLivroSelecionado" style="visibility: hidden;"><br>
			<table border="1" width="60%">
				<tr>
					<td width="20%">Nome:</td>
					<td id="nome"></td>
				</tr>
				<tr>
					<td>ISBN:</td>
					<td id="isbn"></td>
				</tr>
				<tr>
					<td>Editora:</td>
					<td id="editora"></td>
				</tr>
				<tr>
					<td>Edição:</td>
					<td id="edicao"></td>
				</tr>
				<tr>
					<td>Autor(es):</td>
					<td id="autores"></td>
				</tr>
				<tr>
					<td>Preço:</td>
					<td id="preco"></td>
				</tr>
				<tr>
					<td colspan="2">Sinopse:</td>
				</tr>
				<tr height="100">
					<td colspan="2" id="sinopse"></td>
				</tr>
			</table>
		</div>
	</body>
</html>

Lembre de adicionar na pasta WebContent\WEB-INF\lib o arquivo jstl-1.2.jar que pode ser obtido em http://www.java2s.com/Code/JarDownload/jstl/jstl-1.2.jar.zip (descompacte o ZIP antes de adicionar o arquivo na pasta). Sempre teste os exemplo em um navegador Web recente e moderno como o Firefox, Internet Explorer, Google Chrome, etc. Alguns exemplos com muito Javascript pode não funcionar bem no navegador embutido no Eclipse.

Termo de uso

arrow_back Aula 06 - AJAX: Interação com o Servidor

Exemplo 1

Aula 06 - AJAX: Interação com o Servidor