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.
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
Atenção
