AJAX - Lendo XML com jQuery Ajax

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 usadas nos principais navegadores e ser compatível com a especificação CSS3.

jQuery simplifica a maneira de 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 que possibilita aos desenvolvedores criar recursos poderosos com base no núcleo jQuery.

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

Eu já apresentei a jQuery em meu artigo - ASP .NET - Apresentando JQuery - Macoratti.net, e se você nunca ouviu falar ou nunca usou jQuery sugiro que você o leia pois não vou repetir toda a parte introdutória que mostra como usar jQuery em páginas ASP .NET.

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

JQuery esta incluída tanto nos projetos ASP .NET Web Forms como 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.

Neste artigo eu vou mostrar 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 e clique no botão OK;

Após criar o projeto se você observar a janela Solution Explorer ir ver na estrutura do projeto a 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:

1. 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);
2. A declaração do código jQuery entre as tags <script type="text/javascript">;
3. 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:

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;

- Na página Default.aspx inclua uma tabela HTML (menu Table-> Insert Table) com uma linha 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>

O tag <fieldset> é usada para agrupar logicamente elementos em um formulário. Esta tag desenha uma caixa em torno dos elementos relacionados do formulário.

a tag <table> define uma tabela HTML com uma coluna e uma linha onde iremos exibir as informações do arquivo XML.

Definimos também uma <div> com id igual a msg 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:

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 af unção de retorno para a invocação de sucesso:

success: function (xml) {

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

Aguarde mais artigos sobre jQuery Ajax.

Pegue o projeto completo aqui: Query_Ajax_XML.zip

"Deus é Espírito,e importa que os que o adoram o adorem em espírito e em verdade." (João 4:24)

Referências:

• ASP .NET - Usando os novos modelos de Projeto - Macoratti.net
• ASP .NET - Apresentando JQuery - Macoratti.net
• ASP .NET - Evitando o Copiar/Colar em controles ... - Macoratti.net
• ASP .NET - Exibindo textos e imagens com o recurso ... - Macoratti.net

José Carlos Macoratti