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.

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 o leia, pois não vou me alongar aqui nesta parte
introdutória, que mostra como usar jQuery em páginas ASP .NET.

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:

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:

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