Aulas
Disciplinas

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

arrow_back 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).

Figura 01 - Exemplo utilizando XML DOM
Exemplo utilizando XML DOM

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:

​x
1
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
2
   pageEncoding="ISO-8859-1"%>
3
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
4
​
5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
6
"http://www.w3.org/TR/html4/loose.dtd">
7
​
8
<html>
9
    <head>
10
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
11
        <title>XML DOM</title>
12
    </head>
13
​
14
    <body onload="onLoad()">
15
​
16
        <script type="text/javascript">
17
​
18
        var xmlDoc = null;
19
        var livro = null;
20
​
21
        function onLoad(){
22
23
        var ajaxReq = new XMLHttpRequest();
24
        var url = "/Aula06/livros.xml";
25
​
26
        ajaxReq.onreadystatechange = function() {
27
            if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
28
                xmlDoc = ajaxReq.responseXML;
29
                carregarLista();
30
            }
31
        };
32
​
33
        ajaxReq.open("GET", url, true);
34
        ajaxReq.send();
35
36
        }
37
​
38
        function carregarLista(){
39
40
            var livros = xmlDoc.getElementsByTagName("livro");
41
                for ( var i = 0; i < livros.length; i++) {
42
43
                var livro = livros.item(i);
44
45
                var nome="";
46
                var isbn="";
47
48
                if(livro.hasAttributes()){
49
                   nome = livro.attributes.getNamedItem("nome").nodeValue;
50
                   document.getElementById("nome").innerHTML = nome;
51
                   isbn = livro.attributes.getNamedItem("isbn").nodeValue;
52
                   document.getElementById("isbn").innerHTML = isbn;
53
                }
54
55
                var campoLivro = document.getElementById("livros");
56
                campoLivro.options[campoLivro.length] = new Option(nome, ""+i);
57
58
            }
59
60
        }
61
​
62
        function carregarLivro(indice){
63
64
            var livros = xmlDoc.getElementsByTagName("livro");
65
            var livro = livros.item(indice);
66
​
67
            var nome="";
68
            var isbn="";
69
            if(livro.hasAttributes()){
70
                nome = livro.attributes.getNamedItem("nome").nodeValue;
71
                document.getElementById("nome").innerHTML = nome;
72
                isbn = livro.attributes.getNamedItem("isbn").nodeValue;
73
                document.getElementById("isbn").innerHTML = isbn;
74
            }
75
​
76
            var nosFilhos = livro.childNodes;
77
            for ( var i = 0; i < nosFilhos.length; i++) {
78
                var noFilho = nosFilhos.item(i);
79
​
80
                switch (noFilho.nodeName) {
81
                    case "editora":
82
                    case "edicao":
83
                    case "preco":
84
                    case "sinopse":
85
                        var valor = noFilho.firstChild.nodeValue;
86
                        document.getElementById(noFilho.nodeName).innerHTML = valor
87
                    break;
88
                    case "autores":
89
                        var valor = "";
90
                        for ( var j = 0; j < noFilho.childNodes.length; j++) {
91
                            if(noFilho.childNodes.item(j).nodeName=="autor"){
92
                                if( valor != "" ) {
93
                                    valor+=" | ";
94
                                }
95
                                valor += noFilho.childNodes.item(j).firstChild.nodeValue;
96
                            }
97
                        }
98
                        document.getElementById(noFilho.nodeName).innerHTML = valor;
99
​
100
                        default:
101
                break;
102
                }
103
​
104
            }
105
​
106
            var atributos = document.getElementById("divLivroSelecionado").attributes;
107
            atributos.getNamedItem("style").nodeValue="";
108
        }
109
​
110
        </script>
111
        <br>
112
113
        <select id="livros" size="2" onclick="carregarLivro(this.value)">
114
        </select>
115
116
        <br>
117
​
118
        <div id="divLivroSelecionado" style="visibility: hidden;"><br>
119
            <table border="1" width="60%">
120
                <tr>
121
                    <td width="20%">Nome:</td>
122
                    <td id="nome"></td>
123
                </tr>
124
                <tr>
125
                    <td>ISBN:</td>
126
                    <td id="isbn"></td>
127
                </tr>
128
                <tr>
129
                    <td>Editora:</td>
130
                    <td id="editora"></td>
131
                </tr>
132
                <tr>
133
                    <td>Edição:</td>
134
                    <td id="edicao"></td>
135
                </tr>
136
                <tr>
137
                    <td>Autor(es):</td>
138
                    <td id="autores"></td>
139
                </tr>
140
                <tr>
141
                    <td>Preço:</td>
142
                    <td id="preco"></td>
143
                </tr>
144
                <tr>
145
                    <td colspan="2">Sinopse:</td>
146
                </tr>
147
                <tr height="100">
148
                    <td colspan="2" id="sinopse"></td>
149
                </tr>
150
            </table>
151
        </div>
152
    </body>
153
</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.

[A] Anterior
5/16
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados