Lendo XML com jQuery Ajax

A jQuery é a biblioteca JavaScript mais usada em aplicações web atualmente. Ela foi desenvolvida em 2006 por John Resig e é suportada por uma comunidade de desenvolvedores, além do time do projeto jQuery. Ela foi construída para ser leve, poder ser usada nos principais navegadores e ser compatível com a especificação CSS3.

Ela simplifica a maneira como acessar os elementos DOM, tornando mais fácil a navegação pelas páginas. A biblioteca possui poderosos recursos Ajax, manipulação de eventos e efeitos de animação,
permitindo um rápido desenvolvimento de aplicações web. Além disso, a jQuery permite a criação de plugins, o que possibilita aos desenvolvedores criar recursos poderosos com base no núcleo jQuery.

Por tudo isso você não pode ignorar a jQuery. Além do mais, ela permite utilizar muitos recursos em
suas aplicações web, tornando-a mais interativa e amigável ao usuário.

Atualmente, o jQuery está na versão 1.6.1 e você pode baixá-la aqui: http://jquery.com/. Ela está disponível tanto no Visual Studio, quanto nas versões Express, quando você cria uma aplicação
web usando o template padrão (não o vazio).

A JQuery está incluída nos projetos ASP .NET Web Forms e também nos projetos ASP .NET MVC. A library Microsoft Ajax foi projetada para atrair desenvolvedores JQuery, e você pode mesclar plug-ins JQuery e controles de cliente Microsoft Ajax em sua aplicação.

Neste artigo, vou mostrar como utilizar jQuery AJAX em páginas ASP .NET para realizar algumas tarefas do dia a dia envolvendo controles ASP .NET. Vou mostrar, também, como ler uma fonte de dados XML usando jQuery AJAX.

Recursos usados nos exemplos do artigo:

Visual Web Developer 2010 Express Edition;
jquery-1.4.1.min.js, que já vem embutida com o projeto ASP .NET Web Application;
Navegadores:Internet Explorer 8.0, Firefox 3.6 e Chrome 9.0.

Usando jQUery na prática

1-Criando o projeto

Abra o Visual Web Developer 2010 Express Edition e no menu File-> New Project crie um novo
projeto usando a linguagem Visual Basic e o template ASP .NET Web Application com o nome jQuery_Ajax_XML. Clique no botão OK.

Após criar o projeto, se você observar a janela Solution Explorer, verá na estrutura do projeto ba pasta Script a biblioteca jQuery (jquery-1.4.1.min.js):

De forma geral, nas páginas .aspx dos nosso exemplos poderemos distinguir 3 seções:

A declaração da biblioteca jQuery que iremos usar (tag <script src=”Scripts/jquery-1.4.1.js”…> (Estamos usando a biblioteca jQuery localmente na pasta Scripts);
A declaração do código jQuery entre as tags <script type=”text/javascript”>;
A declaração do estilo CSS usado na página na tag <style type=”text/css”>.

Para realizar a tarefa proposta usando jQuery Ajax, criaremos uma página .aspx no projeto da seguinte forma :

No menu Project -> Add New Item e selecione o template Web Form;
Informe o nome da página e clique no botão Add;
Vamos remover também do projeto os arquivos .aspx e a Master Page do projeto clicando com o botão direito do mouse sobre o arquivo e clicando em Delete.

Obs: Se você estiver usando o VS 2008, deverá ter aplicado o Service Pack 1 e a correção KB958502 http://archive.msdn.microsoft.com/KB958502 para poder habilitar o intellisense do jQuery.

2 -
Definindo a fonte de dados XML

Vamos definir como nossa fonte de dados XML o arquivo livros.xml com o seguinte conteúdo:

<?xml version="1.0" encoding="utf-8" ?>
<LivroLista>
<Livro>
<Titulo>O Alquimista</Titulo>
<Autor>Paulo Coelho</Autor>
<Genero>Ficcao</Genero>
</Livro>
<Livro>
<Titulo>A moreninha</Titulo>
<Autor>Machado de Assis</Autor>
<Genero>Romance</Genero>
</Livro>
<Livro>
<Titulo>David Copperfield</Titulo>
<Autor>Charles Dickens</Autor>
<Genero>Classico</Genero>
</Livro>
<Livro>
<Titulo>Sidarta</Titulo>
<Autor>Herman Hesse</Autor>
<Genero>Ficcao</Genero>
</Livro>
<Livro>
<Titulo>ADO Banco de dados na web</Titulo>
<Autor>Jose Carlos Macoratti</Autor>
<Genero>Informatica</Genero>
</Livro>
</LivroLista>

Vamos colocar o arquivo livros.xml no projeto por questão de simplicidade, mas poderia colocar em qualquer lugar. Para isso, no menu Project -> Add Existing Item e selecione o arquivo livros.xml.

3 - Definindo a interface

Crie um novo web form chamado Default.aspx.

Inclua uma tabela HTML (menu Table->Insert Table) na página Default.aspx com uma coluna, conforme o seguinte leiaute:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="jQuery_Ajax_XML._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Lendo um arquivo XML com JQuery Ajax</title>
</head>
<body>
<form id="form1" runat="server">
   <div align="center">
       <fieldset style="width:400px;height:230px;">
        <table border="0" cellpadding="3" cellspacing="3">
           <tr><td colspan="2" class="style1">Arquivo XML</td></tr>
           <tr><td colspan="2">
              <div id="conteudotArea" align="left" />
           </td></tr>
         </table>
      </fieldset>
   </div>
</form>
</body>
</html>

A tag <fieldset> é usada para agrupar logicamente elementos em um formulário. Ela desenha uma caixa em torno dos elementos relacionados a ele. A tag também define uma tabela HTML com uma coluna e uma linha, na qual iremos exibir as informações do arquivo XML.

Definimos também uma <div> com id igual a mensagem que iremos usar como uma área para exibir o
arquivo XML: <div id=”conteudoArea”></div>

Definindo o script jQuery

Agora vamos definir o script jQuery para exibir o conteúdo da célula selecionada do GridView, conforme o código abaixo:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#contentArea").append("<ul></ul>");
            $.ajax({
                type: "GET",
                url: "livros.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('Livro').each(function () {
                        var sTitulo = $(this).find('Titulo').text();
                        var sAutor = $(this).find('Autor').text();
                        var sGenero = $(this).find('Genero').text();
                        $("<li></li>").html(sTitulo + ", " + sAutor + ", " + sGenero).appendTo("#contentArea ul");
                    });
                },
                error: function () {
                    alert("Ocorreu um erro inesperado durante o processamento.");
                }
            });
        });
</script>

No script jQuery definimos
o seguinte:

1- A função $(document).ready(function() { onde acrescentamos as tags que contêm a
lista não ordenada:

$("#contentArea").append("<ul></ul>");

2- Chamamos o método Ajax

$.ajax({

3- Definimos o tipo de requisição HTTP como GET:

type: "GET",

4- Especificamos a url para o documento XML : livros.xml

url: "livros.xml",

5- Definimos o tipo de dados da resposta (response):

dataType: "xml",

6- Definimos a função de retorno para a invocação de sucesso:

success: function (xml) {

7- Percorremos usando um laço cada nó LivroLista/Livro
no documento XML:

$(xml).find('Livro').each(function(){

8- Recupera o conteúdo das tags Titulo, Autor e Genero do arquivo XML:

var sTitulo = $(this).find('Titulo').text();

var sAutor = $(this).find('Autor').text();

var sGenero = $(this).find('Genero').text();

9 – Acrescentamos o conteúdo recuperado como um item da lista para a lista não ordenada no
formulário:

$("<li></li>").html(sTitulo + ", " + sAutor + ", " + sGenero).appendTo("#contentArea ul");

10- Define a função de retorno em
caso de erro:

error: function () {

alert("Ocorreu um erro inesperado durante o processamento.");

Executando o projeto iremos obter:

Dessa forma, vemos o conteúdo do arquivo livros.xml exibido na página ASP .NET através do recursos jQuery Ajax.

Pegue o projeto completo aqui: Query_Ajax_XML.zip.

E:\Clientes\W2R\Internet\Site\xml\jQuery_Ajax_XML

sábado, 25 de maio de 2013